From Scattered to Scatterplot

An Introduction to d3.js by Scott Murray

Confused by D3? Interested in coding data visualizations on the web, but don't know where to start? This interactive online tutorial will have you transforming data into visual images in no time at all, starting from scratch and building an interactive scatterplot by the end of the session. We'll use d3.js, the web's most powerful library for data visualization, to load data and translate values into SVG elements — drawing lines, points, and scaled axes to label our data. Join us!

Follow along now

About Scott Murray

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 he teaches workshops on creative coding. 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


This webcast will cover:

  • Intro to D3 as a tool
  • Set up with empty page template
  • Selecting elements
  • Creating elements
  • SVG images and elements
  • Data in JavaScript (arrays)
  • Binding data to create elements
  • Using scales to position elements
  • Using transitions between states
  • Adding axes

Scott's Book:

Interactive Data Visualization for the Web Interactive Data Visualization for the Web
by Scott Murray
March 2013
$29.99 USD