Last active
September 23, 2015 12:17
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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