angularplasmid
Version:
Biological Plasmid Visualization Component using AngularJS
45 lines (37 loc) • 2.4 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;}
</style>
<plasmid sequencelength="2686" plasmidheight="375" plasmidwidth="375">
<plasmidtrack trackstyle="fill:#c60;stroke:none" radius="125" width="8">
<!-- plasmid title -->
<tracklabel text="pUC19" labelstyle="font-size:30px;font-weight:700"></tracklabel>
<tracklabel text="2686 bp" labelstyle="font-size:18px;font-weight:400" vadjust="25"></tracklabel>
<!-- scale -->
<trackscale interval="500" labelvadjust="20" showlabels="1" labelstyle="font-size:12px"></trackscale>
<!-- lacZ -->
<trackmarker start="80" end="454" arrowstartlength="10" arrowstartwidth="5" arrowstartangle="3" vadjust="-10">
<markerlabel text="lacZ" vadjust="-30" labelstyle="font-weight:400;font-size:20px"></markerlabel>
</trackmarker>
<!-- Polylinker -->
<trackmarker start="396" end="454" vadjust="-10" markerstyle="fill:#00f">
<markerlabel text="Polylinker" vadjust="-35" labelstyle="font-weight:400;font-size:16px;fill:#00f"></markerlabel>
<markerlabel text="396-454" vadjust="40" labelstyle="font-weight:400;font-size:14px;fill:#00f"></markerlabel>
</trackmarker>
<!-- ori -->
<trackmarker start="800" end="1400" arrowstartlength="10" arrowstartwidth="5" arrowstartangle="3" vadjust="-10">
<markerlabel text="ori" vadjust="-25" labelstyle="font-weight:400;font-size:20px"></markerlabel>
</trackmarker>
<!-- amp -->
<trackmarker start="1700" end="2500" arrowstartlength="10" arrowstartwidth="5" arrowstartangle="3" vadjust="-10">
<markerlabel text="amp" vadjust="-30" labelstyle="font-weight:400;font-size:20px"></markerlabel>
</trackmarker>
</plasmidtrack>
</plasmid>
</body>
</html>