d3 with x3dom Demo

_.md

[ Launch: d3 with x3dom Demo ] 10218635 by dmann99

config.json

{"description":"d3 with x3dom Demo","endpoint":"","display":"div","public":true,"require":[{"name":"x3Dom","url":"http://x3dom.org/x3dom/example/x3dom.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/V8jr8Pk.png"}

index.html

<div id="viz">Hi! Scroll this pane down to see stuff!</div>

inlet.js

// http://bl.ocks.org/camio/5087116

function randomData() {
  return d3.range(6).map( function() { return Math.random()*20; } )
}

x3d = d3.select("#VIZ")
        .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
);