Skip to content

Instantly share code, notes, and snippets.

@sressler
Forked from ZJONSSON/index.html
Created July 20, 2012 17:26
Show Gist options
  • Save sressler/3152017 to your computer and use it in GitHub Desktop.
Save sressler/3152017 to your computer and use it in GitHub Desktop.
Using D3 to create and animate X3D - with x3dom
<!DOCTYPE html>
<html>
<head>
<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>
<h1>a modification of using D3 with X3D via X3DOM</h1>
<p>This version uses spheres instead of boxes, there are less spheres and they are colored with random colors. Of interest is the correct creation of the <shape><appearance><material> tag hierarchy which allows the color modifications of the spheres to work. Totally based on https://gist.github.com/1291667 from ZJONSSON (whoever that is ;-)</p>
</body>
<!-- Based entirely on ZJONSSON amazing code -->
<script type="text/javascript">
function plotAxis(scale,location,size,numTicks) {
// the axis line
scene.append("x3d:transform")
.attr("translation",location.replace("D",(scale.range()[0]+scale.range()[1])/2))
.append("x3d:shape")
.append("x3d:box")
.attr("size",location.replace(/0/g,size).replace("D",scale.range()[1]))
// ticks along the axis
ticks=scene.selectAll("abcd").data(scale.ticks(numTicks))
.enter()
.append("x3d:transform")
.attr("translation", function(d) { return location.replace("D",scale(d))})
ticks
.append("x3d:shape")
.append("x3d:box")
.attr("size",size*3+" "+size*3+" "+size*3);
ticks
.append("x3d:billboard").append("x3d:shape")
.append("x3d:text")
.attr("string",scale.tickFormat(10))
.attr("solid","true")
.append("x3d:fontstyle").attr("size",25).attr("justify","MIDDLE" )
}
function plotData() {
datapoints=datapoints.data(d3.range(10).map(function() { return {x:Math.random()*100,y:Math.random()*100,z:Math.random()*100}}))
datapoints.exit().remove() // Remove any excess datapoints, if needed
mydata=datapoints.enter() // Draw a sphere for each new datapoint and create shape -> appearance hierarchy
.append("x3d:transform")
.attr("class","datapoints")
.append("x3d:shape")
mydata.append("x3d:appearance").append("x3d:material").attr("diffuseColor", function() { return Math.random() + ' ' + Math.random() + ' ' + Math.random()});
mydata.append("x3d:sphere")
.attr("radius","0.3")
datapoints.transition() // Move each box to the right point location
.duration(2000)
.attr("translation",function(d) { return x(d.x)+" "+y(d.y)+" "+z(d.z)})
}
// Create the x3d scene
d3.ns.prefix.x3da="http://www.web3d.org/specifications/x3d-namespace"
x3d = d3.select("body")
.append("x3d:x3d")
.attr("height","500px")
.attr("width","100%");
scene = x3d.append("x3d:scene")
// set up the axes
var x = d3.scale.linear().domain([0, 100]).range([0, 10]),
y = d3.scale.linear().domain([0, 100]).range([0, 10]),
z = d3.scale.linear().domain([0, 100]).range([0, 10]);
plotAxis(x,"D 0 0",0.01,10)
plotAxis(y,"0 D 0",0.01,10)
plotAxis(z,"0 0 D",0.01,10)
// and plot random data every 2500 ms
var datapoints=scene.selectAll(".datapoints");
plotData();
setInterval(plotData,2500);
// zoom out the viewport
setTimeout(function() {x3d[0][0].runtime.showAll()},50);
</SCRIPT>
</html>
@sressler
Copy link
Author

This modification of your file uses spheres and modifies the color of the spheres adding in the correct hierarchy (hope this didn't screw up your GIST i'm a github newbie ;-)

@AshishBarde
Copy link

I am trying to make stack bar chart with 3D look using d3.js but its not working yet... so can u help mi out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment