0

Any tips on how would I go about producing a stacked bar chart with multiple levels?

Similar to having floated divs that slip underneath. But I understand that svg doesn't have the concept of floating, so something more rigid based upon the svg width.

I've just finished "interactive data visualisations" book, which is great but I think I'm hitting on an advanced topic and I've had no luck in the d3 documentation so far.

Stacked bar chat with one line of stacked bar charts, followed by another line underneath

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
  • Could you simply have several stacked bar charts? – Lars Kotthoff Nov 20 '13 at 11:26
  • I was thinking that, but would I loose the benefit of the charts being "one" for enter(), exit(), transitions etc? – Alex KeySmith Nov 20 '13 at 11:27
  • Not necessarily. Depends on what exactly you want to show with these multiple charts. – Lars Kotthoff Nov 20 '13 at 11:32
  • Interesting point, the data as a whole is pretty much related they are siblings as part of a hierarchy. So if an animation were to occur I'd like it to effect not just one level but all. – Alex KeySmith Nov 20 '13 at 11:34
  • You can easily pass the changed data to all charts. It might help if you could provide some code that shows what you're trying to do. – Lars Kotthoff Nov 20 '13 at 11:36
  • It's really early stages at the moment, I'm just seeing which direction I should go in, so I don't really have any code. I'm researching if there is a d3.js approach that I'm missing before digging into more generic JS approaches. But thanks for the help, perhaps a solution outside of d3 could be simpler than getting d3 to do the layouts. – Alex KeySmith Nov 20 '13 at 11:39
  • 1
    It sounds to me like multiple stacked bar charts would be a suitable solution for what you're trying to do. – Lars Kotthoff Nov 20 '13 at 11:42
  • Cool, thanks Lars for the help. – Alex KeySmith Nov 20 '13 at 11:54
  • I'm hoping the widths of the charts would be relative on an additional property, as sort of hybrid stacked bar chart treemap. I'll update my question with additional details as I get there. – Alex KeySmith Nov 20 '13 at 12:12

1 Answers1

0

I think I may of come up with the solution, or at least the direction.

This example: http://bl.ocks.org/mbostock/3888852 it is of pie charts but the principle is the same.

It shows that it can be separate diagrams i.e. separate svg elements. However they are still drawn out in one go with d3.js treating it as one big diagram.

I can then use normal css to lay it out, e.g. display:inline-block.

Thanks Lars for the indication that multiple charts would do it.

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152