Converted to simple squares.

<!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
        var shape = scene.append("x3d:transform")
                .attr("translation",location.replace("D",(scale.range()[0]+scale.range()[1])/2))
                .append("x3d:shape");

shape.append('x3d:appearance')
                .append('x3d:material')
                .attr("diffuseColor", function(){ return ".5 .5 .5"; });

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);

var billboard = ticks
                .append("x3d:billboard").append("x3d:shape");

billboard.append('x3d:appearance')
                .append('x3d:material')
                .attr("diffuseColor", function(){ return ".5 .5 .5"; });

billboard
                .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(100).map(function() { return {x:Math.random()*100,y:Math.random()*100,z:Math.random()*100}}))

datapoints.exit().remove()  // Remove any excess datapoints, if needed

var shape = datapoints.enter()          // Draw a box for each new datapoint
                .append("x3d:transform")
                .attr('scale', '.05 .05 .05')
                .attr("class","datapoints")
                .append("x3d:shape")
                .attr('onclick', 'alert("click")');

shape.append('x3d:appearance')
                .append('x3d:material')
                .attr("diffuseColor", function(){ return Math.random()+' '+Math.random()+" "+Math.random(); });

//        shape.append("x3d:box")
//                .attr("size", "0.2 0.2 0.2");
        shape.append("x3d:indexedFaceSet")
                .attr("coordIndex", "0 1 2 -1  2 3 0 -1")
                .attr('solid', 'false')
                .append("x3d:coordinate")
                .attr("point", "-1 -1 0,  1 -1 0,  1 1 0,  -1 1 0")

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