angularplasmid/examples/biojs/pPMA43C.html

Biological Plasmid Visualization Component using AngularJS

<style>
    @import url("http://fonts.googleapis.com/css?family=Lato:300,400,700|Donegal+One|Source+Code+Pro:400");
    body {font-family: 'Lato';font-weight:400;}
    .lglabel {font-size:14px}
    .mdlabel {font-size:10px}
    .smlabel {font-size:8px}
    .labelline {stroke:#333;stroke-dasharray:2,2;stroke-width:2px;}
    .white {fill:#fff}
    .black {fill:#000}
    .red {fill:#c00}
    .blue {fill:#00c}
    .green {fill:#0c0}
    .gold {fill:#990}
    .gray {fill:#666}
</style>
<plasmid sequencelength="1000" plasmidheight="375" plasmidwidth="375">
    <plasmidtrack width="5" trackstyle='fill:#ccc;stroke:#999;' radius='125'>
        <tracklabel labelstyle="font-size:20px;font-weight:700;fill:#666;" text="pPMA43C"></tracklabel>
        <tracklabel labelstyle="font-size:12px;font-weight:400;fill:#999;" text="1,000 bp" vadjust="18"></tracklabel>

        <trackscale interval="10" style="stroke:#999;" vadjust="8"></trackscale>
        <trackscale interval="50" showlabels="1" style="stroke:#333;stroke-width:2px" ticksize="5" vadjust="8" labelstyle="font-size:9px;fill:#999;font-weight:300" labelvadjust="15"></trackscale>

        <!-- PstI -->
        <trackmarker start="200" end="330" markerstyle='stroke:#000;fill:#ff0;' arrowstartlength="10" arrowstartwidth="5" wadjust="10" vadjust="-5">
            <markerlabel text="PstI" vadjust="40" hadjust="2" valign="outer" class="lglabel gold" showline="1" linevadjust="-15" linevadjust="-15" lineclass="labelline"></markerlabel>
            <markerlabel type="path" text="200-330" class="smlabel gold" vadjust="4"></markerlabel>
        </trackmarker>

        <!-- AcolIII -->
        <trackmarker start="450" end="620" markerstyle='stroke:#000;fill:#f00;' arrowendlength="10" arrowendwidth="5" wadjust="10" vadjust="-5">
            <markerlabel text="AcolIII" vadjust="40" hadjust="2" valign="outer" class="lglabel red" showline="1" linevadjust="-10" lineclass="labelline"></markerlabel>
            <markerlabel type="path" text="400-620" class="smlabel white" vadjust="4"></markerlabel>
        </trackmarker>

        <!-- EcoRI -->
        <trackmarker start="630" end="720" markerstyle='stroke:#000;fill:#f00;' arrowendlength="10" arrowendwidth="5" wadjust="10" vadjust="-5">
            <markerlabel text="EcoRI" vadjust="40" hadjust="-2" valign="outer" class="lglabel red" showline="1" linevadjust="-20" lineclass="labelline"></markerlabel>
            <markerlabel type="path" text="630-720" class="smlabel white" vadjust="4"></markerlabel>
        </trackmarker>

        <!-- ScaI -->
        <trackmarker start="760" end="880" markerstyle='stroke:#000;fill:#0f0;' arrowendlength="10" arrowendwidth="5" wadjust="10" vadjust="-5">
            <markerlabel text="ScaI" vadjust="40" valign="outer" class="lglabel green" showline="1" linevadjust="-15" lineclass="labelline"></markerlabel>
            <markerlabel type="path" text="760-880" class="smlabel black" vadjust="4"></markerlabel>
        </trackmarker>

        <!-- TaqI -->
        <trackmarker start="980" end="150" markerstyle='stroke:#000;fill:#00f;' wadjust="10" vadjust="-5">
            <markerlabel text="TaqI" vadjust="40" hadjust="2" valign="outer" class="lglabel blue" showline="1" linevadjust="-10" linevadjust="-15" lineclass="labelline"></markerlabel>
            <markerlabel type="path" text="920-150" class="smlabel white" vadjust="4"></markerlabel>
        </trackmarker>

        <!-- Block markers -->
        <trackmarker start="420" end="430" markerstyle='stroke:#000;fill:#666' wadjust="20" vadjust="-10">
            <markerlabel text="A35" vadjust="-15" valign="inner" labelclass="mdlabel gray"></markerlabel>
        </trackmarker>
        <trackmarker start="355" end="365" markerstyle='stroke:#000;fill:#666' wadjust="20" vadjust="-10">
            <markerlabel text="A36" vadjust="-15" valign="inner" labelclass="mdlabel gray"></markerlabel>
        </trackmarker>
        <trackmarker start="905" end="915" markerstyle='stroke:#000;fill:#666' wadjust="20" vadjust="-10">
            <markerlabel text="A22" vadjust="-15" valign="inner" labelclass="mdlabel gray"></markerlabel>
        </trackmarker>
        <trackmarker start="170" end="180" markerstyle='stroke:#000;fill:#666' wadjust="20" vadjust="-10">
            <markerlabel text="A14" vadjust="-15" valign="inner" labelclass="mdlabel gray"></markerlabel>
        </trackmarker>
    </plasmidtrack>
</plasmid>