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

Assumptions

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

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>

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

SVG

D3: SVG
← →