Graphically Speaking

Data visualization with D3

By James Rowlands / @jrowlands

Who am I?

By Day

By Night

What are we going to talk about?

  • Visualization: What & Why
  • D3: What & Why
  • Some Examples
  • Show me the code!
  • Questions

Visualization: What & Why

main goal of data visualization is to communicate information clearly and effectively through graphical means. It doesn’t mean that data visualization needs to look boring to be functional or extremely sophisticated to look beautiful. To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, providing insights into a rather sparse and complex data set by communicating its key-aspects in a more intuitive way. Yet designers often fail to achieve a balance between form and function, creating gorgeous data visualizations which fail to serve their main purpose — to communicate information.
Vitaly Friedman (2008) "Data Visualization and Infographics" in: Graphics, Monday Inspiration, January 14th, 2008.
http://www.steveprentice.net/tube/TfLSillyMaps/geographical_map.jpg

Harry Beck

Charles Joseph Minard

D3: What & Why

D3.js is a JavaScript library for manipulating documents based on data.

Mike Bostock, D3 developer

D3 ≠ Simple Graphs

Same Same but Different

D3 = Coolness

 

http://bl.ocks.org/mbostock/4063269

 

http://www.nytimes.com/interactive/2013/04/08/business/global/asia-map.html?_r=0

 

http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html

 

http://bost.ocks.org/mike/miserables/

 

http://bost.ocks.org/mike/uberdata/

Geographic

 

http://www.nytimes.com/interactive/2012/11/07/us/politics/obamas-diverse-base-of-support.html

 

http://prcweb.co.uk/lab/ukwind/
  • Interactivity*
  • Animations*
  • Transitions*
  • Complex Layouts*

 

* Stay Tuned to see these in action

Show me the code

Ingredients

  • Some Data
  • D3 Library
  • HTML
  • Javascript
  • CSS
  • SVG

Avoiding (some of) the pain

  • Seperate data file
  • Use localhost
  • Invert the Y
  • function(d) and function(d,i)

Code Time

Resources

We Are Hiring!

Questions

www.kiwiwebdeveloper.com

@jrowlands