Course on D3 by Roman Sahan (JS developer at Binary Studio)

2. What if you have a lot of data?
https://bl.ocks.org/tafsiri/b83f60f23bf4ce130ca2

3. Canvas
https://bl.ocks.org/tafsiri/e9016e1b8d36bae56572

4. Canvas
HTML5 Canvas is a 2D immediate mode rendering API that is much more low
level, but more performant than SVG.
Canvas great at drawing a significant number of objects on a relatively small
surface, e.g., non-interactive real time data visualizations like graphical
representations of weather patterns.

5. Canvas
The canvas element is the actual
DOM node that’s embedded in the
HTML page.
The canvas context is an object with
properties and methods that you
can use to render graphics inside the
canvas element.

6. Ways to use D3.js with canvas
1. You could use D3.js entirely for its functional purpose – to transform data
that you can then position onto your canvas as you see fit.
2. You could also use D3.js with some dummy HTML nodes to capture
lifecycle selections and then repainting the canvas when the data
changes.
3. You could use D3.js with some dummy HTML nodes to capture lifecycle
selections AND their animations, repainting the canvas on a draw loop.

7. Drawing
https://codepen.io/sahanr/pen/Lzvrrq

8. Data binding
https://codepen.io/sahanr/pen/EwJQKQ

9. Axes
https://codepen.io/sahanr/pen/mBgGGz

10. Transition
https://codepen.io/sahanr/pen/xXNPxm

11. d3-canvas-transition
https://codepen.io/sahanr/pen/pWBONM

12. Interactivity
https://codepen.io/sahanr/pen/BmadqR

13. Drag & drop
https://codepen.io/sahanr/pen/vewdWb - positions
https://codepen.io/sahanr/pen/WXbPZz - colors

14. Links
HTML5 Canvas Tutorials
http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
WORKING WITH D3.JS AND CANVAS: WHEN AND HOW
https://bocoup.com/blog/d3js-and-canvas
D3 and Canvas. The bind, the draw and the interactivity
http://www.datamake.io/blog/d3-canvas-full#draw-args
NEEDLES, HAYSTACKS, AND THE CANVAS API
https://bocoup.com/blog/2d-picking-in-canvas

15. To be continued...