score:1

Stefan Nieke has been more recently doing some cool stuff too with his d3-3d plugin: https://bl.ocks.org/Niekes

score:6

It looks like a new example of something more properly speaking "3D" has come out. http://bl.ocks.org/supereggbert/aff58196188816576af0

And here is an adaptation I made:

score:7

Here is pure **javascript**+**svg** solution

```
let f = (x, z) => Math.cos(z/20)*20 + Math.sin(x/10)*10 + x/3*Math.atan2(z,x);
let cos = Math.cos, sin = Math.sin, xyz = 'xyz'.split(''),
k = 500, a1 = 0, a2 = 0, far = 300, p, w, h, a,
points = [], lines = [], s = 100;
for (var x = -s; x < s; x += 5)
for (var z = -s; z < s; z += 5)
points.push({x, z, r:2});
for (var i = 0; i < 6; i++) lines.push([
{x:-s, y:-s, z:-s, color:`hsl(${i*120},55%,55%)`, state:{}},
{x:i%3==0?s:-s, y:i%3==1?s:-s, z:i%3==2?s:-s, state:{}}
]);
points.forEach(d=>d.state={fill:`rgb(${d.x+s},${(d.y=f(d.x,d.z))+s},${d.z+s})`});
pointsGroup.innerHTML=points.map((d,i)=>`<circle ind="${i}"></circle>`).join('');
linesGroup.innerHTML=lines.map(d=>`<path stroke="${d[0].color}"></path>`).join('');
let circles = pointsGroup.querySelectorAll('circle');
let paths = linesGroup.querySelectorAll('path');
function project(p) {
let x = p.x*cos(a1) + p.z*sin(a1);
let z = p.z*cos(a1) - p.x*sin(a1);
let y = p.y*cos(a2) + z*sin(a2);
let d = z*cos(a2) - p.y*sin(a2) + far;
p.state.cx = (k/d)*x + w/2;
p.state.cy = (k/d)*y + h/2;
p.state.r = far/d*p.r;
}
function render() {
if (a) for (var i=0; i<3; i++)
xyz.forEach((c, j) => lines[i][0][c] = i==j ? -s : (lines[i][1]=a)[c]);
points.forEach(project);
points.sort((a, b) => a.state.r - b.state.r);
lines.forEach(line => line.forEach(project));
points.forEach((d, i) => Object.entries(d.state)
.forEach(e => circles[i].setAttribute(...e)));
lines.forEach((l, i) => paths[i].setAttribute('d',
`M${l[0].state.cx} ${l[0].state.cy} L${l[1].state.cx} ${l[1].state.cy}`));
}
let evt = (t, f) => addEventListener(t, e => render(f(e)));
evt('click', e => a = points[e.target.getAttribute('ind')])
evt('wheel', e => k *= 1 - Math.sign(e.deltaY)*0.1);
evt('mouseup', e => p = null);
evt('mousedown', e => p = {x: e.x, y: e.y, a1, a2});
evt('mousemove', e => p && (a1 = p.a1-(e.x-p.x)/100) + (a2 = p.a2-(e.y-p.y)/100));
evt('resize', e=>svg.setAttribute('viewBox',`0 0 ${w=innerWidth} ${h=innerHeight}`));
dispatchEvent(new Event('resize'));
```

`<svg id="svg" stroke-width="2"><g id="pointsGroup"></g><g id="linesGroup"></g></svg>`

score:11

The best examples I could find (which were both incredibly simple) were:

**Highcharts** (3d scatter)

http://www.highcharts.com/demo/3d-scatter-draggable

**Vis.js** (various 3d options such as bar and dot)

Examples https://ww3.arb.ca.gov/ei/tools/lib/vis/examples/graph3d/playground/

Documentation https://ww3.arb.ca.gov/ei/tools/lib/vis/docs/graph3d.html

Simply supply x, y and z co-ordinates, set the config how you like and you're laughing.

score:11

I created d3-3d, a d3-plugin which helps you to visualize your 3d-data. Hopefully this helps to achieve your goal.

score:44

One example that a kind of resembles what you seek is:

Be aware that this example uses X3DOM, a fairly new attempt to standardize 3D rendering in HTML, that is not supported by all browsers.

Some additional test examples on using D3.js with X3DOM:

Search also for X3DOM on D3 Google group.

