I have created a JSON representation that I would like to visualize using D3JS as a treemap.
Following this tutorial: https://bl.ocks.org/d3indepth/d4f8938a1fd0914b41ea7cb4e2480ca8
The JSON I generated from the data is displaying correctly in the treemap. However, when attempting to use my own JSON from this link: , the treemap does not appear. What could be causing this issue?
This is the code I am using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Treemap layout</title>
<style>
rect {
fill: cadetblue;
opacity: 0.3;
stroke: white;
}
</style>
</head>
<body>
<svg width="420" height="220">
<g></g>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
d3.json("test.json", function(error, data) {
var treemapLayout = d3.treemap()
.size([400, 200])
.paddingOuter(10);
var root = d3.hierarchy(data)
root.sum(function(d) {
return d.value;
});
treemapLayout(root);
d3.select('svg g')
.selectAll('rect')
.data(root.descendants())
.enter()
.append('rect')
.attr('x', function(d) {return d.x0; })
.attr('y', function(d) {return d.y0; })
.attr('width', function(d) {return d.x1 - d.x0; })
.attr('height', function(d) {return d.y1 - d.y0; })
})
</script>
</body>
</html>