add sample data and d3.js boilerplate

main
Helix 3 years ago
parent a1408d432a
commit 24f381a9d4

@ -0,0 +1,13 @@
{
"itemName": "Cryo-Pump",
"components": [
{
"id": "hot-ice",
"amount": 1
},
{
"id": "thermic-condensate",
"amount": 1
}
]
}

@ -0,0 +1,13 @@
{
"itemName": "Cryogenic Chamber",
"components": [
{
"id": "living-glass",
"amount": 1
},
{
"id": "cryo-pump",
"amount": 1
}
]
}

@ -0,0 +1,13 @@
{
"itemName": "Hot Ice",
"components": [
{
"id": "enriched-carbon",
"amount": 1
},
{
"id": "nitrogen-salt",
"amount": 1
}
]
}

@ -0,0 +1,13 @@
{
"itemName": "Living Glass",
"components": [
{
"id": "lubricant",
"amount": 1
},
{
"id": "glass",
"amount": 5
}
]
}

@ -0,0 +1,13 @@
{
"itemName": "Thermic Condensate",
"components": [
{
"id": "sulphurine",
"amount": 250
},
{
"id": "condensed-carbon",
"amount": 50
}
]
}

@ -0,0 +1,79 @@
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<body>
<!-- Create a div where the graph will take place -->
<h2>Cryogenic Chamber</h2>
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var width = 460
var height = 460
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)"); // bit of margin on the left = 40
// read json data
d3.json("data/cryogenic-chamber.json", function(data) {
// Create the cluster layout:
var cluster = d3.cluster()
.size([height, width - 100]); // 100 is the margin I will have on the right side
function children(d){
return d.children
// ???
}
// Give the data to this cluster layout:
var root = d3.hierarchy(data, function(d) {
return d.children;
});
cluster(root);
// Add the links between nodes:
svg.selectAll('path')
.data( root.descendants().slice(1) )
.enter()
.append('path')
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.parent.y + 50) + "," + d.x
+ " " + (d.parent.y + 150) + "," + d.parent.x // 50 and 150 are coordinates of inflexion, play with it to change links shape
+ " " + d.parent.y + "," + d.parent.x;
})
.style("fill", 'none')
.attr("stroke", '#ccc')
// Add a circle for each node.
svg.selectAll("g")
.data(root.descendants())
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"
})
.append("circle")
.attr("r", 7)
.style("fill", "#69b3a2")
.attr("stroke", "black")
.style("stroke-width", 2)
})
</script>
</body>
</html>
Loading…
Cancel
Save