Another potentially interesting approach would be using D3.js and Three.js, like here:

Showing GPS tracks in 3D with three.js and d3.js

In general, D3.js is oriented more towards data visualization than scientific visualization, this means it doesn't have extensive support for displaying 3D space (with an exception of displaying geographic 3D data, which D3.js supports in an excellent way, but this is not what need).

For example (this example is not related directly to your examples, it's just for explanation): D3 provides algorithm for 2D drawing of trees, but doesn't provide any apparatus for 3D placement of trees and subsequent rendering such placement on a 2D screen.

If you are not limited to D3.js, perhaps you could achieve same goals easier and faster with other libraries, written specifically for purposes similar to yours. For example, you can use Pre3D. Take a look at this example. Pre3D doesn't use X3DOM, just plain HTML rendering on 2D canvas. I think it animation (rotation) of its 3D graphs are smoother that those in first D3/X3DOM example.

score:73

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 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":

_{(source: fastly.net)}

Bubble Matrix -- click for original](http://neuralengr.com/asifr/journals/)

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 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 -- 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 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 -- click for original

**I hope that gave you lots of ideas...**

Source: stackoverflow.com

#### Related Query

- 3 dimension (X, Y and Z) graph using D3.js
- Simple graph of nodes and links without using force layout
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- Transitions using line graph and Rickshaw
- d3.js - stacked graphs that are both zoomed in and out/scrolled when using scrollwheel/drag on either graph
- How do I make a d3.js force directed graph interactive using ajax and python?
- dc.js Using two reducers without a simple dimension and second grouping stage
- How to show edges in force directed graph using d3.js and Angular?
- Box plot with dual dimension and dual x-axis using dc.js
- Line graph using integers on y axis and strings on x axis
- D3.js network graph using force-directed layout and rectangles for nodes
- Axis Range and Domain issue on bar graph using D3
- d3 real time graph ploting using mysql and streaming sensor data
- D3 bar graph looking different when using numbers array and json elements array
- How to count events using year and plot line graph in d3.js v3
- Not able to create graph links/edges using networkx and d3
- Updating and Transitioning Data on graph using D3 and Socket
- Create a Line graph with Dots and Labels using 2 different data sets
- Importing csv, using D3.js and Javascript for a Line Graph
- The bar in the d3 graph is going out of range and i am not able to select it using a brush
- How to Add X and Y axis in the pre existing graph using D3
- How to create an interactive graph network of resources, diseases, triggers and treatments using JavaScript
- Highlight selected node, its links, and its children in a D3 force directed graph
- Add text label to d3 node in Force directed Graph and resize on hover
- d3 update data and update graph
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Properly display bin width in barChart using dc.js and crossfilter.js
- "Stuttering" drag when using d3.behavior.drag() and transform
- d3.js change color and size on line graph dot on mouseover
- Directed acyclic graph using d3.js without DOT

#### More Query from same tag

- Exiting unused nodes in d3 force directed graph
- D3- multiple onclick events
- Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart
- Unable to get d3.js data.join and key function working when selecting line
- Filtering out just one series in chartSeries in react-d3
- Clip path at center produce unexpected behavior with draggable images
- d3.js: efficient filtering of large selection
- Add html content with line break inside d3 circle
- D3 Spinning Globe: trouble incorporating zoom function
- d3.timeWeek ,1st day of the week
- how to use .scale and .translate with d3.js?
- Returning numbers from d3.random
- Updating Nested Data
- d3.js function to filter the interactive chart
- D3.js spawn new circles at fixed time intervals with forceSimulation
- Need help coloring in countries from an array, leave rest default color
- How do I display a d3.js circle pack graph with RoR?
- tooltip on category axis in c3.js chart?
- adapting d3 sequences sunburst example to new data & getting js error
- show div and hide other ones - d3.js
- Nvd3js bullet chart : Chart.update does not update the chart
- Basic Help for Geojson with d3
- How to get abbreviated month name as X-axis in Linechart in DC.js
- How do I position tooltips to follow a data point to which it is attached in D3?
- How to change JSON data to Javascript array of objects with D3
- Bind external svg to data
- grunt build removes d3.js and google fonts from application
- Loading D3 from a local variable
- how to get screen coords using projection with a multipolygon in d3
- Append HTML to existing tooltip in d3