You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.1 KiB
HTML
79 lines
2.1 KiB
HTML
<!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> |