Skip to content

Instantly share code, notes, and snippets.

@AndrewRP

AndrewRP/chord.sample

Last active September 6, 2017 09:06
Show Gist options
  • Save AndrewRP/7468330 to your computer and use it in GitHub Desktop.
Save AndrewRP/7468330 to your computer and use it in GitHub Desktop.
Download ZIP
Andrew's Chord Example
Raw
chord.sample
This is a sample file
http://d3js.org/
http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer.html
http://bl.ocks.org/AndrewRP/raw/7468330/
http://bl.ocks.org/AndrewRP/7468330
https://gist.github.com/mbostock/1046712
http://bl.ocks.org/mbostock/1046712
https://github.com/mbostock/d3/wiki/Gallery
http://bl.ocks.org/mbostock
http://bl.ocks.org/mbostock/4062006
https://github.com/mbostock/d3
https://github.com/mbostock?tab=repositories
http://bl.ocks.org/mbostock/1308257
https://github.com/mbostock/d3
https://github.com/mbostock/d3/wiki/API-Reference
https://github.com/mbostock/d3/wiki/Chord-Layout
https://github.com/d3
http://soundsuggest.wordpress.com/2012/12/26/d3-js-javascript-library-chord-diagram-example/
http://strongriley.github.io/d3/ex/chord.html
http://christopheviau.com/d3list/
http://gabrielflor.it/
http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.html
http://www.javainc.com/projects/dex/guide/palette/visualization/
http://macwright.org/
http://bost.ocks.org/mike/chart/
http://www.amazon.com/Grammar-Graphics-Statistics-Computing/dp/0387245448
http://www.jasondavies.com/
http://bost.ocks.org/mike/
http://alignedleft.com/tutorials/
http://macwright.org/enable-web-developer-extensions/#firefox
http://eloquentjavascript.net/
https://developer.mozilla.org/en-US/
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Andrew's Test</title>
<style>
@import url(style.css);
#circle circle {
fill: none;
pointer-events: all;
}
.group path {
fill-opacity: .5;
}
path.chord {
stroke: #000;
stroke-width: .25px;
}
#circle:hover path.fade {
display: none;
}
</style>
<header>
<aside>November 14th, 2013</aside>
<p>Modified from Mike Bostock's <a href="http://bost.ocks.org/mike/uberdata/">Uber Rides by Neighborhood</a></p>
<p>Modified from eleyine's <a href="http://bl.ocks.org/eleyine/raw/6846156/">Visa requirements in Arab countries</a></p>
</header>
<h1>Andrew's Test</h1>
<aside>Mouseover to focus on travel to and from a particular city.</aside>
<p>Built with <a href="http://d3js.org/">d3.js</a>.</aside>
<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<script>
var width = 720,
height = 720,
outerRadius = Math.min(width, height) / 2 - 10,
innerRadius = outerRadius - 24;
var formatPercent = d3.format(".1%");
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("body").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("teams.csv", function(cities) {
d3.json("matrix.json", function(matrix) {
// 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 a mouseover title.
// group.append("title").text(function(d, i) {
// return cities[i].name + ": " + formatPercent(d.value) + " of origins";
// });
// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", arc)
.style("fill", function(d, i) { return cities[i].color; });
// Add a text label.
var groupText = group.append("text")
.attr("x", 6)
.attr("dy", 15);
groupText.append("textPath")
.attr("xlink:href", function(d, i) { return "#group" + i; })
.text(function(d, i) { return cities[i].name; });
// Remove the labels that don't fit. :(
groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
.remove();
// Add the chords.
var chord = svg.selectAll(".chord")
.data(layout.chords)
.enter().append("path")
.attr("class", "chord")
.style("fill", function(d) { return cities[d.source.index].color; })
.attr("d", path);
// Add an elaborate mouseover title for each chord.
chord.append("title").text(function(d) {
return cities[d.source.index].name
+ " → " + cities[d.target.index].name
+ ": " + formatPercent(d.source.value)
+ "\n" + cities[d.target.index].name
+ " → " + cities[d.source.index].name
+ ": " + formatPercent(d.target.value);
});
function mouseover(d, i) {
chord.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
});
});
</script>
<footer>
<aside>November 14th, 2013</aside>
<p>Modified from Mike Bostock's <a href="http://bost.ocks.org/mike/uberdata/">Uber Rides by Neighborhood</a></p>
<p>Modified from eleyine's <a href="http://bl.ocks.org/eleyine/raw/6846156/">Visa requirements in Arab countries</a></p>
</footer>
Raw
matrix.json
[
[2,0,0,1,0,0,1,0,1,1,0,1,0,1,1,1,0,1,0,0],
[0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0],
[0,0,0,0,0,0,6,0,0,0,0,0,0,0,0,1,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,0,1,0,0,4,0,0,1,0,1,0,1,1,1,0,1,0,0],
[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1,1,0],
[0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0],
[0,0,2,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0],
[1,0,0,1,0,0,1,0,1,1,0,9,0,0,1,1,0,1,1,0],
[1,0,0,1,0,0,1,0,1,1,0,1,0,1,0,1,0,1,1,0],
[1,0,0,1,0,0,1,0,1,1,0,1,0,7,1,0,0,1,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0],
[0,0,1,1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0],
[0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,0,0],
[0,0,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0]
]
Raw
style.css
/* From http://bost.ocks.org/mike/style.css?20120427 */
@import url(http://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
html {
min-width: 1040px;
}
body {
background: #fcfcfa;
color: #333;
font-family: "PT Serif", serif;
margin: 1em auto 4em auto;
position: relative;
width: 960px;
}
header,
footer,
h1,
h2,
h3,
h4,
aside {
color: #000;
font-family: "PT Sans", sans-serif;
}
h1 {
font-size: 64px;
font-weight: 300;
letter-spacing: -2px;
margin: .3em 0 .1em 0;
}
h2 {
margin-top: 2em;
}
h1, h2 {
text-rendering: optimizeLegibility;
}
h2 a {
color: #ccc;
left: -20px;
position: absolute;
width: 740px;
}
footer {
font-size: small;
margin-top: 8em;
}
header aside {
margin-top: 88px;
}
header aside,
footer aside {
color: #636363;
text-align: right;
}
aside {
font-size: small;
right: 0;
position: absolute;
width: 180px;
}
.attribution {
font-size: small;
margin-bottom: 2em;
}
body > p, li > p {
line-height: 1.5em;
}
body > p {
width: 720px;
}
body > blockquote {
width: 640px;
}
blockquote q {
display: block;
font-style: oblique;
}
li {
width: 680px;
}
a {
color: steelblue;
}
a:not(:hover) {
text-decoration: none;
}
pre, code, textarea {
font-family: "Menlo", monospace;
}
code {
line-height: 1em;
}
textarea {
font-size: 100%;
}
body > pre {
border-left: solid 2px #ccc;
padding-left: 18px;
margin: 2em 0 2em -20px;
}
.html .value,
.javascript .string,
.javascript .regexp {
color: #756bb1;
}
.html .tag,
.css .tag,
.javascript .keyword {
color: #3182bd;
}
.comment {
color: #636363;
}
.html .doctype,
.javascript .number {
color: #31a354;
}
.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
color: #e6550d;
}
svg {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
sup, sub {
line-height: 0;
}
q:before {
content: "“";
}
q:after {
content: "”";
}
blockquote:before {
position: absolute;
left: 2em;
}
blockquote:after {
position: absolute;
}
Raw
teams.csv
name color
Baltimore #9ACD32
Phoenix #377DB8
Boston #F5DEB3
Atlanta #EE82EE
Chicago #40E0D0
Cleveland #FF6347
Detroit #D8BFD8
Denver #D2B48C
Houston #4682B4
Los Angeles #00FF7F
Kansas City #FFFAFA
Miami #708090
New York #708090
Philadelphia #6A5ACD
Oakland #87CEEB
Pittsburgh #A0522D
Seattle #FFF5EE
San Diego #2E8B57
Tampa Bay #F4A460
Washington DC #FA8072
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment