Skip to content

Instantly share code, notes, and snippets.

@camio camio/
Last active Oct 29, 2018

What would you like to do?
d3 with x3dom Demo

Here is a demonstration of integrating d3 and x3dom to create a 3d bar plot of dynamic data. This example demonstrates the power of the d3 approach -- using x3dom for 3d visualization is just as concise and conceptually simple as using svg for 2d graphics.

Use your mouse to change the viewing angle, pan, and zoom.


Figuring out the correct viewport position and orientation was challenging and involved a lot of matrix math. See the wikipedia page for rotation matrices for hints.



David Sankel & Harry Voorhees Stellar Science

<!DOCTYPE html >
<html >
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>d3 x3dom demo</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
function randomData() {
return d3.range(6).map( function() { return Math.random()*20; } )
x3d ="body")
.attr( "height", "400px" )
.attr( "width", "400px" )
var scene = x3d.append("scene");
.attr( "centerOfRotation", "3.75 0 10")
.attr( "position", "13.742265188709691 -27.453522975182366 16.816062840792625" )
.attr( "orientation", "0.962043810961999 0.1696342804961945 0.21376603254551874 1.379433089729343" )
function refresh( data ) {
shapes = scene.selectAll("transform").data( data );
shapesEnter = shapes
.append( "transform" )
.append( "shape" )
// Enter and update
.attr("translation", function(d,i) { return i*1.5 + " 0.0 " + d/2.0; } )
.attr("scale", function(d) { return "1.0 1.0 " + d; } )
.attr("diffuseColor", "steelblue" );
shapesEnter.append( "box" )
.attr( "size", "1.0 1.0 1.0" );
refresh( randomData() )
refresh( randomData() );

This comment has been minimized.

Copy link

commented Sep 27, 2018

Hi @camio I just wanted to reach out to say a huge thank you for your D3 X3DOM Bar Chart example.

I have been working on a D3 X3DOM library which encorporates elements of your bar chart example above into my library called ‘d3-x3dom’:

Out of courtesy, I also really wanted to check you are ok and ask for your blessing for me having encorporated parts of your code in the d3-x3dom library? I have added credit to you in the README.

If you have any questions or concerns please do not hesitate to ask. And, if you were interested, I would very much be honoured if you maybe wanted to contribute further to d3-x3dom!

All the best, J

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.