Data Driven Documents with D3 — A Primer

written by Shawn Day on April 24, 2013 in Review and Visualization with no comments

Inter­act­ive Data Visu­al­isa­tion for the Web by Scott Mur­ray puts you in the seat beside a data vis mas­ter as he takes you from zero to a solid com­pre­hen­sion of the think­ing behind d3.js — a pop­u­lar frame­work for visual data present­a­tion. D3.js is all the rage and the under­ly­ing frame­work behind many com­pel­ling inter­act­ive data present­a­tions mak­ing the rounds in the net media today. The think­ing behind d3.js (yes, d3 stands for data driven doc­u­ments) is a logical lay­er­ing that binds data to screen dis­play and allows you as author to give your consumers/readers the abil­ity to explore your data to derive their own find­ings. Logic­ally this book does some­thing very sim­ilar. Imbued wih the d3 ethos, Mur­ray provides a very solid (and wel­come) over­view of the DOM, its con­stitu­ent parts and the handles that have been put in place through HTML and JavaS­cript to util­ise the mod­ern browser as a data ana­lysis and present­a­tion tool. He then takes you through a gradual step-by-step pro­cess of show­ing you excatly how to take your own data and use d3 to con­struct simple but power­ful inter­act­ive visualisations.

This new volume is richly hands on and assumes little or no prior know­ledge of web tech­no­lo­gies — aside from a will­ing­ness to engage and work through the step-by-step exer­cises provided. Mur­ray intro­duces the volume with a com­pre­hens­ive but con­cise dis­cus­sion of HTML, CSS and JavaS­cript. As a point of inform­a­tion it’s inter­est­ing that an author ‘forced’ to quickly cover core top­ics such as this does such a fine job being con­strained by space, focus and a desire to move on to big­ger things.  Books ded­ic­ated to the minu­tiae tend to ful­fill their own ambi­tion and often devolve into deeply philo­soph­ical refec­tions — as though com­pelled to become a book when a mere chapter would suf­fice.  Basics should stay basic. OK, end of tan­gen­tial comment.

Inter­act­ive Data Visu­al­isa­tion is focused on d3. There are many other frame­works out there for accom­plish­ing the same tasks — and very thought­fully the author even lists a series of them. A def­in­ite strength of this volume is the healthy num­ber of ref­er­ences provided through­out and at the con­clu­sion for future explor­a­tion of the data visu­al­isa­tion in gen­eral and also to con­tinue down the d3 line. The few chapters in this book pro­gress­ively intro­duce you to d3 con­cepts, build­ing on each and provid­ing extens­ive follow-on samples. All of the JavaS­cript is thor­oughly dis­sec­ted, files are made avail­able for your own decon­struc­tion and the small steps keep you from being over­whelmed (as I so eas­ily am). The style of prose is famil­iar and blends just the right amount of humour to make the instruc­tion feel per­sonal and keep you engaged.

At 250 pages, this volume is more than a quick intro­duc­tion, but far less than a ref­er­ence manual. It is the equi­val­ent of a day-long instruc­tion ses­sion intro­du­cing you to the power of d3. The author con­cen­trates the instruc­tion on build­ing a very simple visu­al­isa­tion using a bar chart, that although simple, allows for a wide explor­a­tion of the con­cepts behind d3. He touches on how these con­cepts can be exten­ded logic­ally into pie, donut and force-directed dis­plays to demon­strate the extens­ib­il­ity of d3 and then looks at how GeoJSON data is use­fully handled through d3 — tip­ping his hat to the geo­spa­tial turn in data.

I worked through the bulk of the exer­cise provided and the format lends itself to hav­ing your bow­ser open along with an editor sav­ing your changes to an act­ive doc­u­ment on your web server. The small steps are imme­di­ately vis­ible and reaf­firm your con­fid­ence with the frame­work. I found that this intro­duc­tion (com­pleted after back­wards engin­eer­ing many d3.js examples) really helped to give me some of the ah-ha moments of cla­ri­fic­a­tion of what I had not quite grasped when try­ing to work with pre-constructed visu­al­isa­tions. Both of these approaches though seem to work well together.

This is a highly recom­men­ded volume and along with Nathan Yau’s superb Visu­al­ise This, can serve as superb data vis hands-on instruc­tion courses. Both very well paced and full of help­ful, well con­struc­ted samples. I would recom­mend this for novice to inter­me­di­ate usage and ser­i­ously con­sider using it in my next inform­a­tion visu­al­isa­tion workshop.

---

Related Articles