Tweet
Tweet

Slide 1

Slide 1 text

Ideogram.js Chromosome visualization with JavaScript https://github.com/eweitz/ideogram

Slide 2

Slide 2 text

Outline

Slide 3

Slide 3 text

What is an ideogram?

Slide 4

Slide 4 text

Human genome as karyotype

Slide 5

Slide 5 text

Human genome as ideogram

Slide 6

Slide 6 text

Parts of a chromosome

Slide 7

Slide 7 text

p arm q arm Parts of a chromosome

Slide 8

Slide 8 text

Parts of a chromosome

Slide 9

Slide 9 text

Ideograms are widely used

Slide 10

Slide 10 text

Outline

Slide 11

Slide 11 text

Ideogram.js ● ● ● ●

Slide 12

Slide 12 text

Human genome https://eweitz.github.io/ideogram/human

Slide 13

Slide 13 text

https://eweitz.github.io/ideogram/mouse Mouse genome

Slide 14

Slide 14 text

100+ eukaryotic genomes https://eweitz.github.io/ideogram/eukaryotes

Slide 15

Slide 15 text

Comparative genomics https://eweitz.github.io/ideogram/homology-interspecies

Slide 16

Slide 16 text

Show gene location

Slide 17

Slide 17 text

Load BED files

Slide 18

Slide 18 text

Diploid human genome

Slide 19

Slide 19 text

Outline

Slide 20

Slide 20 text

Ideogram.js software architecture Ideogram.js is a client-side web component. - Few dependencies; framework-independent Run-time is JavaScript; data build is Python. Remaining stack: Travis CI, Coveralls, GitHub Pages, Unpkg CDN

Slide 21

Slide 21 text

Ideogram.js data architecture

Slide 22

Slide 22 text

ES6 module system

Slide 23

Slide 23 text

CommonJS, AMD, manual ES6 module system

Slide 24

Slide 24 text

Ideogram.js modules 2017-07 (v0.6.1)

Slide 25

Slide 25 text

Ideogram.js modules 2018-08 (v1.3.0)

Slide 26

Slide 26 text

Ideogram.js modules 2018-10 (master)

Slide 27

Slide 27 text

Ideogram.js is a reusable component ● ● ● ● ●

Slide 28

Slide 28 text

Ideogram.js in React https://github.com/eweitz/ideogram/tree/master/examples/react

Slide 29

Slide 29 text

Ideogram.js in Jupyter Notebooks https://github.com/eweitz/ideogram/tree/master/examples/jupyter

Slide 30

Slide 30 text

Outline

Slide 31

Slide 31 text

Performance Speed matters to users and developers. Users: page load time, run-time smoothness Developers: user concerns + time to compile, test, add features

Slide 32

Slide 32 text

Ideogram.js performance 53 kB in transfer size < 350 ms for uncached load and render < 100 ms to filter 20,000+ genes

Slide 33

Slide 33 text

Measure performance with Chrome DevTools Chrome DevTools panels give key insight on web app performance. Network panel: ● Detail on each request ● Throttle download, upload, latency Performance panel: ● Automatic screenshots of visual state over time ● “Flame chart” of call stack over time Mac: Command + Option + I Windows / Linux: Control + Shift + I

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Maintainability Performance metrics for developers. Time to: ● Compile ● Test ● Add features

Slide 37

Slide 37 text

Adding new features quickly Code Climate estimates technical debt in a repo, by measuring: Argument count Complex logic File length Identical blocks of code Similar blocks of code https://codeclimate.com/github/eweitz/ideogram Method complexity Method count Method length Nested control flow Return statements

Slide 38

Slide 38 text

Ideogram.js 2019 roadmap ● More support for cancer genomics ● Resurrect batch ideograms ● Generalized comparative genomics ● Responsive view for mobile