CODEWITHSUNDEEP
javascriptjsond3.js
Henrik Hollósi
Henrik Hollósi

Reputation: 223

JSON doesn't load corretly

I want to represent my JSON in D3JS as a treemap.

I'm following this tutorial: https://bl.ocks.org/d3indepth/d4f8938a1fd0914b41ea7cb4e2480ca8

I made a JSON from the data and it's working correctly, the treemap is shown. Now I would like to use this code for my own JSON: https://next.json-generator.com/NklG4H4bL?fbclid=IwAR0g-F2TrMv0FOrDpJIsiold4AwmD1gU3vxhv772Alfz_o--g0XSrpKXqbQ

With this JSON my treemap doesn't appear. What's the reason for this?

My code:

<!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>

Upvotes: 1

Views: 69

Answers (1)

CodeHacker
CodeHacker

Reputation: 2138

JSON is case sensitive.

I see Treemap layout expects always a node with a "name" property and a "children" property of type array.

And the leafs of the tree always have to have a "value" property.

You are sending a tree that has no "name" properties on the nodes (but I'm not sure if that is required) and has "Children" instead of "children".

Maybe fixing the cases could work.

BTW: Normally JSON is camelCase, so your JSON is not standard.

Upvotes: 5

Related Questions