Using local json variable for plotting d3 partition chart

Question

I have a collection of objects which I have been formmated to be able to plot this in the partion chart in the below format.

{"name":"Component 234324234","children":[{"name":"Krishna Candidate - 1 435458976766","children":[{"name":"Krishna clinical 23423424","size":23423424},{"name":"DP Componet 98989","size":98989},{"name":"KRUTI COMP,  435435454353","size":435435454353}],"size":435458976766},{"name":"Krishna Candidate-Test 0","children":[],"size":0},{"name":"Test Candidate 5555","children":[{"name":"ADME Component 5555","size":5555}],"size":5555},{"name":"Candidate 5 37874474288","children":[{"name":"Teset Component 9898988","size":9898988},{"name":"AdmeComponent 34234324324","size":34234324324},{"name":"WPM Component 23432424","size":23432424},{"name":"WPM 1 2344324324","size":2344324324},{"name":"WPM2 234324324","size":234324324},{"name":"WPM 3 2343244","size":2343244},{"name":"WPM 4 23423432","size":23423432},{"name":"WPM 5 2323432","size":2323432},{"name":"Adme component one 989898","size":989898},{"name":"Tejas Jet Fighters 998989898","size":998989898},{"name":"Planned budget 1 100000","size":100000}],"size":37874474288},{"name":"Krishna Candidate 234324234","children":[{"name":"Test Component One 234324234","size":234324234}],"size":234324234}],"size":234324234},{"name":"undefined 4662000","children":[{"name":"Candidate Sirisha 4662000","children":[{"name":"Lead Generation 500000","size":500000},{"name":"Lead Optimization 500000","size":500000},{"name":"Lead Profiling 500000","size":500000},{"name":"BioMarker Discovery 300000","size":300000},{"name":"Target Validation 1000000","size":1000000},{"name":"BioMarker PK/PD 300000","size":300000},{"name":"Synthesize Tox Dose 250000","size":250000},{"name":"BioMarker Validation 300000","size":300000},{"name":"Rodent Tox 200000","size":200000},{"name":"Dog Tox 300000","size":300000},{"name":"Primate Tox 500000","size":500000},{"name":"Planned budget itemi 10000","size":10000},{"name":"Planned budget 1000","size":1000},{"name":"Planned budget 5 1000","size":1000}],"size":4662000}],"size":4662000}]

    d3.json("flare.json", function(root) {
      var g = vis.selectAll("g")
          .data(partition.nodes(root))
        .enter().append("svg:g")
          .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
          .on("click", click);

      var kx = w / root.dx,
          ky = h / 1;

      g.append("svg:rect")
          .attr("width", root.dy * kx)
          .attr("height", function(d) { return d.dx * ky; })
          .attr("class", function(d) { return d.children ? "parent" : "child"; });

      g.append("svg:text")
          .attr("transform", transform)
          .attr("dy", ".35em")
          .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
          .text(function(d) { return d.name; })

      d3.select(window)
          .on("click", function() { click(root); })

      function click(d) {
        if (!d.children) return;

        kx = (d.y ? w - 40 : w) / (1 - d.y);
        ky = h / d.dx;
        x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
        y.domain([d.x, d.x + d.dx]);

        var t = g.transition()
            .duration(d3.event.altKey ? 7500 : 750)
            .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });

        t.select("rect")
            .attr("width", d.dy * kx)
            .attr("height", function(d) { return d.dx * ky; });

        t.select("text")
            .attr("transform", transform)
            .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });

        d3.event.stopPropagation();
      }

The partition chart expects a json object from an external url. Can anyone help in helping me how to use the above object for plotting the chart

score 0 · Answer 1 · answered Aug 20 '13 at 12:48

Are you trying to use the object at the top of your code, the one that begins with {"name": ...?

If this is the case you need to give the object a name, let say data. You also need to ensure that it's in a json format, try using json.lint.com. I found your data wasn't quite in that format so I remove about half of it.

Next your code is calling flare.json from your root directory, which I guess is not what you want to visualise, so you'll need to remove that part of the code (and don't forget the bracket at the end (if it's there). That is, this line;

d3.json("flare.json", function(root) {

Now as the data in the code you won't have to make a call to it, it's loaded on to the page with the rest of your code.

You'll then need to replace the reference to root with data.

Now it appears that the code you've based this on comes from here. Once I added in the bits that had been edited out and make the changes above the code rendered.

Using local json variable for plotting d3 partition chart

1 Answers1