3 dimension (X, Y and Z) graph using D3.js

Kish picture Kish · Jan 10, 2014 · Viewed 60.7k times · Source

I am searching for a graph which has 3 dimensions (x, y, and z) and uses D3.js. Please let me know if there are any data visualization site where I can find such graph or if there is one on d3js.org that I have missed out somehow.

Answer

AmeliaBR picture AmeliaBR · Jan 12, 2014

The 3D scatterplot linked to by VividD and Lars Kotthoff is probably the best example of what you're asking for, but I'm going to be contrary and suggest that maybe you're asking the wrong question.

Trying to simulate three spatial dimensions on a flat screen will always be imperfect and make it difficult to read the data. However, it is very easy to graph three different data dimensions in D3. You use the horizontal and vertical layouts for two of your data variables, and then size, shape, color or shading for your third variable.

If all three of your data variables are best represented by continuous numbers, then your best approach is to use a bubble-scatterplot, where your three display dimensions are horizontal positions, vertical position, and bubble size.

Here's an example the also uses the online interactive component to add a fourth dimension shown via motion:
Bubble ScatterplotBubble Scatterplot -- click for original

You said that your three dimensions are Customer, Product and content. I don't know what kind of value "content" is (number or category), but I'm pretty sure that "customer" and "product" are categories.

Here's an example where two categorical dimensions are used to lay out a table, then each cell of the table contains a circle sized by the third, numerical dimension. If your third variable is a category, you could use a shape to indicate which "content" type (if any) goes with each pairing of "customer" and "product":
Bubble Matrix
Bubble Matrix -- click for original

Here's another one, where the third dimension is shown by colour instead of by size. The colours represent a continuous variable, but you could easily choose a set of high-contrast colours to represent categories:
Colour MatrixColour Matrix -- click for original

Of course, a plain-old stacked bar chart is another way to show two categories and a numerical quantity:
Stacked Bar Graphs Stacked Bar Graphs -- click for original

And you don't have to stop at three data variables. If two of the data variables are either categories or numbers that you don't mind grouping into categories, you can graph four variables with a "small multiple" approach, where you create a table representing the categorical variables and then repeat a graph of the other two variables inside each table cell.

Like this:
Scatterplot MatrixScatterplot Matrix -- click for original

Or this (where week and day-of-week are two dimensions of the data, and category/amount are the other two):
Pie Chart Small Multiples
Pie Chart Small Multiples -- click for original

I hope that gave you lots of ideas...