CODEWITHSUNDEEP
javascriptjsoncsvd3.jssunburst-diagram
Christopher Siegel
Christopher Siegel

Reputation: 51

D3.js Sequence Sunburst, change data on click

I'm trying to change the data of the Sequence Sunburst found here: http://bl.ocks.org/kerryrodden/7090426

I want it to change to a new dataset (csv, or json) when I click a button.

I tried reading a new csv, and calling createVisualization(json);:

$('.toggle-data').click( function() {
  d3.text("../csv/new-data.csv", function(text) {
    var csv = d3.csv.parseRows(text);
    var json = buildHierarchy(csv);
    createVisualization(json);
  });
});

I also tried calling createVisualization(json);directly with an updated json.

In both ways I get this error: Uncaught TypeError: Cannot read property '__data__' of null Which refers to this line of code: totalSize = path.node().__data__.value;

I also tried removing the old svg before creating the new one, but that didn't change anything.

Question: How can I change the underlaying data of that sunburst (ideally animating from one dataset to another)?

I didn't manage to make a working fiddle, so here is one from another thread (all the code is in the above link though): http://jsfiddle.net/zbZ3S/ (different data - using json, but should be the same code as the link above)

Upvotes: 5

Views: 1802

Answers (3)

murat saglam
murat saglam

Reputation: 31

Here is how I solved this issue,

First, made create visualization segment parametric: 

d3.text(inputcsvfile, function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
});

And, added this at the beginning of the sequences.js

// default sunburst data
var inputcsvfile="olddata.csv";

// function to switch to a new data
function updateData() {
  d3.select("#container").selectAll("path").remove();
  var inputcsvfile="newdata.csv";
  d3.text(inputcsvfile, function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
});
};

Do not forget to put something to trigger updateData()

In my case, I added a button to the main html file as: 

<div id="mybuttons">
    <input name="updateButton1" 
           type="button" 
           value="Change data" 
           onclick="updateData()" />
</div>

Upvotes: 3

Bosch
Bosch

Reputation: 21

solve the totalSize by modifying the buildHierarchy like so:

function buildHierarchy(csv) {
  var root = {"name": "root", "children": []};
  for (var i = 0; i < csv.length; i++) {
      var sequence = csv[i][0];
      var size = +csv[i][1];
      if (isNaN(size)) { // e.g. if this is a header row
          continue;
      }
totalSize = totalSize + size;

add last line

Upvotes: 2

BleuBizarre
BleuBizarre

Reputation: 378

I have the same problem and the problem is that the program fail get the totalsize of entries. If you can calculate it another way you can do : totalSize = XXX ; with XXX the totalSize to debug it until someone find a real solution.

Upvotes: 2

Related Questions