D3.js Sequence Sunburst, change data on click

Question

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)

Anurous

I'm wrestling with this identical issue right now - did you ever to manage to solve this? Thanks! – Yecies

I didn't solve it, but used this angular overhaul of the same sunburst: gist.github.com/chrisrzhou/d5bdd8546f64ca0e4366 Use ng-click="sunburst.selectExample('name_of_your_csv') to add an click event to any element you want. – Anurous

Answer 1

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>

Godewyn

d3.select("#container").selectAll("path").remove(); did it for me – Humanoid

Answer 2

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.

Forbis

Answer 3

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

Bowe