-
-
Save sressler/3152017 to your computer and use it in GitHub Desktop.
Using D3 to create and animate X3D - with x3dom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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