follow along:

https://slid.es/ryangough/d3
http://ryangough.github.io


join in:

https://github.com/RyanGough/D3Hack.git


D3.js

JavaScript Data Visualisation Library
Mike Bostock @mbostock
http://d3js.org/


Visualising Data: The D3 Way


  • Data Driven Documents
  • Bind data to DOM and use data-driven transformations
  • Use web standards (HTML, SVG, CSS) for presentation
  • Provides tool-kit for solving the problem at a low level
  • Does not provide high level abstractions
  • Powerful, flexible but requires a little more effort

SVG

  • Scaleable Vector Graphics
  • XML based vector image format
  • Open standard, supported in all modern browsers
  • Describe paths, shapes, color fills etc
  • Compatible with CSS
  • Can also use canvas or any other valid HTML elements

Enough Talk...

Demonstration will show key areas of D3
  • Selections
  • Data Binding / Joins
  • Scales
  • Axis
  • Transitions

But there is much more!
  • Array manipulation
  • Layouts
  • CSV formatting
  • Time (intervals etc)
  • Geo...

Resources

Loads of stuff from Mike Bostock
"Thinking with joins"
"General Update Pattern"
"Lets make a map!"

Scott Murray @alignedleft
Good online tutorials and free online O'Reilly book
"Interactive Data Visualisation for the Web"
Made with Slides.com