0

I'm making a visualization for the titanic data set https://www.kaggle.com/c/titanic/data, and after some search i found that the marimekko chart is the best visualization for this data set.

I looked at http://www.jasondavies.com/mekko/ and began to tweak the code a bit to fit it to my needs. My problem is that the cell titles (those appear after mouse - hover at a cell) do not update values. The first call to the function chart draws the titles correctly, then when i try to change the cell values using the transition function, the charts animates properly but the values in the cell titles do not change, they still have the old values when i hover at them.

The last line in the transition function is:

cellEnter.append("title")
        .text(function(d) { return d.children ? null : title(d); });

which seems to work the first time the chart is drawn, but it doesn't update the titles when the cell data changes.

Any ideas how to fix this ?

If you're curious to see the changes i made, have a look at working example http://codepen.io/hshihab/pen/PqWjmo

I just made a couple of small changes to Jason's original code to show my point.

hshihab
  • 416
  • 5
  • 16
  • Your codepen says that `draw` is not defined and doesn't run for me. – Lars Kotthoff May 29 '15 at 19:27
  • sorry, i don't know how to make it work on codepen, here's the complete index.html http://pastebin.com/6q6xjKC3 – hshihab May 29 '15 at 19:58
  • You may need to specify a key function (second argument to `.data()`) that tells D3 how to match data and DOM elements. – Lars Kotthoff May 29 '15 at 20:00
  • Umm, not sure what do you mean, and are you talking about `.data(treemap.nodes);` ? – hshihab May 29 '15 at 20:26
  • Yes. It's quite hard to figure out what's going on without being able to see what it does. – Lars Kotthoff May 29 '15 at 20:35
  • can you provide an example of how to use the `.data()` with the second argument as u suggested ? – hshihab May 29 '15 at 22:29
  • Have you seen [this tutorial](http://bost.ocks.org/mike/constancy/)? – Lars Kotthoff May 29 '15 at 23:02
  • I tried providing a key function, i used a combination of both sex and state (survived or perished) and it didn't work out. So is there another workaround ? – hshihab May 30 '15 at 09:25
  • Well this wouldn't be a workaround, but solving the solution properly :) I would encourage you to provide a complete working example that people can modify, you're much more likely to get an answer that way. – Lars Kotthoff May 30 '15 at 15:59
  • Ok, i edited my question and added a link to a working example at codepen. Check it and tell me if you need more clarifications – hshihab May 31 '15 at 07:44
  • 1
    Ah ok, looks like the problem is that the title is only appended the first time, not updated. [This](http://codepen.io/anon/pen/LVxJPK) should do what you want. – Lars Kotthoff May 31 '15 at 18:31
  • Wow, You really saved me there man. Thanks a lot ! A really simple but elegant solution. I think what that tells me is that i have a lot to learn about d3. – hshihab Jun 01 '15 at 10:01

1 Answers1

0

As @Lars Kotthoff pointed out in the comments, the last line in the transition function should be changed to:

cellEnter.append("title");
cellUpdate.select("title")
  .text(function(d) {
    return d.children ? null : title(d);
  });
hshihab
  • 416
  • 5
  • 16