From Scattered to Scatterplot

Scott Murray

@alignedleft

alignedleft.com

Before we begin

Two ways to follow along!

  1. View the presentation and tryout the examples online: bit.ly/1hiMI9J
  2. Download the examples to your machine from GitHub, and view them locally in a browser: bit.ly/KxyruM

From Scattered to Scatterplot in 2 Hours

An Introduction to d3.js

Alt Text
Alt Text

Curriculum

  • 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 transitions between states
  • Using scales to position elements
  • Adding axes

Let’s go!

 

Assumptions

  • You are somewhat familiar with HTML & CSS
  • You have a little programming experience
  • You can view the code examples, either:

What is d3.js?

 

d3js.org

Alt Text

Example

<!DOCTYPE html><html lang="en">
<head> 
<meta charset="utf-8"> 
<title>D3: Empty page template</title>
<script type="text/javascript" src="d3.v3.js"></script>
</head>
<body> 
<script type="text/javascript">
// Your beautiful D3 code // can go here
</script>
</body>
</html>

These Are Web Standards

HTML:

Hypertext Markup Language

CSS:

Cascading Style Sheets

JS:

JavaScript

SVG:

Scalable Vector Graphics

DOM:

The Document Object Model

Learning D3 is a process of “learning the web”

HTML:

Hypertext Markup Language

CSS:

Cascading Style Sheets

JS:

JavaScript

SVG:

Scalable Vector Graphics

DOM:

The Document Object Model

Setting Up

 

Selecting & generating elements

 

Exercise

Alt Text Create the website on the right by typing D3 code into the console below.

D3: Empty page template

SVG

 

Exercise

Alt Text Recreate the image on the right by typing D3 code into the console below.

D3: Empty page template

Binding data / data joins

 

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select("svg").selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select("svg").selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select("svg").selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select("svg").selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select("svg").selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select("svg").selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

Setting attributes from data!

d3.selectAll(circle)
  .attr(r, function(d) {
     return d;
  });

Binding data to elements

  1. Lets you reference values later
  2. Prevents need to “redraw” elements

Exercise

Starting with the next slide (06_circles.html), add a color value to each object in the data set.

Then use that value to set the fill of each circle.

Exercise: 06_circles.html

In the code editor below, add a color value to each object in the data set.

D3: Data-driven circles

Transitions

Transitions and Motion

Scales

Scale values

var scale = d3.scale.linear()
                    .domain([200, 1000])
                    .range([0, 500]);

scale(600);  // Returns 250

Axes

Generate Axes

var axis = d3.svg.axis()
                 .scale(scale);
svg.append("g")   .call(axis);

What else can D3 do for me?

Layouts

Mapping and projections

d3js.org

Scott Murray

@alignedleft

alignedleft.com