JSFiddle - React, Tailwind, and code Playground

by gorkem

HTML

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>bar</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
  </head>
<body>
  <div id="chart"></div>

JavaScript

var t = 1297110663, // start time (seconds since epoch)
    v = 70, // start value (subscribers)
    data = d3.range(33).map(next); // starting dataset
  
function next() {
    return {
        time: ++t,
          value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
    };
}

var w = 20,
    h = 80;
  
var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);
  
var y = d3.scale.linear()
       .domain([0, 100])
       .rangeRound([0, h]);

var chart = d3.select("#chart").append("svg")
     .attr("class", "chart")
     .attr("width", w * data.length - 1)
     .attr("height", h);

chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("x", function(d, i) { return x(i) - .5; })
     .attr("y", function(d) { return h - y(d.value) - .5; })
     .attr("width", w)
     .transition().delay(function (d,i){ return i * 300;}).duration(300)
     .attr("height", function(d) { return y(d.value); });