Skip to content

Instantly share code, notes, and snippets.

@hepplerj

hepplerj/data.json

Last active August 29, 2015 14:21
Show Gist options
  • Save hepplerj/89ad1020c099f5bcf2b6 to your computer and use it in GitHub Desktop.
Save hepplerj/89ad1020c099f5bcf2b6 to your computer and use it in GitHub Desktop.
Download ZIP
Arc Diagram
Raw
data.json
{
"nodes":[
{
"name": "Julie",
"gender": "female"
},
{
"name": "Matt",
"gender": "male"
},
{
"name": "Mark",
"gender": "male"
},
{
"name": "John",
"gender": "male"
},
{
"name": "Alice",
"gender": "female"
},
{
"name": "Lincoln",
"gender": "male"
},
{
"name": "Elijah",
"gender": "male"
},
{
"name": "Grace",
"gender": "female"
},
{
"name": "Jon",
"gender": "male"
},
{
"name": "Luke",
"gender": "male"
},
{
"name": "Judy",
"gender": "female"
},
{
"name": "Rebecca",
"gender": "female"
},
{
"name": "Nicole",
"gender": "female"
},
{
"name": "Paul",
"gender": "male"
},
{
"name": "Matthew",
"gender": "male"
},
{
"name": "Norm",
"gender": "male"
},
{
"name": "Peter",
"gender": "male"
},
{
"name": "Megan",
"gender": "female"
},
{
"name": "Hannah",
"gender": "female"
},
{
"name": "Steve",
"gender": "male"
}
],
"links":[
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 1
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 2
},
{
"source": 2,
"target": 3
},
{
"source": 3,
"target": 4
},
{
"source": 3,
"target": 4
},
{
"source": 3,
"target": 4
},
{
"source": 3,
"target": 4
},
{
"source": 3,
"target": 4
},
{
"source": 3,
"target": 4
},
{
"source": 4,
"target": 5
},
{
"source": 4,
"target": 6
},
{
"source": 4,
"target": 6
},
{
"source": 4,
"target": 5
},
{
"source": 4,
"target": 5
},
{
"source": 4,
"target": 5
},
{
"source": 5,
"target": 6
},
{
"source": 5,
"target": 6
},
{
"source": 5,
"target": 6
},
{
"source": 6,
"target": 7
},
{
"source": 6,
"target": 7
},
{
"source": 6,
"target": 7
},
{
"source": 6,
"target": 7
},
{
"source": 6,
"target": 7
},
{
"source": 6,
"target": 7
},
{
"source": 7,
"target": 12
},
{
"source": 7,
"target": 12
},
{
"source": 7,
"target": 12
},
{
"source": 7,
"target": 12
},
{
"source": 7,
"target": 12
},
{
"source": 7,
"target": 8
},
{
"source": 8,
"target": 9
},
{
"source": 9,
"target": 10
},
{
"source": 10,
"target": 11
},
{
"source": 11,
"target": 12
},
{
"source": 12,
"target": 13
},
{
"source": 12,
"target": 13
},
{
"source": 12,
"target": 13
},
{
"source": 12,
"target": 13
},
{
"source": 12,
"target": 13
},
{
"source": 12,
"target": 13
},
{
"source": 13,
"target": 14
},
{
"source": 14,
"target": 15
},
{
"source": 15,
"target": 16
},
{
"source": 16,
"target": 17
},
{
"source": 13,
"target": 17
},
{
"source": 13,
"target": 17
},
{
"source": 13,
"target": 17
},
{
"source": 13,
"target": 17
},
{
"source": 13,
"target": 17
},
{
"source": 17,
"target": 18
},
{
"source": 17,
"target": 18
},
{
"source": 17,
"target": 18
},
{
"source": 17,
"target": 18
},
{
"source": 17,
"target": 18
},
{
"source": 17,
"target": 18
},
{
"source": 18,
"target": 19
},
{
"source": 18,
"target": 19
},
{
"source": 18,
"target": 19
},
{
"source": 18,
"target": 19
},
{
"source": 18,
"target": 19
}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
fill: none;
stroke: #888888;
stroke-weight: 1px;
stroke-opacity: 0.5;
}
.node {
fill: #fff;
stroke: steelblue;
stroke-width: 2.5px;
font: 10px sans-serif;
}
.node text {
color: #333;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="visualization.js"></script>
<div id="chart"></div>
<script>
d3.json("data.json", arcDiagram);
</script>
Raw
visualization.js
var width = 1000,
height = 500,
margin = 20,
pad = margin / 2,
radius = 6,
yfixed = pad + radius;
var color = d3.scale.category10();
// Main
//-----------------------------------------------------
function arcDiagram(graph) {
var radius = d3.scale.sqrt()
.domain([0, 20])
.range([0, 15]);
var svg = d3.select("#chart").append("svg")
.attr("id", "arc")
.attr("width", width)
.attr("height", height);
// create plot within svg
var plot = svg.append("g")
.attr("id", "plot")
.attr("transform", "translate(" + pad + ", " + pad + ")");
// fix graph links to map to objects
graph.links.forEach(function(d,i) {
d.source = isNaN(d.source) ? d.source : graph.nodes[d.source];
d.target = isNaN(d.target) ? d.target : graph.nodes[d.target];
});
linearLayout(graph.nodes);
drawLinks(graph.links);
drawNodes(graph.nodes);
}
// layout nodes linearly
function linearLayout(nodes) {
nodes.sort(function(a,b) {
return a.uniq - b.uniq;
})
var xscale = d3.scale.linear()
.domain([0, nodes.length - 1])
.range([radius, width - margin - radius]);
nodes.forEach(function(d, i) {
d.x = xscale(i);
d.y = yfixed;
});
}
function drawNodes(nodes) {
var gnodes = d3.select("#plot").selectAll("g.node")
.data(nodes)
.enter().append('g');
var nodes = gnodes.append("circle")
.attr("class", "node")
.attr("id", function(d, i) { return d.name; })
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; })
.attr("r", 5)
.style("stroke", function(d, i) { return color(d.gender); });
nodes.append("text")
.attr("dx", function(d) { return 20; })
.attr("cy", ".35em")
.text(function(d) { return d.name; })
}
function drawLinks(links) {
var radians = d3.scale.linear()
.range([Math.PI / 2, 3 * Math.PI / 2]);
var arc = d3.svg.line.radial()
.interpolate("basis")
.tension(0)
.angle(function(d) { return radians(d); });
d3.select("#plot").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("transform", function(d,i) {
var xshift = d.source.x + (d.target.x - d.source.x) / 2;
var yshift = yfixed;
return "translate(" + xshift + ", " + yshift + ")";
})
.attr("d", function(d,i) {
var xdist = Math.abs(d.source.x - d.target.x);
arc.radius(xdist / 2);
var points = d3.range(0, Math.ceil(xdist / 3));
radians.domain([0, points.length - 1]);
return arc(points);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment