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