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>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500">
        <image xlink:href="http://tehlemonsmith.com/wp-content/uploads/2011/06/35-Thousand-Scribbly-Lines.gif" x="0" y="0" width="500" height="500" />
    </pattern>
</defs>

CSS

rect {
    stroke : black;
    fill: url(#img1);
}
svg {
    position: relative;
}

JavaScript

var data = [
    {label : "water", value : 20},
    {label : "energy", value : -10},
    {label : "carnivores", value : 12},
    {label : "herbivores", value : -3},
    {label : "soil health", value : 6}
];
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()
        .duration(1000)
        .attr("y", function(datum) { return (datum.value > 0) ? height - yScale(datum.value): height; })
        .attr("height", function(d) { return Math.abs(yScale(d.value)); });
}

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