JSFiddle - React, Tailwind, and code Playground

by Jeff Wen

HTML

<button id="change" onclick()>Click me</button>
<button id="reset" onclick()>Reset me</button>

<div id='viz_container'>

</div>

CSS

svg {
    border: 1px solid gray;
}

g.g1 rect {
    stroke: gray;
    fill: dodgerblue;
}

g.g2 rect {
    stroke: gray;
    fill: tomato;
}

JavaScript

var h = 400;
var w = 500;
var bar_h = 100;
var bar_w = 50;
var bar_gap = 25;

// function chaining
var svg = d3.select('#viz_container')
    .append('svg')
    .attr('height', h)
    .attr('width', w);

var svg_1 = d3.select('#viz_container')
    .append('svg')
    .attr('height', h)
    .attr('width', w);

/*var g1 = svg.append('g')
    .attr('class', 'g1');

var g2 = svg.append('g')
    .attr('class', 'g2')
    .attr('transform', 'translate(75,0)');
*/

var data = [{
    'class': 'g1',
    'values': [100, 200, 300]
}, {
    'class': 'g2',
    'values': [350, 250, 150]
}];

var gs = svg.selectAll('g')
    .data(data)
    .enter().append('g')
    .attr('class', function(d) {
        return d.class
    })
    .attr('transform', function(d, i) {
        trans = bar_gap + i * 3 * (bar_gap + bar_w);
        return 'translate(' + trans + ',0)';
    });

var bars = gs.selectAll('rect')
    .data(function(d) {
        return d.values
    })
    .enter().append('rect')
    .attr('width', bar_w)
    .attr('height', function(d) {
        return d;
    })
    .attr('y', function(d) {
        return h - d;
    })
    .attr('x', function(d, i) {
        return i * (bar_gap + bar_w);
    })
    /*.transition()
    .attr('y', function(d) {
        return (0);
    })
    .duration(5000);*/

var gs = svg_1.selectAll('g')
    .data(data)
    .enter().append('g')
    .attr('class', function(d) {
        return d.class
    })
    .attr('transform', function(d, i) {
        trans = bar_gap + i * (bar_gap + bar_w);
        return 'translate(' + trans + ',0)';
    });

var bars = gs.selectAll('rect')
    .data(function(d) {
        return d.values
    })
    .enter().append('rect')
    .attr('width', bar_w)
    .attr('height', function(d) {
        return d;
    })
    .attr('y', function(d) {
        return h - d;
    })
    .attr('x', function(d, i) {
        return 2 * i * (bar_gap + bar_w);
    });

d3.select("#change").on("click", function() {
   ...