add sample data and d3.js boilerplate
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…
Reference in New Issue