CODEWITHSUNDEEP
javascriptjsond3.jstreemapd3plus
Tulio Cruz
Tulio Cruz

Reputation: 59

Problems using json recursive in treemap using D3PLUS

I'm using the D3PlUS JS library (http://d3plus.org/) and I need to implement a treemap chart with a json recursive structure. I could just to do a first level treemap chart, but I couldn't do mack my code to be multilevel.

example.json

[
    {
        "id":"First cell",
        "value": 10,
        "child": 
        [ 
            {
                "id":"Child first cel",
                "value": 10,
                "child":[]
            }
        ]
    },

    {
        "id":"Second cell",
        "value": 90,
        "child": 
        [ 
            {
                "id":"Child second cell 1",
                "value": 10,
                "child":[]
            },
            {
                "id":"Child second cell 2",
                "value": 20,
                "child":[]
            },{
                "id":"Child second cell 3",
                "value": 10,
                "child":[]
            }
        ]
    } 
]

<!doctype html>
<meta charset="utf-8">

<link href="http://d3plus.org/css/d3plus.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://d3plus.org/js/d3.js"></script>
<script src="http://d3plus.org/js/d3.geo.tile.js"></script>
<script src="http://d3plus.org/js/topojson.js"></script>
<script src="http://d3plus.org/js/modernizr.js"></script>
<script src="http://d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>

  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data("data/exemple.json")
    .type("tree_map")   // visualization type
    .id("id")         // key for which our data is unique on
    .size("value")      // sizing of blocks
    .draw()             // finally, draw the visualization!

</script>

Anybody can help me?

Upvotes: 0

Views: 1018

Answers (1)

FernOfTheAndes
FernOfTheAndes

Reputation: 5015

Two modifications were necessary:

  • changing the data to what is expected by the chart, paying special attention to getting the IDs right (see docs). This was the trickiest part.
  • nesting the ids in the config param, in accordance with the data: .id(["id","cid"])

Here is a complete working PLUNK.

EDIT: Per OP request, I added one more level to the treemap. It is important to keep the id hierarchy, so now the config param is: .id(["id","cid","gid"]). Also, make sure to remove the value field in the json file for all records that have children...otherwise, D3plus will consider that as part of the values to display with the children.

Upvotes: 2

Related Questions