JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-3d/build/d3-3d.min.js"></script>
<body>
<svg width="960" height="500"></svg>
<style type="text/css">
button {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
<button>update</button>
<script>
    var origin = [480, 300], scale = 20, j = 7, cubesData = [], alpha = 0, beta = 0, startAngle = Math.PI/4;
    var svg    = d3.select('svg').append('g').call(d3.drag().on('drag', dragged).on('start', dragStart).on('end', dragEnd));
    var color  = d3.scaleOrdinal(d3.schemeCategory20);
    var cubesGroup = svg.append('g').attr('class', 'cubes');
    var mx, my, mouseX, mouseY;

    var cubes3D = d3._3d()
        .shape('CUBE')
        .x(function(d){ return d.x; })
        .y(function(d){ return d.y; })
        .z(function(d){ return d.z; })
        .rotateY( startAngle)
        .rotateX(-startAngle)
        .origin(origin)
        .scale(scale);

    function processData(data, tt){

        /* --------- CUBES ---------*/

        var cubes = cubesGroup.selectAll('g.cube').data(data, function(d){ return d.id });

        var ce = cubes
            .enter()
            .append('g')
            .attr('class', 'cube')
            .attr('fill', function(d){ return color(d.id); })
            .attr('stroke', function(d){ return d3.color(color(d.id)).darker(2); })
            .merge(cubes)
            .sort(cubes3D.sort);

        cubes.exit().remove();

        /* --------- FACES ---------*/

        var faces = cubes.merge(ce).selectAll('path.face').data(function(d){ return d.faces; }, function(d){ return d.face; });

        faces.enter()
            .append('path')
            .attr('class', 'face')
            .attr('fill-opacity', 0.95)
            .classed('_3d', true)
            .merge(faces)
            .transition().duration(tt)
            .attr('d', cubes3D.draw);

        faces.exit().remove();

        /* --------- TEXT...