This document discusses using AngularJS and SVG for biological modeling. It begins with an introduction to SVG and how it can be used with AngularJS. A key use case is presented of using SVG and AngularJS to visualize DNA plasmids and sequences. Challenges in building this type of application are described such as dynamically generating plasmids and implementing sequence selection and scrolling. Virtual scrolling is proposed as a solution to handle large sequences efficiently. A demo of an in-progress genome viewer is presented to conclude.

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

2. This session is about graphics
(SVG)

3. This is how I draw a man…

5. And this is how I draw a bus…

7. This is how I draw a toilet…

9. I wish…

11. And somebody let me speak
about graphics…
Me
My AngularConnect
Session

13. Ok, so let’s get serious!

14. About Me
• sparXys CEO and Senior consultant
• ASP.NET/IIS Microsoft MVP
• Co-author of Pro Single Page Application
Development (Apress)
• ng-conf Israel co-organizer and GDG Rashlatz
Meetup co-organizer

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

16. 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

17. 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>

18. SVG Goodies
Demo

19. SVG + AngularJS = <3
Combining Angular and SVG is not hard
SVG elements are part of the DOM

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

21. SVG & AngularJS
Directive Demo

22. Use Case
SVG + AngularJS for Biological Modelling

23. Biology Disclaimer

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

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

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

27. Lazy
Developer

28. Are there any JavaScript libraries
for plasmids or sequences?
With AngularJS support?

29. 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>

30. 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

31. No DNA sequence library 

32. 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…

34. What’s the problem you ask?

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

37. 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/

38. Demo
Genome Viewer (work in progress)

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

40. Thank You!