angularplasmid
Version:
Biological Plasmid Visualization Component using AngularJS
76 lines (68 loc) • 5.15 kB
HTML
<html>
<head>
<script src="../../dist/angularplasmid.complete.min.js"></script>
</head>
<body>
<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>
</body>
</html>