Skip to content

Instantly share code, notes, and snippets.

@cmgerber
Last active September 23, 2015 12:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cmgerber/10015399 to your computer and use it in GitHub Desktop.
Save cmgerber/10015399 to your computer and use it in GitHub Desktop.
D3 Chord Chart of DC Bike Share us in the NE district of Washington DC.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
#circle circle {
fill: none;
pointer-events: all;
}
.group path {
fill-opacity: .5;
}
path.chord {
fill-opacity: .67;
}
#circle:hover path.fade {
display: none;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
#container {
width: 100%;
height: 95%;
}
#chartContainer {
margin: 20px;
position: absolute;
right: 2%;
width: 30%;
height: 95%;
}
#chordContainer {
position: absolute;
left: 5%;
width: 70%;
}
</style>
<body>
<div id="container">
<div id="chartContainer">
</div>
<div id="chordContainer">
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>
<script>
var width = ((document.getElementById("chordContainer").offsetWidth)*.8),
height = ((document.getElementById("chordContainer").offsetWidth)*.8),
outerRadius = Math.min(width, height) / 2 - 150,
innerRadius = outerRadius - 24;
var formatPercent = d3.format(".1%");
var fill = d3.scale.category20c();
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var layout = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.ascending);
var path = d3.svg.chord()
.radius(innerRadius);
var svg = d3.select("#chordContainer").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "circle")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.append("circle")
.attr("r", outerRadius);
d3.csv("ne_stations.csv", function(error, imports) {
var matrix = [],
data = imports;
for(var i=0;i<data.length;i++){
var obj = data[i];
var row = [];
var name = [];
for(var key in obj) {
name.push(key)
row.push(parseFloat(obj[key]));
}
name.shift();
row.shift();
matrix.push(row);
};
console.log('here', matrix);
console.log(name);
// Compute the chord layout.
layout.matrix(matrix);
// Add a group per neighborhood.
var group = svg.selectAll(".group")
.data(layout.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", mouseover);
// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", arc)
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
group.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { console.log(d.index); return name[d.index]; });
// Add the chords.
var chord = svg.selectAll(".chord")
.data(layout.chords)
.enter().append("path")
.attr("class", "chord")
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
.style("fill", function(d) { return fill(d.source.index); })
.attr("d", path);
function mouseover(d, i) {
var cur_name = name[i];
console.log(name[i]);
chord.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
clearBox('chartContainer');
var ssvg = dimple.newSvg("#chartContainer", ((document.getElementById("chartContainer").offsetWidth)*1), ((document.getElementById("chordContainer").offsetWidth)*1));
d3.csv("ne_stations_sub.csv", function(error, subs) {
var sub = subs,
data = [];
for(var i=0;i<sub.length;i++){
var obj = sub[i];
var row = [];
var name = [];
for(var key in obj) {
if(key == cur_name) {
data.push({"Rider Type":obj[""], "Number of Riders":parseFloat(obj[key])});
}
}
};
var myChart = new dimple.chart(ssvg, data);
myChart.setBounds('20%', '30%', '75%', '15%')
myChart.addMeasureAxis("x", "Number of Riders");
var y = myChart.addCategoryAxis("y", "Rider Type");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
console.log(data);
});
}
var ssvg = dimple.newSvg("#chartContainer", ((document.getElementById("chartContainer").offsetWidth)*1), ((document.getElementById("chordContainer").offsetWidth)*1));
d3.csv("ne_stations_sub.csv", function(error, subs) {
var sub = subs,
data = [];
for(var i=0;i<sub.length;i++){
var obj = sub[i];
var row = [];
var name = [];
for(var key in obj) {
if(key == 'Total') {
data.push({"Rider Type":obj[""], "Number of Riders":parseFloat(obj[key])});
}
}
};
var myChart = new dimple.chart(ssvg, data);
myChart.setBounds('20%', '30%', '75%', '15%')
myChart.addMeasureAxis("x", "Number of Riders");
var y = myChart.addCategoryAxis("y", "Rider Type");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
console.log(data);
});
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
}
});
</script>
10th & Monroe St NE 11th & H St NE 12th & Irving St NE 12th & Newton St NE 13th & D St NE 13th & H St NE 15th & East Capitol St NE 15th & F St NE 18th St & Rhode Island Ave NE 1st & M St NE 3rd & H St NE 4th & East Capitol St NE 4th St & Rhode Island Ave NE 6th & H St NE 8th & East Capitol St NE 8th & F St NE Anacostia Ave & Benning Rd NE / River Terrace Benning Rd & East Capitol St NE / Benning Rd Metro Bladensburg Rd & Benning Rd NE D St & Maryland Ave NE Eckington Pl & Q St NE Gallaudet / 8th St & Florida Ave NE Hamlin & 7th St NE John McCormack Dr & Michigan Ave NE Lincoln Park / 13th & East Capitol St NE M St & Delaware Ave NE Neal St & Trinidad Ave NE Rhode Island Ave & V St NE
10th & Monroe St NE 37.0 2.0 125.0 18.0 1.0 2.0 0.0 0.0 6.0 36.0 5.0 3.0 14.0 6.0 7.0 1.0 0.0 0.0 0.0 0.0 9.0 4.0 9.0 12.0 0.0 28.0 2.0 2.0
11th & H St NE 0.0 144.0 0.0 5.0 38.0 35.0 9.0 16.0 0.0 141.0 201.0 51.0 14.0 240.0 49.0 63.0 13.0 1.0 28.0 89.0 9.0 50.0 0.0 1.0 57.0 96.0 9.0 2.0
12th & Irving St NE 149.0 2.0 44.0 35.0 0.0 1.0 0.0 0.0 7.0 24.0 0.0 4.0 4.0 1.0 2.0 0.0 2.0 0.0 0.0 0.0 7.0 1.0 0.0 3.0 0.0 7.0 0.0 2.0
12th & Newton St NE 15.0 2.0 32.0 38.0 1.0 0.0 0.0 0.0 25.0 6.0 2.0 2.0 2.0 3.0 0.0 1.0 0.0 2.0 2.0 1.0 2.0 0.0 2.0 7.0 0.0 8.0 1.0 2.0
13th & D St NE 2.0 42.0 0.0 1.0 157.0 82.0 20.0 21.0 0.0 54.0 53.0 88.0 3.0 84.0 38.0 55.0 7.0 0.0 23.0 119.0 3.0 15.0 0.0 4.0 36.0 27.0 6.0 0.0
13th & H St NE 1.0 23.0 2.0 1.0 104.0 170.0 40.0 27.0 1.0 148.0 165.0 91.0 10.0 296.0 51.0 75.0 11.0 2.0 35.0 116.0 31.0 84.0 2.0 0.0 183.0 197.0 14.0 5.0
15th & East Capitol St NE 0.0 16.0 0.0 1.0 13.0 46.0 105.0 29.0 1.0 8.0 12.0 43.0 2.0 31.0 35.0 14.0 1.0 2.0 19.0 44.0 1.0 7.0 0.0 0.0 25.0 13.0 0.0 0.0
15th & F St NE 0.0 31.0 0.0 0.0 21.0 16.0 49.0 57.0 0.0 16.0 34.0 20.0 0.0 58.0 9.0 49.0 2.0 0.0 19.0 28.0 2.0 10.0 0.0 0.0 30.0 44.0 0.0 0.0
18th St & Rhode Island Ave NE 30.0 1.0 6.0 28.0 0.0 1.0 0.0 0.0 27.0 6.0 0.0 0.0 6.0 0.0 0.0 0.0 1.0 0.0 1.0 0.0 8.0 7.0 1.0 3.0 0.0 2.0 0.0 8.0
1st & M St NE 41.0 87.0 19.0 7.0 22.0 88.0 13.0 7.0 2.0 247.0 61.0 84.0 102.0 89.0 44.0 12.0 1.0 0.0 12.0 19.0 314.0 90.0 6.0 44.0 20.0 60.0 30.0 32.0
3rd & H St NE 4.0 253.0 1.0 1.0 65.0 167.0 11.0 40.0 0.0 76.0 129.0 114.0 10.0 27.0 25.0 132.0 14.0 0.0 31.0 76.0 14.0 73.0 0.0 1.0 89.0 44.0 9.0 0.0
4th & East Capitol St NE 8.0 62.0 2.0 6.0 80.0 70.0 55.0 45.0 3.0 77.0 120.0 263.0 6.0 58.0 88.0 20.0 1.0 0.0 24.0 27.0 17.0 17.0 0.0 2.0 113.0 33.0 7.0 0.0
4th St & Rhode Island Ave NE 9.0 3.0 5.0 7.0 3.0 13.0 0.0 0.0 16.0 141.0 13.0 3.0 50.0 6.0 2.0 2.0 16.0 1.0 5.0 10.0 31.0 9.0 5.0 8.0 0.0 77.0 0.0 49.0
6th & H St NE 1.0 154.0 1.0 13.0 81.0 204.0 20.0 48.0 0.0 87.0 30.0 84.0 7.0 158.0 44.0 47.0 49.0 1.0 78.0 98.0 22.0 31.0 1.0 1.0 106.0 96.0 15.0 5.0
8th & East Capitol St NE 3.0 28.0 0.0 0.0 36.0 31.0 15.0 2.0 1.0 26.0 20.0 58.0 2.0 38.0 109.0 51.0 0.0 0.0 16.0 12.0 3.0 13.0 1.0 0.0 60.0 19.0 1.0 1.0
8th & F St NE 0.0 58.0 0.0 1.0 29.0 46.0 6.0 26.0 0.0 52.0 131.0 32.0 2.0 38.0 43.0 115.0 1.0 0.0 14.0 43.0 1.0 19.0 1.0 3.0 40.0 21.0 2.0 0.0
Anacostia Ave & Benning Rd NE / River Terrace 0.0 12.0 9.0 0.0 5.0 14.0 3.0 2.0 1.0 0.0 7.0 1.0 12.0 61.0 0.0 1.0 98.0 60.0 35.0 1.0 0.0 4.0 0.0 0.0 5.0 9.0 0.0 0.0
Benning Rd & East Capitol St NE / Benning Rd Metro 0.0 0.0 0.0 1.0 2.0 0.0 1.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 62.0 17.0 5.0 1.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 1.0
Bladensburg Rd & Benning Rd NE 0.0 30.0 3.0 3.0 27.0 42.0 16.0 25.0 1.0 19.0 57.0 30.0 4.0 83.0 11.0 22.0 25.0 16.0 83.0 57.0 8.0 32.0 0.0 2.0 46.0 56.0 5.0 1.0
D St & Maryland Ave NE 5.0 57.0 2.0 2.0 92.0 71.0 42.0 21.0 0.0 53.0 101.0 30.0 2.0 71.0 18.0 36.0 0.0 1.0 31.0 166.0 2.0 5.0 0.0 2.0 74.0 16.0 0.0 2.0
Eckington Pl & Q St NE 25.0 9.0 0.0 0.0 1.0 27.0 3.0 0.0 1.0 281.0 5.0 8.0 20.0 26.0 1.0 2.0 0.0 0.0 5.0 2.0 67.0 10.0 2.0 8.0 2.0 41.0 1.0 3.0
Gallaudet / 8th St & Florida Ave NE 22.0 36.0 2.0 1.0 20.0 84.0 7.0 8.0 4.0 108.0 54.0 7.0 11.0 32.0 13.0 29.0 10.0 0.0 19.0 17.0 16.0 104.0 5.0 0.0 14.0 217.0 24.0 1.0
Hamlin & 7th St NE 7.0 3.0 1.0 3.0 0.0 4.0 0.0 0.0 0.0 12.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 1.0 5.0 0.0 7.0 23.0 0.0 5.0 1.0 1.0
John McCormack Dr & Michigan Ave NE 3.0 1.0 0.0 4.0 1.0 0.0 0.0 0.0 0.0 26.0 2.0 0.0 8.0 1.0 0.0 3.0 0.0 0.0 1.0 0.0 4.0 7.0 17.0 45.0 0.0 53.0 2.0 1.0
Lincoln Park / 13th & East Capitol St NE 0.0 53.0 0.0 0.0 45.0 121.0 26.0 34.0 1.0 20.0 39.0 176.0 0.0 55.0 42.0 32.0 5.0 0.0 24.0 47.0 3.0 22.0 2.0 1.0 239.0 15.0 1.0 0.0
M St & Delaware Ave NE 28.0 127.0 6.0 11.0 56.0 196.0 7.0 9.0 4.0 53.0 39.0 63.0 64.0 142.0 17.0 48.0 26.0 0.0 49.0 22.0 60.0 283.0 8.0 42.0 31.0 115.0 143.0 26.0
Neal St & Trinidad Ave NE 1.0 11.0 0.0 1.0 1.0 14.0 1.0 5.0 2.0 85.0 16.0 4.0 0.0 30.0 4.0 6.0 0.0 0.0 6.0 10.0 0.0 16.0 0.0 0.0 6.0 124.0 41.0 1.0
Rhode Island Ave & V St NE 0.0 1.0 1.0 3.0 0.0 2.0 1.0 0.0 8.0 18.0 0.0 1.0 8.0 1.0 0.0 0.0 0.0 0.0 0.0 1.0 4.0 1.0 0.0 0.0 0.0 7.0 0.0 32.0
Total 10th & Monroe St NE 11th & H St NE 12th & Irving St NE 12th & Newton St NE 13th & D St NE 13th & H St NE 15th & East Capitol St NE 15th & F St NE 18th St & Rhode Island Ave NE 1st & M St NE 3rd & H St NE 4th & East Capitol St NE 4th St & Rhode Island Ave NE 6th & H St NE 8th & East Capitol St NE 8th & F St NE Anacostia Ave & Benning Rd NE / River Terrace Benning Rd & East Capitol St NE / Benning Rd Metro Bladensburg Rd & Benning Rd NE D St & Maryland Ave NE Eckington Pl & Q St NE Gallaudet / 8th St & Florida Ave NE Hamlin & 7th St NE John McCormack Dr & Michigan Ave NE Lincoln Park / 13th & East Capitol St NE M St & Delaware Ave NE Neal St & Trinidad Ave NE Rhode Island Ave & V St NE
Subscriber 14125 367 1161 248 157 821 1391 388 390 92 1590 1169 1030 323 1515 590 750 306 90 481 900 577 790 55 183 1014 1299 276 156
Casual 3451 24 87 13 34 80 156 62 32 19 230 127 230 40 120 62 66 39 13 84 107 66 124 14 29 162 131 38 21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment