Skip to main content

From Scattered to Scatterplots: An Introduction to d3.js

Scott Murray (University of San Francisco)
Design
Ballroom E
Tutorial Please note: to attend, your registration must include Tutorials on Tuesday.
Average rating: ****.
(4.85, 13 ratings)

Tutorial Prerequisites

Attendees will need laptops in order to follow along. Scott will have the code examples posted online (using O’Reilly Atlas):

http://chimera.labs.oreilly.com/books/1234000002001/ch01.html

The preferred option is for attendees to download the code examples in advance from:

https://github.com/alignedleft/scattered-scatterplot

They should also have the following software ready to use:

  • Code editor of choice (e.g. Sublime Text)
  • Current browser (e.g. Chrome)
  • (Optional) Local web server

Tutorial Description

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
  • 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

Assistant Professor of Design, 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 author of the forthcoming O’Reilly title “Interactive Data Visualization for the Web”. Scott earned an A.B. from Vassar College and an M.F.A. from the Dynamic Media Institute at the Massachusetts College of Art and Design. His work can be seen at alignedleft.com.

Comments on this page are now closed.

Comments

Picture of Scott Murray
Scott Murray
01/24/2014 2:56am PST

Looking forward to Strata! Note that this tutorial is for beginners, new to D3 and possibly also JavaScript. You should be familiar with HTML and CSS, and have some programming experience (not necessarily JavaScript). Advanced developers will find this too slow; for those new to programming visualizations, it should be just right.

Also, you may want to download the code examples in advance.

Hope you can join us!