Instantly share code, notes, and snippets.

@camio /README.md
Last active Oct 29, 2018

Embed
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.

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

This comment has been minimized.

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