Hands-on Data Visualization with D3.js: Animation (Extra)

Extra: (Comical) Animation

These are the materials for my workshop on creating interactive data visualizations with D3!

And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex

Throughout this workshop, you will learn how to make this interactive parallel coordinate plot of environmental conditions related to incidences of Asthma in SF.

Exercises

Part 1: simple static chart with mutiple y-axes and a single line plotted.
Part 2: complete parallel cordinates chart with brushing and background/foreground lines.
Part 3: full featured example with this data using the parallel-coordinates library.
Extra (you are here 👇): animate all the things!

The Data

The data is from the city of SF about certain environmental and health conditions of given Census tracts in the City. You can read more about the individual fields from the data dictionary.

This comprehensive dataset was used to inform and calculate the Heat Vulnerability Index for our Climate and Health Program. The dataset includes satellite imagery from NASA, temperature data from NOAA and other data sets such as individual physiology, culture, local infrastructure, behavior, and social and demographic characteristics which influence the risk of heat-related health impacts.

There 21 fields in the file (comma separated with headers) but we will be focusing on the following 8 fields:

	AsthmaRates	AirQuality	SurfaceTemperature0908	NonWhite	Income	NoHighSchoolDegree	PopulationDensity	TreeDensity
0	6.299994	2.2	322	0.230650	93777	0.013605	1985.746482	1185
1	6.276086	2.2	316	0.398085	73540	0.130243	27208.307880	6133
2	5.700004	2.1	313	0.124894	171257	0.024085	7245.100198	2989
3	5.699994	2.2	314	0.104333	187377	0.014402	41077.512777	5047
4	5.699984	2.2	312	0.175050	117254	0.040223	21792.728792	3155
...	...	...	...	...	...	...	...	...

Github repo: https://github.com/Jay-Oh-eN/hands-on-d3

Archival event link: http://www.eventbrite.com/e/hands-on-data-visualization-with-d3js-tickets-14705972961

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 150, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

//var y = d3.scale.linear()
//    .range([height, 0]);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
    
  var scales = {};
  var d_keys = d3.keys(data[0]).slice();  
  
  d_keys.forEach(function(key) {
      scales[key] = d3.scale.linear()
        .range([height, 0])
        .domain(d3.extent(data, function(d) { return +d[key]; }));
  });
  
  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yScale = d3.scale.linear()
    .range([height, 0])
    .domain([0, 1.]);
    
  var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10, "%");
    
  x.domain(d_keys);
  //y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(90)")
        .style("text-anchor", "start");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Relative Magnitude");

function type(d) {
  d.frequency = +d.frequency;
  return d;
}

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js