Josh Carr joshcarr

From Building Responsive Visualizations with D3.js

Summary

Line simplification of the CTA train routes. Different line interpolations and simplification levels create interesting designs.

I created this because I like line simplification, d3.js, the CTA train map, and abstract geometric shapes.

extract_gtfs.rb

This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.scale.linear - x- and y-position encoding
d3.scale.ordinal - color encoding
d3.extent - compute domains
d3.svg.axis - display axes

This brush snaps to day boundaries. When the user releases the brush, the brush fires a brushend event, allowing a listener to adjust the brush extent. Using the new brush transitions released in D3 3.3, the brush smoothly interpolates from the original extent to the rounded extent. Compare this approach to using immediate snapping while brushing.

Computing hexbins from a constantly-fluctuating sample of 2,000 random points.

Fine-grained control of randomly entering and exiting things in D3.js, for impeccable object constancy. Adapted from an example co-authored with Mike Bostock.

After the Irish Famine

This is a simple visualization of population change in Ireland during the [Great Famine][] era. It uses continuous area cartograms and population estimates from 1841 to 2001 to demonstrate change. The cool thing about this visualization is how dramatically it emphasizes population loss from 1841 to 1851 (and beyond), and how, even in modern Ireland, many counties remain well below their pre-famine population levels. As a whole, the population of Ireland remains less than 70% of its pre-famine levels!

A popover gives you additional information on mouse over. This includes county name, total population for the give year, and a nice little [sparkline][] showing population change over time (with the current year highlighted for reference). This gives a nice quick feel for the population change over time, and was pretty easy to do using D3js and Twitter Bootstrap.

This visualization uses [D3js][], [colorbrewer][], Twitter's [Bootstrap][], [jQuery][], and some helpful examples from [here


	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>

	svg {
	font: 10px sans-serif;
	}

	<!doctype html>
	<meta charset="utf-8">
	<html>
	<head>
	<style type="text/css">
	#canvas {
	width: 800px;
	height: 400px;
	border: 1px solid #666;
	}

	[
	[103,104,104,105,105,106,106,106,107,107,106,106,105,105,104,104,104,104,105,107,107,106,105,105,107,108,109,110,110,110,110,110,110,109,109,109,109,109,109,108,107,107,107,107,106,106,105,104,104,104,104,104,104,104,103,103,103,103,102,102,101,101,100,100,100,100,100,99,98,97,97,96,96,96,96,96,96,96,95,95,95,94,94,94,94,94,94],
	[104,104,105,105,106,106,107,107,107,107,107,107,107,106,106,106,106,106,106,108,108,108,106,106,108,109,110,110,112,112,113,112,111,110,110,110,110,109,109,109,108,107,107,107,107,106,106,105,104,104,104,104,104,104,104,103,103,103,103,102,102,101,101,100,100,100,100,99,99,98,97,97,96,96,96,96,96,96,96,95,95,95,94,94,94,94,94],
	[104,105,105,106,106,107,107,108,108,108,108,108,108,108,108,108,108,108,108,108,110,110,110,110,110,110,110,111,113,115,116,115,113,112,110,110,110,110,110,110,109,108,108,108,108,107,106,105,105,105,105,105,105,104,104,104,104,103,103,103,102,102,102,101,100,100,100,99,99,98,97,97,96,96,96,96,96,96,96,96,95,95,94,94,94,94,94],
	[105,105,106,106,107,107,108,