D3.js
in data visualization
Data-Driven Documents
- library designed for SVG and HTML
- does not work for Canvas (until it's not a document)
- it's relatively low-level tool - don't even touch it if you don't need more than simple chart
D3 can replace
- Handlebars, Moustache
- React
- jQuery
- Raphaël :)
D3 (alone) cannot replace
- Angular, Ember... *
- Highcharts / Chart.js
* put name of framework you use here
How is it different?
Declarative approach
No templates!
Data-binding
Animations
Helpers
- math functions
- time functions
- data parsers
- scales
- axes
- geographic data
- 2D graphics
- standard layouts
- and much more
The only thing you need is...
to understand.
Data-binding and selections
Layouts
-
encapsulate a strategy for laying out data elements visually
- cover common use cases: piechart, tree, histogram, pack
- layout does not draw anything, just transform data
Layouts
Behaviors
- encapsulate a complex set of low-level DOM interactions
- does not render anything
- two built-in: zoom & drag
Components
- reusable chunks of the view
- may expose high-level events
- may transform data
Components
Caveats
Tricky Transitions
Sneaky Selections
Evil Event
Horrible Handlers
Further reading
it's over
Thank you!
Eryk Napierała
D3.js in data visualization
By Eryk Napierała
