This document discusses using SVG and AngularJS for biological modeling. It begins with an introduction to SVG and how it can be used to create 2D vector graphics in the browser. It then explains how SVG can be combined with AngularJS using directives and manipulating SVG elements in the DOM. As a use case, it presents using SVG and AngularJS to build components for visualizing DNA plasmids and sequences, including challenges faced and solutions developed like lazy loading data. A demo is shown of an AngularJS-based genome viewer for synchronized plasmid and sequence views.

1. Biological Modeling, 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…
My
Codemotion
Session
Me

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
Demo

19. SVG + AngularJS = <3
Combining SVG and AngularJS isn’t 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 Modeling

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. Demo
AngularPlasmid + $compile

32. No DNA sequence library 

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

35. What’s the problem you ask?

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

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

39. Front-end Architecture
AngularPlasmid
Every row is a directive

40. Demo
Genome Viewer (work in progress)

41. Questions?

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

43. Thank You!