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

D3.js in data visualization

  • 655
Loading comments...

More from Eryk Napierała