Introduction to D3.js

Instructor: Chan Chi-Loong, V/R

Workshop Outline

Data visualizations: context
Data viz: approaches
Why D3?
D3.js (code time)
Foundations: JSON structures and SVG
Putting everything together
Q&A

You can follow this presentation at:

decks.vslashr.com/nusd3

Data visualizations: context

Data visualization

A powerful tool for storytelling.

You see them in the New York Times, Washington Post, Straits Times.

Data storytelling

Even our prime minister talked about it in his recent August 21st 2016 National Day Rally speech.

Data + UX

Data, which often contains hidden insights.

UX, which is the interactive interface through which we experience stories.

What is data visualization?

It is taking the data and presenting it in an accessible format for storytelling

Example 1: Dengue data

Example 2: Population demographics

What makes a good visualization?

Seperation of the data from the presentation.
Not just a data dump, but curated with context within a story.
Updated automatically if possible with real-time data (via APIs).
Don't overdesign what is necessary to tell a good story.

Data viz approaches

Data scientist

...Also known as the unicorn

Visualization in data science

Approaches to doing data visualization

For exploratory analysis use Excel.
Buy an enterprise software tool like Tableu, Qlik, PowerBI or Spotfire
Use a cloud-based tool like Infogram, Piktochart, cartoDB, etc.
For data science use R or Python. Ggplot2 and shiny for R, etc.
Use a charting library like Highcharts, Morris charts, etc.
Or build your own custom charts for web frontend using D3.js.

Why D3?

Because you're a front-end engineer and want to build beautiful things.

You're willing to spend the time to get exactly the results you want.

Otherwise use free libraries or libraries built on top of D3 like NVD3 or C3.

Data roles: Recap

Example: Storytelling

Example: UI work

Example: Dashboards

D3.js (code time)

Data-driven documents

Setup

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style>
    p {
        color: red;
    }
    </style>
</head>
<body>

    <p>Hello World!</p>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

    var data = [10, 20, 30];
    console.log(data);
    
</script>
</body>
</html>

DOM selection

d3.select("body").append("p").text("Hello World 2!");

If you're familiar with JQuery, the syntax styling is somewhat similar.

Methods can be chained!

DOM selection and insertion 2

<div id="hellos">
    <p>Hello World!</p>
    <p>Hello World 2!</p>
    <p>Hello World 3!</p>
</div>

Select vs selectAll

d3.select("#hellos p").style("color", "green");

d3.selectAll("#hellos p").style("color", "green");

Simple data binding

var hellos = d3.select("#hellos");

hellos.selectAll("p")
.data(data)
.enter()
.append("p")
.text("Hello World");

Anonymous functions are simply shorthand ways to write simpler code

.text(function(d, i) { console.log(d, i); return "Hello World " + d})

.style("font-size", function(d) { return d + "px"; });

Transitions and animations

hellos.selectAll("p")
.data(data)
.enter()
.append("p")
.text("Hello World")
.transition()
.duration(function(d,i) {return i * 1000;})
.style("color", "green")
.style("font-size", function(d) { return d + "px"; });

Transitions provide the bling!

JSON and SVG

Foundations

JSON structure

var data = [
    {student: "Alfred", score: 65},
    {student: "Bernard", score: 35},
    {student: "Christine", score: 75}
];

Know how to access JSON key-value pair

Web APIs

Data.gov.sg: Births and Fertility, Annual

Actual: JSON data

SVG format

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.svgRect {
    stroke-width: 2px;
    stroke: #555;
    fill: #f00;
}
.svgCircle {
    stroke-width: 3px;
    stroke: #00f;
    fill: none;
}
</style>
</head>
<body>

<svg width="400" height="400">
  <rect x="50" y="50" width="300" height="100" class="svgRect" />
  <circle cx="200" cy="200" r="50" class="svgCircle" />
  <path d="M100,200 L100,300 L150,250 Z" stroke="#f00" fill="#000" />
</svg>

</body>
</html>

Putting everything together

Basic D3 bar chart

Bl.ocks.org: Simple D3 bar chart

https://bl.ocks.org/chi-loong/c36e1cf66502faa45f8dd8102a5c5531

D3 bar chart 2

Transitions. Enter, update and exit design pattern

Bl.ocks.org: D3 bar chart part 2

https://bl.ocks.org/Chi-Loong/e3389dfb6873c85caf445f0faba52ec4

Animations

D3 can be used for more than visualizations.

Moiré Circles

Moiré Spikes

D3 circles

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.svgCircle {
    stroke-width: 3px;
    stroke: #00f;
    fill: none;
}
</style>
</head>
<body>
<svg width="400" height="400"></svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script>
for(var i=0; i < 10; i++) {
    d3.select("svg")
    .append("circle")
    .attr("cx", 200)
    .attr("cy", 200)
    .attr("r", i * 10)
    .attr("class", "svgCircle");
}
</script>
</body>
</html>

D3 circles + data binding

var data = [10, 30, 70, 90];
var svg = d3.select("svg");

svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", function(d){return d})
.attr("class", "svgCircle");

D3 circles + data animation

var tl = new TimelineMax();
tl.staggerTo(".svgCircle", 3, {x: 150}, 0.2, 0);

var tl = new TimelineMax();
tl.staggerTo(".svgCircle", 3, {x: 150}, 0.2, 0);