I am looking for a graph that has 3 dimensions (x, y and z) and uses D3.js.
Please tell me if there is any data visualization site where I can find such a chart, or is there on d3js.org site itself where I could not find it.
I have the opportunity to give a tick to a new answer, in which there will be my own examples with a code, on any of the topics covered in the topic, not a copy-paste of course
Three-dimensional scatterplots, references to which VividD and Lars Kotthoff are given, are probably the best example of what you are asking, but I am going to assume that perhaps you are asking the wrong question.
Attempting to simulate three spatial dimensions on a flat screen will always be imperfect and difficult to read data.
However, in D3 very easy to display three different data dimensions. Suppose you use horizontal and vertical layouts for your two variable data, and then size, shape, color, or shading for your third variable.
If all three of your variable data are best represented by continuous numbers, then it is best to use a bubble scatter chart, where your three display dimensions are horizontal position, vertical position and bubble size.
Bubble Scatterplot - click for original
You said that your three dimensions are Customer , Product and content . I don’t know how important content (number or category), but I’m pretty sure that Customer and Product are categories.
Here is an example where two categorical dimensions are used. To arrange a table, each cell in the table contains a circle, measured by a third, numeric dimension.
If your third variable is a category, you can use the form to specify which type of “content” (if any) corresponds to each pair of “customer” and “product”:
Here is another application where the third dimension is shown in color, not size. Colors represent a continuous variable, but you can easily select a set of highly contrasting colors to represent categories:
Of course, a simple old stacked bar graph is another way to show two categories and a numeric value:
And you do not need to dwell on three variable data. If two of the variable data are categories or numbers that you do not mind grouping into categories, you can plot the four variables using the “multiple multiples” method, where you will create a table representing categorical variables, and then repeat the graph two other variables inside each table cells
Like here:
Or this application (where the week and day of the week are the two dimensions of the data, and the category / amount is the other two):
I hope this gave you a lot of ideas ...
Answer source: @AmeliaBR
Answer source : @aturc
Here is one example that resembles what you are looking for:
Notice that this example uses X3DOM , a rather new attempt to standardize 3D rendering in HTML, which is not supported by all browsers.
Look also for X3DOM in the Google D3 group.
Showing GPS tracks in 3D with three.js and d3.js
Overall, D3.js more focused on data visualization than on scientific visualization, which means that it does not have broad support for displaying three-dimensional space (except for displaying geographical 3D data, which D3.js supports in an excellent way, but it doesn’t exactly what is needed).
For example (this example is not directly related to your examples, it is just for clarification): D3 provides an algorithm for 2D drawing of trees, but does not provide any device for 3D placement of trees and the subsequent visualization of such placement on a 2D screen.
If you are not limited to D3.js, perhaps you could achieve the same goals more easily and quickly with other libraries written specifically for purposes similar to yours. For example, you can use Pre3D
Look at this example not using X3DOM , just rendering HTML on a 2D canvas. I think that the animation is the rotation of its three-dimensional graphs, smoother than in the first example of D3/X3DOM .
Answer source : @VividD
Source: https://ru.stackoverflow.com/questions/967867/
All Articles