Skip to content

Instantly share code, notes, and snippets.

@camio
Last active October 29, 2018 21:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save camio/5087116 to your computer and use it in GitHub Desktop.
Save camio/5087116 to your computer and use it in GitHub Desktop.
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.

Notes

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.

Links

Authors

David Sankel & Harry Voorhees Stellar Science

<!DOCTYPE html >
<html >
<head>
<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="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
<script>
function randomData() {
return d3.range(6).map( function() { return Math.random()*20; } )
};
x3d = d3.select("body")
.append("x3d")
.attr( "height", "400px" )
.attr( "width", "400px" )
;
var scene = x3d.append("scene");
scene.append("viewpoint")
.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
.enter()
.append( "transform" )
.append( "shape" )
;
// Enter and update
shapes.transition()
.attr("translation", function(d,i) { return i*1.5 + " 0.0 " + d/2.0; } )
.attr("scale", function(d) { return "1.0 1.0 " + d; } )
;
shapesEnter
.append("appearance")
.append("material")
.attr("diffuseColor", "steelblue" );
shapesEnter.append( "box" )
.attr( "size", "1.0 1.0 1.0" );
}
refresh( randomData() )
setInterval(
function(){
refresh( randomData() );
},
2500);
</script>
</body>
</html>
@jamesleesaunders
Copy link

jamesleesaunders 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’:
https://github.com/jamesleesaunders/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