Skip to content

Instantly share code, notes, and snippets.

@koaning

koaning/index.html

Created January 31, 2013 15:49
Show Gist options
  • Save koaning/4683850 to your computer and use it in GitHub Desktop.
Save koaning/4683850 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 800,
height = 400;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("risk_final.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll("line.link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll("circle.node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 4)
.style("fill", function(d) { switch (d.group){
case "Australia":
return "purple"
break;
case "Afrika":
return "brown"
break;
case "TheEast":
return "green"
break;
case "EUR":
return "blue"
break;
case "NA":
return "yellow"
break;
case "SA":
return "red"
break;
}})
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
Raw
risk_final.json
{
"nodes": [{
"name": "WesternAustralia",
"group": "Australia"
}, {
"name": "NewGuinea",
"group": "Australia"
}, {
"name": "EasternAustralia",
"group": "Australia"
}, {
"name": "Indonesia",
"group": "Australia"
}, {
"name": "Siam",
"group": "TheEast"
}, {
"name": "Jakutsk",
"group": "TheEast"
}, {
"name": "Kamtchatska",
"group": "TheEast"
}, {
"name": "Irkutsk",
"group": "TheEast"
}, {
"name": "Siberia",
"group": "TheEast"
}, {
"name": "China",
"group": "TheEast"
}, {
"name": "Japan",
"group": "TheEast"
}, {
"name": "Mongolia",
"group": "TheEast"
}, {
"name": "India",
"group": "TheEast"
}, {
"name": "Ural",
"group": "TheEast"
}, {
"name": "Afganistan",
"group": "TheEast"
}, {
"name": "MiddleEast",
"group": "TheEast"
}, {
"name": "Greenland",
"group": "NA"
}, {
"name": "IceLand",
"group": "EUR"
}, {
"name": "NorthwestTerritory",
"group": "NA"
}, {
"name": "Ontario",
"group": "NA"
}, {
"name": "Alaska",
"group": "NA"
}, {
"name": "Alberta",
"group": "NA"
}, {
"name": "WesternUSA",
"group": "NA"
}, {
"name": "Quebec",
"group": "NA"
}, {
"name": "EasternUSA",
"group": "NA"
}, {
"name": "mexico",
"group": "NA"
}, {
"name": "Ukraine",
"group": "EUR"
}, {
"name": "Scandinavia",
"group": "EUR"
}, {
"name": "GreatBritain",
"group": "EUR"
}, {
"name": "NorthernEurope",
"group": "EUR"
}, {
"name": "SouthernEurope",
"group": "EUR"
}, {
"name": "WesternEurope",
"group": "EUR"
}, {
"name": "East_Afrika",
"group": "Afrika"
}, {
"name": "Egypt",
"group": "Afrika"
}, {
"name": "Madagasca",
"group": "Afrika"
}, {
"name": "Congo",
"group": "Afrika"
}, {
"name": "South_Afrika",
"group": "Afrika"
}, {
"name": "North_Afrika",
"group": "Afrika"
}, {
"name": "brazil",
"group": "SA"
}, {
"name": "argentina",
"group": "SA"
}, {
"name": "peru",
"group": "SA"
}, {
"name": "venezuela",
"group": "SA"
}],
"links": [{
"source": 1,
"target": 0,
"value": 5
}, {
"source": 2,
"target": 0,
"value": 5
}, {
"source": 2,
"target": 1,
"value": 5
}, {
"source": 1,
"target": 3,
"value": 5
}, {
"source": 0,
"target": 3,
"value": 5
}, {
"source": 4,
"target": 3,
"value": 5
}, {
"source": 6,
"target": 5,
"value": 5
}, {
"source": 7,
"target": 5,
"value": 5
}, {
"source": 7,
"target": 8,
"value": 5
}, {
"source": 5,
"target": 8,
"value": 5
}, {
"source": 9,
"target": 8,
"value": 5
}, {
"source": 6,
"target": 7,
"value": 5
}, {
"source": 6,
"target": 10,
"value": 5
}, {
"source": 6,
"target": 11,
"value": 5
}, {
"source": 10,
"target": 11,
"value": 5
}, {
"source": 7,
"target": 11,
"value": 5
}, {
"source": 9,
"target": 4,
"value": 5
}, {
"source": 11,
"target": 9,
"value": 5
}, {
"source": 9,
"target": 12,
"value": 5
}, {
"source": 4,
"target": 12,
"value": 5
}, {
"source": 8,
"target": 13,
"value": 5
}, {
"source": 14,
"target": 13,
"value": 5
}, {
"source": 12,
"target": 15,
"value": 5
}, {
"source": 14,
"target": 15,
"value": 5
}, {
"source": 9,
"target": 14,
"value": 5
}, {
"source": 17,
"target": 16,
"value": 5
}, {
"source": 16,
"target": 18,
"value": 5
}, {
"source": 19,
"target": 18,
"value": 5
}, {
"source": 6,
"target": 20,
"value": 5
}, {
"source": 21,
"target": 20,
"value": 5
}, {
"source": 18,
"target": 20,
"value": 5
}, {
"source": 18,
"target": 21,
"value": 5
}, {
"source": 19,
"target": 21,
"value": 5
}, {
"source": 22,
"target": 21,
"value": 5
}, {
"source": 16,
"target": 19,
"value": 5
}, {
"source": 23,
"target": 19,
"value": 5
}, {
"source": 24,
"target": 19,
"value": 5
}, {
"source": 16,
"target": 23,
"value": 5
}, {
"source": 24,
"target": 23,
"value": 5
}, {
"source": 25,
"target": 24,
"value": 5
}, {
"source": 19,
"target": 22,
"value": 5
}, {
"source": 24,
"target": 22,
"value": 5
}, {
"source": 25,
"target": 22,
"value": 5
}, {
"source": 13,
"target": 26,
"value": 5
}, {
"source": 14,
"target": 26,
"value": 5
}, {
"source": 27,
"target": 17,
"value": 5
}, {
"source": 28,
"target": 17,
"value": 5
}, {
"source": 26,
"target": 27,
"value": 5
}, {
"source": 27,
"target": 29,
"value": 5
}, {
"source": 27,
"target": 28,
"value": 5
}, {
"source": 29,
"target": 28,
"value": 5
}, {
"source": 26,
"target": 30,
"value": 5
}, {
"source": 29,
"target": 30,
"value": 5
}, {
"source": 28,
"target": 31,
"value": 5
}, {
"source": 30,
"target": 31,
"value": 5
}, {
"source": 29,
"target": 31,
"value": 5
}, {
"source": 15,
"target": 32,
"value": 5
}, {
"source": 33,
"target": 32,
"value": 5
}, {
"source": 15,
"target": 33,
"value": 5
}, {
"source": 30,
"target": 33,
"value": 5
}, {
"source": 32,
"target": 34,
"value": 5
}, {
"source": 32,
"target": 35,
"value": 5
}, {
"source": 36,
"target": 35,
"value": 5
}, {
"source": 30,
"target": 37,
"value": 5
}, {
"source": 31,
"target": 37,
"value": 5
}, {
"source": 32,
"target": 37,
"value": 5
}, {
"source": 33,
"target": 37,
"value": 5
}, {
"source": 35,
"target": 37,
"value": 5
}, {
"source": 34,
"target": 36,
"value": 5
}, {
"source": 37,
"target": 38,
"value": 5
}, {
"source": 39,
"target": 38,
"value": 5
}, {
"source": 41,
"target": 40,
"value": 5
}, {
"source": 39,
"target": 40,
"value": 5
}, {
"source": 25,
"target": 41,
"value": 5
}, {
"source": 38,
"target": 41,
"value": 5
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment