JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
<div id="svg"></div>

JavaScript

var data = [
    {label : "water", value : 20},
    {label : "energy", value : -20}
];
var barWidth = 40;
var width = barWidth * data.length;
var height = 200;

var yScale = d3.scale.linear()
    .domain([-30,30])
    .rangeRound([-200,200]);
            
var x = d3.scale.linear().domain([0, data.length]).rangeRound([0, width]);

var svg = d3.selectAll("#svg")
            .append("svg:svg")
            .attr("width",width)
            .attr("height", 400);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("svg:rect")
    .attr("x", function(d,i){ return x(i); })
    .attr("y", function(datum) { return (datum.value > 0) ? height - yScale(datum.value): height; })
    .attr("height", function(datum) { return Math.abs(yScale(datum.value)); })
    .attr("width", barWidth);


function update(){
    svg.selectAll("rect")
        .data(data)
        .transition()
        .ease("cubic-in")
        .duration(500)
        .attr("y", height - 0.5)
        .attr("height", 0)
    setTimeout(function(){
        svg.selectAll("rect")
        .transition()
        .ease("cubic-out")
        .duration(500)
        .attr("y", function(datum) { return (datum.value > 0) ? height - yScale(datum.value): height; })
        .attr("height", function(d) { return Math.abs(yScale(d.value)); });
    }, 500);
}

setInterval(function(){
    for (var i = 0; i < data.length; i++){
        data[i].value = data[i].value*-1;
    }
    update();
}, 2000);