D3.js tutorial

Design Great America Ballroom K
Tutorial Please note: to attend, your registration must include Tutorials on Tuesday.
Presentation: D3_js tutorial Presentation [PDF]
Average rating: ***..
(3.00, 5 ratings)

D3 (data-driven documents) is one of the most acclaimed data-visualization libraries and has gained considerable adoption in its short lifespan. It is a very versatile framework, which can be used to create simple charts as well as sophisticated representations like network graphs or geographic projections, and which handles interactivity and animation well. But because of its unique features it also uses a specific syntax and concepts.

This tutorial will allow attendees to master the essential ideas of D3 and become fully operational.

The outline of the tutorial is:

  • Introduction
  • Fundamental notions; the document model, SVG;
  • Setting up D3;
  • Data – loading and verifying data;
  • Selections – how to map data to visual elements;
  • Setting attributes and style – controlling the appearance of the output;
  • Scales – one essential helper function in D3;
  • Transitions and interactivity;
  • The concept of data joins;
  • Conclusion – what can be achieved with D3.
Photo of Scott Murray

Scott Murray

University of San Francisco

Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an assistant professor of design at the University of San Francisco, where he teaches data visualization and interaction design. He is a contributor to Processing and is the author of the forthcoming O’Reilly title Interactive Data Visualization for the Web.

Photo of Jerome Cukier

Jerome Cukier

Jerome Cukier

I create interactive data visualizations. Prior to that, I have been in charge of storytelling with data and the visualization effort for OECD, and before that, I managed a videogames development studio. I hold an MBA from the University of Texas as Austin and a masters degree from EM Lyon.

Comments on this page are now closed.


NagaRAJU Anthati
06/12/2013 10:26pm PDT

Hi Everyone I would like to create a visualization in which i would like to show the node and its links connected to its outbound links. I would like to show the size of the node (circle) according its rank (the data obtained from page rank algorithm) Kindly help



Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Susan Stewart at sstewart@oreilly.com

Media Partner Opportunities

For information on trade opportunities with O'Reilly conferences contact Kathy Yu at mediapartners

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

Contact Us

View a complete list of Strata contacts