This document discusses using SVG and AngularJS for biological modeling. It begins with an introduction to SVG and how it can be used with AngularJS. It then presents a use case of combining SVG, AngularJS and a pre-existing AngularPlasmid component to build interactive views of DNA plasmids and sequences. Problems in rendering large sequences are addressed through techniques like virtual scrolling to only generate the visible viewport. Finally, a demo is shown of a genome viewer application built with these technologies.

1. Biological Modeling, Powered by
AngularJS
Gil Fink
CEO and Senior Consultant, sparXys
@gilfink

2. This session is about
working with graphics

3. But…

4. I’m not a graphics designer

6. This is how I draw toilets…

8. I wish…

10. And somebody let me
speak about graphics…

12. Ok, so let’s get serious!

13. About Me
• sparXys CEO and senior consultant
• Microsoft MVP
• Co-author of Pro Single Page Application
Development (Apress)
• Angular up conference and GDG Rashlatz Meetup
co-organizer

14. Agenda
• SVG in a Nutshell
• SVG + AngularJS = <3
• Use Case: Biological Modeling

15. SVG in a Nutshell
• Graphics model in the browser
• Create and draw 2D vector graphics using HTML
• Support for:
o Full DOM access
o Document structure, scripting, styling, paths, shapes, colors, transforms,
gradients, patterns, masking, clipping, markers, linking and views

16. 2D Vector Graphics
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>

17. SVG
Demo

18. SVG + AngularJS = <3
Combining SVG and AngularJS isn’t hard
SVG elements are part of the DOM!

19. SVG + AngularJS 1
Caveats
• In directives that generate SVG, use
templateNamespace in the DDO:
• Set SVG attributes using ng-attr- prefix:
<circle ng-attr-cx="{{radius}}" ng-attr-cy="{{radius}}" ng-attr-r="{{radius}}"/>
templateNamespace: 'svg'

20. SVG & AngularJS 1
Directive Demo

21. SVG + Angular 2 Caveats
• In components that generate SVG, use svg: prefix
when using SVG elements:
• Set SVG attributes using attr. prefix:
• Remember:
SVG cannot accept elements it doesn't recognize!
o Don’t create your own named components, use named attributes instead
<svg:circle [attr.cx]="radius" [attr.cy]="radius" [attr.r]="radius"/>
<svg:circle cx="10" cy="10" r="30"/>

22. SVG + Angular 2
Component Demo

23. Use Case
Using SVG + AngularJS for Biological Modeling

24. Biology Disclaimer

25. Biology 101
• Plasmids - small DNA molecules represented as a
circle with annotations

26. Biology 101
• Sequence – primary structure of a biological
molecule written in characters (A, T, G, C)

27. Customer Needs
• Synchronize plasmid and sequence views
• Fast scrolling
• Sequence and plasmid selection
• Annotation layers

28. Lazy
Developer

29. Are there any JavaScript
libraries for plasmids or
sequences?
Preferable with AngularJS support? 

30. Maybe in BioJS?
http://www.biojs.io/

31. AngularPlasmid
• DNA plasmid visualization component using
AngularJS and SVG
• http://angularplasmid.vixis.com/index.php
<plasmid sequencelength='1000'>
<plasmidtrack radius='50'>
<tracklabel text='Demo'></tracklabel>
<trackscale interval='100' showlabels='1'></trackscale>
<trackmarker start='212' end='345'></trackmarker>
<trackmarker start='530' end='650'>
<markerlabel text='Ecol'></markerlabel>
</trackmarker>
<trackmarker start='677' end='820'></trackmarker>
</plasmidtrack>
</plasmid>

32. Problems We Faced
• Generating the plasmid dynamically from specific
files
o Solved by dynamically adding AngularPlasmid elements
o Then, we use the $compile service
• Adding selection to the plasmid
o Solved by adding our own implementation

33. Demo
AngularPlasmid + $compile

34. No DNA sequence library 

35. Building the Sequence –
The Naïve Way
• Let AngularJS generate the whole sequence
o Use ng-repeat, SVG and browser scrolling
• Add annotation layers with SVG
• The problem is…

37. What’s the problem?

39. Can we do better?
Maybe infinite scrolling?
Not good enough!

40. Virtual Scrolling
• Generate only the current viewport
• Good reading reference:
o http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/
o http://blog.stackfull.com/2013/03/angularjs-virtual-scrolling-part-2/

41. Front-end Architecture
AngularPlasmid
Each row is a directive

42. Demo
Genome Viewer

43. Summary
• SVG is one of the options to create graphics in
the browser
• SVG and AngularJS can work well together
• You can create sophisticated modeling using
SVG and AngularJS

44. Thank You!