JSFiddle - React, Tailwind, and code Playground

by Johnny Lee

HTML

<div id="divEntry">
  <svg id="mySvg" width="340" height="200">
  </svg>
</div>

JavaScript

var svg = d3.select('#mySvg')

function genRandomInteger(min, max){ // Gen random integer in range
  if (min > max) // 防呆
    max = min+10;
  return Math.floor(Math.random() * (max - min + 1) ) + min;
};

function right(str, num) { // Return the right most chars
  if (str===undefined) return ''; // 防呆
  else
    return str.substring(str.toString().trim().length-num, str.length)
}

function run() {
  let data = [ 50, 43, 120, 87, 99, 167, 142, 8, 155 ],
    maxData = d3.max(data);
  let padLeft = 10,
    padDown = 10
    step = 35,
    barWidth = 30,
    height = d3.max(data)+20,
    width = data.length * barWidth + 10,
    randomB = right('0'+genRandomInteger(0,215).toString(16), 2),
    randomR = right('0'+genRandomInteger(0,215).toString(16), 2);
    
  let rect = svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('fill', function(d) { // Fill with random color
      return '#' + randomR +
      	right('0' + (maxData-d).toString(16), 2) + randomB })
    .attr('stroke', 'black')
    .attr('x', function(d,i) {
      return padLeft + i * step;
    })
    .attr('y', function(d,i) {
      return height - padDown - d;
    })
    .attr('width', barWidth)
    .attr('height', function(d) { return d; })
    .transition()
    .duration(2000)
    .delay(500)
    .attr('fill', function() { // Morph bars to blue
      return 'blue';
    });
}

run();