Simple force-directed graph with just links, no weights or values, for industry supplies.
Crudely adapted from (http://bl.ocks.org/mbostock/4062045)
Simple force-directed graph with just links, no weights or values, for industry supplies.
Crudely adapted from (http://bl.ocks.org/mbostock/4062045)
{ | |
"nodes": [ | |
{ | |
"name": "wood", | |
"era": 1, | |
"waggon_cost": "$5,000", | |
"waggon_sell_price": "$3,500", | |
"idx": 0 | |
}, | |
{ | |
"name": "grain", | |
"era": 1, | |
"waggon_cost": "$5,000", | |
"waggon_sell_price": "$3,500", | |
"idx": 1 | |
}, | |
{ | |
"name": "coal", | |
"era": 1, | |
"waggon_cost": "$5,000", | |
"waggon_sell_price": "$3,500", | |
"idx": 2 | |
}, | |
{ | |
"name": "iron ore", | |
"era": 1, | |
"waggon_cost": "$10,000", | |
"waggon_sell_price": "$7,000", | |
"idx": 3 | |
}, | |
{ | |
"name": "boards", | |
"era": 1, | |
"waggon_cost": "$15,000", | |
"waggon_sell_price": "$10,500", | |
"idx": 4 | |
}, | |
{ | |
"name": "thread", | |
"era": 1, | |
"waggon_cost": "$15,000", | |
"waggon_sell_price": "$10,500", | |
"idx": 5 | |
}, | |
{ | |
"name": "cotton", | |
"era": 1, | |
"waggon_cost": "$15,000", | |
"waggon_sell_price": "$10,500", | |
"idx": 6 | |
}, | |
{ | |
"name": "cattle", | |
"era": 1, | |
"waggon_cost": "$15,000", | |
"waggon_sell_price": "$10,500", | |
"idx": 7 | |
}, | |
{ | |
"name": "leather", | |
"era": 1, | |
"waggon_cost": "$17,500", | |
"waggon_sell_price": "$12,250", | |
"idx": 8 | |
}, | |
{ | |
"name": "iron", | |
"era": 1, | |
"waggon_cost": "$20,000", | |
"waggon_sell_price": "$14,000", | |
"idx": 9 | |
}, | |
{ | |
"name": "flour", | |
"era": 2, | |
"waggon_cost": "$17,500", | |
"waggon_sell_price": "$12,250", | |
"idx": 10 | |
}, | |
{ | |
"name": "meat", | |
"era": 2, | |
"waggon_cost": "$25,000", | |
"waggon_sell_price": "$17,500", | |
"idx": 11 | |
}, | |
{ | |
"name": "paper", | |
"era": 2, | |
"waggon_cost": "$25,000", | |
"waggon_sell_price": "$17,500", | |
"idx": 12 | |
}, | |
{ | |
"name": "textiles", | |
"era": 2, | |
"waggon_cost": "$25,000", | |
"waggon_sell_price": "$17,500", | |
"idx": 13 | |
}, | |
{ | |
"name": "pastries", | |
"era": 2, | |
"waggon_cost": "$27,500", | |
"waggon_sell_price": "$19,250", | |
"idx": 14 | |
}, | |
{ | |
"name": "hardware", | |
"era": 2, | |
"waggon_cost": "$30,000", | |
"waggon_sell_price": "$21,000", | |
"idx": 15 | |
}, | |
{ | |
"name": "copper ore", | |
"era": 3, | |
"waggon_cost": "$25,000", | |
"waggon_sell_price": "$17,500", | |
"idx": 16 | |
}, | |
{ | |
"name": "quartz", | |
"era": 3, | |
"waggon_cost": "$30,000", | |
"waggon_sell_price": "$21,000", | |
"idx": 17 | |
}, | |
{ | |
"name": "copper", | |
"era": 3, | |
"waggon_cost": "$35,000", | |
"waggon_sell_price": "$24,500", | |
"idx": 18 | |
}, | |
{ | |
"name": "steel", | |
"era": 3, | |
"waggon_cost": "$35,000", | |
"waggon_sell_price": "$24,500", | |
"idx": 19 | |
}, | |
{ | |
"name": "shoes", | |
"era": 3, | |
"waggon_cost": "$35,000", | |
"waggon_sell_price": "$24,500", | |
"idx": 20 | |
}, | |
{ | |
"name": "packaging", | |
"era": 3, | |
"waggon_cost": "$35,000", | |
"waggon_sell_price": "$24,500", | |
"idx": 21 | |
}, | |
{ | |
"name": "wires", | |
"era": 3, | |
"waggon_cost": "$35,000", | |
"waggon_sell_price": "$24,500", | |
"idx": 22 | |
}, | |
{ | |
"name": "pipes", | |
"era": 3, | |
"waggon_cost": "$40,000", | |
"waggon_sell_price": "$28,000", | |
"idx": 23 | |
}, | |
{ | |
"name": "glassware", | |
"era": 3, | |
"waggon_cost": "$40,000", | |
"waggon_sell_price": "$28,000", | |
"idx": 24 | |
}, | |
{ | |
"name": "windows", | |
"era": 3, | |
"waggon_cost": "$50,000", | |
"waggon_sell_price": "$35,000", | |
"idx": 25 | |
}, | |
{ | |
"name": "sheet metal", | |
"era": 4, | |
"waggon_cost": "$50,000", | |
"waggon_sell_price": "$35,000", | |
"idx": 26 | |
}, | |
{ | |
"name": "crude oil", | |
"era": 4, | |
"waggon_cost": "$60,000", | |
"waggon_sell_price": "$42,000", | |
"idx": 27 | |
}, | |
{ | |
"name": "lamps", | |
"era": 4, | |
"waggon_cost": "$65,000", | |
"waggon_sell_price": "$45,500", | |
"idx": 28 | |
}, | |
{ | |
"name": "food", | |
"era": 4, | |
"waggon_cost": "$70,000", | |
"waggon_sell_price": "$49,000", | |
"idx": 29 | |
}, | |
{ | |
"name": "clothing", | |
"era": 4, | |
"waggon_cost": "$70,000", | |
"waggon_sell_price": "$49,000", | |
"idx": 30 | |
}, | |
{ | |
"name": "stainless steel", | |
"era": 4, | |
"waggon_cost": "$80,000", | |
"waggon_sell_price": "$56,000", | |
"idx": 31 | |
}, | |
{ | |
"name": "chemicals", | |
"era": 4, | |
"waggon_cost": "$80,000", | |
"waggon_sell_price": "$56,000", | |
"idx": 32 | |
}, | |
{ | |
"name": "silicon", | |
"era": 4, | |
"waggon_cost": "$55,000", | |
"waggon_sell_price": "$38,500", | |
"idx": 33 | |
}, | |
{ | |
"name": "aluminium", | |
"era": 5, | |
"waggon_cost": "$80,000", | |
"waggon_sell_price": "$56,000", | |
"idx": 34 | |
}, | |
{ | |
"name": "household supplies", | |
"era": 5, | |
"waggon_cost": "$90,000", | |
"waggon_sell_price": "$63,000", | |
"idx": 35 | |
}, | |
{ | |
"name": "bauxite", | |
"era": 5, | |
"waggon_cost": "$70,000", | |
"waggon_sell_price": "$49,000", | |
"idx": 36 | |
}, | |
{ | |
"name": "plastics", | |
"era": 5, | |
"waggon_cost": "$85,000", | |
"waggon_sell_price": "$59,500", | |
"idx": 37 | |
}, | |
{ | |
"name": "steel beams", | |
"era": 5, | |
"waggon_cost": "$90,000", | |
"waggon_sell_price": "$63,000", | |
"idx": 38 | |
}, | |
{ | |
"name": "pottery", | |
"era": 5, | |
"waggon_cost": "$90,000", | |
"waggon_sell_price": "$63,000", | |
"idx": 39 | |
}, | |
{ | |
"name": "petrol", | |
"era": 5, | |
"waggon_cost": "$100,000", | |
"waggon_sell_price": "$70,000", | |
"idx": 40 | |
}, | |
{ | |
"name": "machinery", | |
"era": 5, | |
"waggon_cost": "$110,000", | |
"waggon_sell_price": "$77,000", | |
"idx": 41 | |
}, | |
{ | |
"name": "cars", | |
"era": 5, | |
"waggon_cost": "$120,000", | |
"waggon_sell_price": "$84,000", | |
"idx": 42 | |
}, | |
{ | |
"name": "electronics", | |
"era": 6, | |
"waggon_cost": "$175,000", | |
"waggon_sell_price": "$122,500", | |
"idx": 43 | |
}, | |
{ | |
"name": "toys", | |
"era": 6, | |
"waggon_cost": "$120,000", | |
"waggon_sell_price": "$84,000", | |
"idx": 44 | |
}, | |
{ | |
"name": "sports goods", | |
"era": 6, | |
"waggon_cost": "$135,000", | |
"waggon_sell_price": "$94,500", | |
"idx": 45 | |
}, | |
{ | |
"name": "toiletries", | |
"era": 6, | |
"waggon_cost": "$145,000", | |
"waggon_sell_price": "$101,500", | |
"idx": 46 | |
}, | |
{ | |
"name": "pharmaceuticals", | |
"era": 6, | |
"waggon_cost": "$150,000", | |
"waggon_sell_price": "$105,000", | |
"idx": 47 | |
} | |
], | |
"links": [ | |
{ | |
"source": 0, | |
"target": 4, | |
"value": 5 | |
}, | |
{ | |
"source": 6, | |
"target": 5, | |
"value": 4 | |
}, | |
{ | |
"source": 1, | |
"target": 7, | |
"value": 7 | |
}, | |
{ | |
"source": 7, | |
"target": 8, | |
"value": 3 | |
}, | |
{ | |
"source": 3, | |
"target": 9, | |
"value": 21 | |
}, | |
{ | |
"source": 2, | |
"target": 9, | |
"value": 21 | |
}, | |
{ | |
"source": 1, | |
"target": 10, | |
"value": 4 | |
}, | |
{ | |
"source": 7, | |
"target": 11, | |
"value": 3 | |
}, | |
{ | |
"source": 0, | |
"target": 12, | |
"value": 5 | |
}, | |
{ | |
"source": 5, | |
"target": 13, | |
"value": 3 | |
}, | |
{ | |
"source": 10, | |
"target": 14, | |
"value": 3 | |
}, | |
{ | |
"source": 12, | |
"target": 14, | |
"value": 3 | |
}, | |
{ | |
"source": 2, | |
"target": 15, | |
"value": 11 | |
}, | |
{ | |
"source": 9, | |
"target": 15, | |
"value": 11 | |
}, | |
{ | |
"source": 16, | |
"target": 18, | |
"value": 14 | |
}, | |
{ | |
"source": 2, | |
"target": 18, | |
"value": 14 | |
}, | |
{ | |
"source": 9, | |
"target": 19, | |
"value": 9 | |
}, | |
{ | |
"source": 2, | |
"target": 19, | |
"value": 9 | |
}, | |
{ | |
"source": 8, | |
"target": 20, | |
"value": 2 | |
}, | |
{ | |
"source": 15, | |
"target": 20, | |
"value": 2 | |
}, | |
{ | |
"source": 4, | |
"target": 21, | |
"value": 1 | |
}, | |
{ | |
"source": 12, | |
"target": 21, | |
"value": 1 | |
}, | |
{ | |
"source": 18, | |
"target": 22, | |
"value": 5 | |
}, | |
{ | |
"source": 18, | |
"target": 23, | |
"value": 8 | |
}, | |
{ | |
"source": 15, | |
"target": 23, | |
"value": 8 | |
}, | |
{ | |
"source": 17, | |
"target": 24, | |
"value": 6 | |
}, | |
{ | |
"source": 4, | |
"target": 25, | |
"value": 2 | |
}, | |
{ | |
"source": 24, | |
"target": 25, | |
"value": 2 | |
}, | |
{ | |
"source": 23, | |
"target": 26, | |
"value": 4 | |
}, | |
{ | |
"source": 19, | |
"target": 26, | |
"value": 4 | |
}, | |
{ | |
"source": 24, | |
"target": 28, | |
"value": 2 | |
}, | |
{ | |
"source": 22, | |
"target": 28, | |
"value": 2 | |
}, | |
{ | |
"source": 11, | |
"target": 29, | |
"value": 2 | |
}, | |
{ | |
"source": 14, | |
"target": 29, | |
"value": 2 | |
}, | |
{ | |
"source": 13, | |
"target": 30, | |
"value": 1 | |
}, | |
{ | |
"source": 20, | |
"target": 30, | |
"value": 1 | |
}, | |
{ | |
"source": 32, | |
"target": 31, | |
"value": 3 | |
}, | |
{ | |
"source": 27, | |
"target": 32, | |
"value": 10 | |
}, | |
{ | |
"source": 19, | |
"target": 31, | |
"value": 3 | |
}, | |
{ | |
"source": 17, | |
"target": 33, | |
"value": 2 | |
}, | |
{ | |
"source": 36, | |
"target": 34, | |
"value": 2 | |
}, | |
{ | |
"source": 31, | |
"target": 35, | |
"value": 1 | |
}, | |
{ | |
"source": 29, | |
"target": 35, | |
"value": 1 | |
}, | |
{ | |
"source": 24, | |
"target": 35, | |
"value": 1 | |
}, | |
{ | |
"source": 32, | |
"target": 37, | |
"value": 4 | |
}, | |
{ | |
"source": 19, | |
"target": 38, | |
"value": 1 | |
}, | |
{ | |
"source": 23, | |
"target": 38, | |
"value": 1 | |
}, | |
{ | |
"source": 17, | |
"target": 39, | |
"value": 2 | |
}, | |
{ | |
"source": 32, | |
"target": 40, | |
"value": 1 | |
}, | |
{ | |
"source": 27, | |
"target": 40, | |
"value": 1 | |
}, | |
{ | |
"source": 23, | |
"target": 41, | |
"value": 2 | |
}, | |
{ | |
"source": 26, | |
"target": 41, | |
"value": 2 | |
}, | |
{ | |
"source": 22, | |
"target": 41, | |
"value": 2 | |
}, | |
{ | |
"source": 26, | |
"target": 42, | |
"value": 1 | |
}, | |
{ | |
"source": 25, | |
"target": 42, | |
"value": 1 | |
}, | |
{ | |
"source": 13, | |
"target": 42, | |
"value": 1 | |
}, | |
{ | |
"source": 28, | |
"target": 42, | |
"value": 1 | |
}, | |
{ | |
"source": 41, | |
"target": 43, | |
"value": 1 | |
}, | |
{ | |
"source": 37, | |
"target": 43, | |
"value": 1 | |
}, | |
{ | |
"source": 33, | |
"target": 43, | |
"value": 1 | |
}, | |
{ | |
"source": 37, | |
"target": 44, | |
"value": 1 | |
}, | |
{ | |
"source": 4, | |
"target": 44, | |
"value": 1 | |
}, | |
{ | |
"source": 34, | |
"target": 45, | |
"value": 1 | |
}, | |
{ | |
"source": 39, | |
"target": 46, | |
"value": 1 | |
}, | |
{ | |
"source": 31, | |
"target": 46, | |
"value": 1 | |
}, | |
{ | |
"source": 32, | |
"target": 47, | |
"value": 1 | |
}, | |
{ | |
"source": 37, | |
"target": 47, | |
"value": 1 | |
} | |
] | |
} |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.node { | |
stroke: #fff; | |
stroke-width: 1.5px; | |
} | |
.link { | |
stroke: #111; | |
stroke-opacity: 1; | |
} | |
text { | |
font: 10pt sans-serif; | |
pointer-events: none; | |
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var width = 1024, | |
height = 720; | |
var color = d3.scale.category20(); | |
var force = d3.layout.force() | |
.charge(-300) | |
.linkDistance(80) | |
.size([width, height]); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("defs").selectAll("marker") | |
.data(["arrow"]) | |
.enter().append("marker") | |
.attr("id", function(d) { return d; }) | |
.attr("viewBox", "0 -5 10 10") | |
.attr("refX", 15) | |
.attr("refY", -1.5) | |
.attr("markerWidth", 6) | |
.attr("markerHeight", 6) | |
.attr("orient", "auto") | |
.append("path") | |
.attr("d", "M0,-5L10,0L0,5"); | |
d3.json("goods.json", function(error, graph) { | |
force | |
.nodes(graph.nodes) | |
.links(graph.links) | |
.start(); | |
var link = svg.selectAll(".link") | |
.data(graph.links) | |
.enter().append("line") | |
.attr("class", "link") | |
//.style("stroke-width", function(d) { return Math.sqrt(d.value); }) | |
.attr("marker-end","url(#arrow)" ) | |
; | |
var node = svg.selectAll(".node") | |
.data(graph.nodes) | |
.enter().append("circle") | |
.attr("class", "node") | |
.attr("r", 15) | |
.style("fill", function(d) { return color(d.era); }) | |
.call(force.drag); | |
node.append("title") | |
.text(function(d) { return d.name; }); | |
var text = svg.append("g").selectAll("text") | |
.data(graph.nodes) | |
.enter().append("text") | |
.attr("x", 2) | |
.attr("y", ".31em") | |
.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; }); | |
text.attr("x", function(d) { return d.x; }) | |
.attr("y", function(d) { return d.y; }); | |
}); | |
}); | |
</script> |