Using D3 to create and animate X3D - with x3dom

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="https://x3dom.org/x3dom/example/x3dom.js"></script>
</head>

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",0.6).attr("justify","MIDDLE" )
                    
}

function plotData() {
    datapoints=datapoints.data(d3.range(50).map(function() { return {x:Math.random()*100,y:Math.random()*100,z:Math.random()*100}}))
        
    datapoints.exit().remove()  // Remove any excess datapoints, if needed
    
    datapoints.enter()          // Draw a box for each new datapoint
        .append("x3d:transform")
            .attr("class","datapoints")
            .append("x3d:shape").attr("diffuseColor",function() { return Math.random()+" "+Math.random()+" "+Math.random();})
                .append("x3d:box")
                    .attr("size","0.2 0.2 0.2")
                    
        
    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="https://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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://x3dom.org/x3dom/example/x3dom.js to a secure url

https://mbostock.github.com/d3/d3.js

https://x3dom.org/x3dom/example/x3dom.js