Skip to content

Instantly share code, notes, and snippets.

@msbarry

msbarry/data.json

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msbarry/8902447 to your computer and use it in GitHub Desktop.
Save msbarry/8902447 to your computer and use it in GitHub Desktop.
Download ZIP
Ordinal Visual Variables
Raw
data.json
[
[
null,
null,
null,
null,
null,
null,
null,
null,
2926227,
6454165,
7578812,
7638673,
7882552,
7925935,
8187860,
8094409,
8188490,
8445485,
7988579,
7874513,
7886906,
7327543,
6750228,
5618407
],
[
4258141,
1286538,
959070,
1103455,
2835693,
9300012,
16015463,
18007204,
16363958,
14320542,
11635910,
10311999,
10380421,
10496654,
12009512,
14441411,
17603176,
18427782,
15382383,
12399950,
10926121,
10003019,
8970290,
6576132
],
[
4603238,
1185165,
873357,
991390,
2745311,
9275615,
15941478,
17916000,
16415076,
14677536,
12128786,
10431640,
10242854,
10434696,
11888943,
14152850,
17746632,
18624069,
15216213,
12196184,
10930847,
9873388,
6675310,
6633507
],
[
4996389,
1640280,
1102109,
1300569,
3103241,
9596750,
16061438,
19061596,
18278173,
17026280,
14668762,
13503247,
13482396,
12863555,
14157012,
16063739,
19360667,
20261595,
16708469,
13273488,
12249264,
10982827,
9868913,
6988488
],
[
4759578,
1230820,
583460,
734785,
2535853,
8908633,
16016983,
18375988,
16979759,
14986737,
12232439,
10633203,
10317332,
10431717,
11951063,
14207154,
17502827,
18660620,
15482129,
12826136,
11474074,
9845350,
8627316,
6331347
],
[
4614987,
1497775,
850398,
1032559,
2812303,
9154960,
16170976,
18246757,
16588176,
14937585,
12687703,
10902932,
10574644,
10820728,
12263064,
14708109,
18139394,
19552585,
16540352,
13682347,
12079234,
10443238,
10088575,
7269115
],
[
4889732,
2055929,
1028713,
1009177,
1057683,
3838685,
7376512,
7778906,
8080936,
7866649,
8330871,
8168677,
8591645,
8622000,
8895275,
8376945,
8633294,
8937954,
8293850,
7999600,
8069970,
7952551,
7421947,
5968309
],
[
4103289,
1700013,
1044697,
1082052,
1032246,
526553
]
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect.outline {
shape-rendering: crispEdges;
stroke: #ccc;
fill: none;
}
text {
font: 12px sans-serif;
}
body {
text-align: center;
width: 960px;
margin: 0 auto;
}
.notes {
font: 12px sans-serif;
color: gray;
margin-right: 100px;
}
</style>
<body>
<div id="container"></div>
<div class="notes">
Amount of realtime train data produced by the MBTA per hour over one week as collected for
CS525D data visualization project. The left chart uses shading and the right chart uses size
to encode ordinal visual variables as described on page 147 in Interactive Data Visualization
by Ward, Grinstein, and Keim.
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set up the canvases
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = 960 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom,
halfWidth = width / 2 - margin.left - margin.right;
var svg = d3.select("#container").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 + ")");
var left = svg.append("g")
.attr('class', 'shell');
var right = svg.append("g")
.attr('class', 'shell')
.attr("transform", "translate(" + (width / 2) + ", 0)");
var shells = d3.selectAll('.shell');
// read in the data
d3.json('data.json', function (days) {
// setup the shading/circle generators
var scale = d3.scale.ordinal()
.rangeRoundBands([0, halfWidth], 0, 0)
.domain(d3.range(0, 24));
var circleRadius = d3.scale.linear()
.domain([0, d3.max(days, function (hours) { return d3.max(hours); })])
.range([0, scale.rangeBand() / 2]);
function drawCircle(selection) {
selection.append('circle')
.attr('cx', scale.rangeBand() / 2)
.attr('cy', scale.rangeBand() / 2)
.attr('r', circleRadius);
}
var color = d3.scale.linear()
.domain([0, d3.max(days, function (hours) { return d3.max(hours); })])
.range(['white', 'black']);
function drawShadedRect(selection) {
selection.append('rect')
.attr('width', scale.rangeBand())
.attr('height', scale.rangeBand())
.attr('fill', color);
}
// position each box
var days = shells.selectAll(".day")
.data(days)
.enter().append("g")
.attr("class", "day")
.attr("transform", function (d, i) {
return "translate(0," + scale(i) + ")";
});
var hours = days.selectAll('.hour')
.data(function (d) { return d; })
.enter().append('g')
.attr("class", "hour")
.attr("transform", function (d, i) {
return "translate(" + scale(i) + ",0)";
});
// add labels
days.append('text')
.text(function (d, i) { return 'day ' + i; })
.attr('text-anchor', 'end')
.attr('dx', -5)
.attr('dy', scale.rangeBand());
shells.selectAll('.hourlabel')
.data(d3.range(0, 24))
.enter()
.append('text')
.attr('x', function (d) { return scale(d) + scale.rangeBand() / 2; })
.attr('dy', -5)
.attr('text-anchor', 'middle')
.text(function (d) {
if (d === 0) return '12a';
else if (d === 6) return '6a';
else if (d === 12) return '12p';
else if (d === 18) return '6p';
else return '';
})
// draw the circles/squares
left.selectAll('.hour').call(drawShadedRect);
right.selectAll('.hour').call(drawCircle);
// add an outline to each box with data
function drawOutline(selection) {
selection.append('rect')
.attr("class", "outline")
.attr("width", scale.rangeBand())
.attr("height", scale.rangeBand());
}
hours.filter(function (d) { return d; }).call(drawOutline);
// and finally, add legends
var megabyte = 1024 * 1024;
var legends = shells.selectAll('.legend')
.data([
{ bytes: 1 * megabyte, label: '1MB'},
{ bytes: 5 * megabyte, label: '5MB'},
{ bytes: 10 * megabyte, label: '10MB'},
{ bytes: 15 * megabyte, label: '15MB'}
])
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function (d, i) {
return 'translate(' + (50 + i * 70) + ',' + (160) + ')';
});
legends.append('text')
.text(function (d) { return d.label })
.attr('dx', scale.rangeBand() + 5)
.attr('dy', scale.rangeBand() - 3);
legends.append('g').datum(function (d) { return d.bytes }).attr('class', 'legend-rect');
left.selectAll('.legend-rect').call(drawShadedRect);
right.selectAll('.legend-rect').call(drawCircle);
d3.selectAll('.legend-rect').call(drawOutline);
// fix bl.ocks.org height
d3.select(self.frameElement).style("height", "300px");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment