Home

The Joy of d3.js

Commit by commit guide of Hans Rosling "GapMinder" data bisualization in d3.js

• Introductory blog post
• Screencast
• Demo

Inspiration

• The Joy Of Stats = Hans Rosling's 200 countries, 200 years, 4 minutes
• The Wealth & Health of Nations = The recreation of GapMinder by Mike Bostock, the creator of d3

Table Of Contents

Introduction

DrawingCircle

• 9a076f145125b927946cd9c005e0df2fb34665d8

Debugging

BasicTransition

• Basic transition (2b2aba2e630fe70cc48114811aa1b5483a58febd)
• enter/update/exit (join) model (469b30925108cc0fdd8ed62bbcd5cfdde727915e)

Scaling

• ordinal(color) (8f635296dcb0a177a89602bcb2aa5dff061128f4)
• Linear(x y radius) (e42972819cf318a4822a566cb020afc363df3a55)
• Labelling (6dccfbdd6485fdd2c7aa8f13da0322bffff0debb)

ArrayGroupAndEvent

• Changed to ad more realistic figures (da0e0ba52ced31f4e473c57c6a559a48d2922f80).
• Grouping with g and text on mouseover(692658ccb43efbd5c0a44d27ab035722dffb2478)

LoadingData

• Added real data (6986477ca633f844a3c0edc55ef749193aa63619)
• Changed interval and added easing (f15b245f7d9f0f28215a9fcd370458eb8558e68e)
• Added year title(cd918fc5becc4c05a85412749c1bbbafb074c2b4)
• Loading Multiple Data files (8ab4d841240e27daae52ab6e22df0f5446a11453)

Geo

• Draw WorldMap (ee6d208fc4d11577adea4ccb49575ae37f8ef518)
• Added transition(79c701691dc204ae80d6b668acf17514ce427573)
• Refactoring(getCentroid)(ce2934983e76dab791da107fee304386a079dc1c)

Online resources

• http://d3js.org
• https://github.com/mbostock/d3/wiki/Gallery
• http://bost.ocks.org/mike/

Online videos by other authors

• http://enjalot.github.com/dot-enter
• http://enjalot.github.com/dot-append