Pivot Table or "Slice and Dice" visualisation

2,518 views
Skip to first unread message

Adam G

unread,
Feb 12, 2012, 12:20:05 PM2/12/12
to d3-js
Hi All

I'm a little new to d3 but loving it already! I'm building a dynamic
pivot table / slice and dice visualisation that takes a raw table of
data and allows the user to selected a way to "slice" it and make nice
transitions between slices. You can see what I mean with my working
prototype in gist https://gist.github.com/1797418, viewable with the
fantastic bl.ocks.org: http://bl.ocks.org/1797418.

My first question is, am I going about it the right way? Rather than
biding the raw data to the visualisation I am "packing" the raw data
in to positioning data first and then binding that to the
visualisation.

My second question is how should I handel the case where multiple
values sit in the same cell of the pivot table. At the moment they
just cover each other up. The two options I can see are, either
enhance my packing algorithm to offset them and size them within the
cell. Alternatively use the hierarchical approach I have seen with d3
Subselections. Organise the data into cells (with the first level of
selection) and then within the cells (with the second level of
selection).

I prefer the subselection approach but I've got a feeling it will make
my transitions between slices difficult because each slice is
essentially a different hierarchy of the original data and I'm not
sure if transitioning a data item from one subselection to another is
possible or easy.

Many thanks in advance!

Regards
Adam

Shawn T

unread,
Aug 31, 2012, 5:03:14 PM8/31/12
to d3...@googlegroups.com
Any progress on this?
I'm thinking that getting the data elements to layout relative to each other might be a way to go also.  E.g. multiple elements in the same data category place themselves sequentially lower, the first element in row i places itself below the lowest element in row i-1.  A few good rules might handle it, I'm not sure how to write that in a good functional manner though.

Destiny Architect

unread,
Oct 9, 2013, 5:12:00 AM10/9/13
to d3...@googlegroups.com
MUE8ZC: I would very much like a pivot table rendered/displayed via D3.js , and this looks like a great start including some quite entertaining animations, so:
  1. Yes, any progress on this? And what are the plans for it?
  2. Note http://bl.ocks.org/aogriffiths/1797418 , at least for me in latest Chrome doesn't work: at least for me, in latest Chrome & Firefox, displays a big blank rectangle; only when I click "Open in a new window." does it display (in a new page) the correct graphic output.
  3. BTW, I found this as the first find of http://google.com/search?q=D3+OR+D3.js+pivot ,and haven't yet found any other solution codings except this..

Chris Viau

unread,
Oct 9, 2013, 5:36:27 AM10/9/13
to d3...@googlegroups.com
When an example is broken on bl.ocks, it's usually because the libraries were loaded from a non-official url, which is easy to spot if you look in the console. Here is a working version: http://bl.ocks.org/biovisualize/6898561

The best pivot table implementation I know is https://github.com/nicolaskruchten/pivottable You can easily change renderer and there is a D3 example. 

Chris
Reply all
Reply to author
Forward
0 new messages