JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
   <div id="overview">
</div>

JavaScript

function getRandomData() {
    var data = [];
    for (var i=0; i<4; i++) {
        data[i] = Math.floor(Math.random()*20);   
    }
    return(data);
}

function new_scale(svg, data) {
    var width = d3.select("svg").attr("width");
    var extent = d3.extent(data, function(d){return d});
    console.log("extent: " + extent);
    var xscale = d3.scale.linear().range([0, width]).domain([0,extent[1]]);
    return xscale;
}

function initialize_overview(data) {
    var height = 250;
    var width  = 400;

    var vis = d3.select("#overview")
    .append("svg:svg")
    .attr("width", width + 20)
    .attr("height", height + 10)
    .append("svg:g")
    .attr("transform", "translate(20,60)");

    var xscale = new_scale(vis, data);                                             
                                             
    vis.selectAll("rect")
    .data(data)
    .enter()
    .append("svg:rect")
    .attr("x", 10)
    .attr("y", function(d,i) {return i*20})
    .attr("height", 20)
    .attr("width", function(d,i) {return xscale(d)});
                                             
    return vis;    
}

function live_overview(svg, data) {
    console.log("DATA: " + data);
     var xscale = new_scale(svg, data);
     var r = svg.selectAll("rect")
    .data(data)
    .transition()
    .duration(1000)
    .attr("width", function(d) { return xscale(d); });
 
}

// Initialize the view
var data = getRandomData();
var svg = initialize_overview(data);
console.log(svg);

setInterval(function() {
    live_overview(svg, getRandomData());
}, 1500);