A session I delivered in AngularConnect conference

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!