JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id=progress></div>

JavaScript

addBar(0.1);
addBar(0.2);
addBar(0.5);
addBar(0.8);
addBar(1.0);

function addBar(value) {
  var colorScale = d3.scale.linear()
  .domain([0, 1])
  .range(['#ffd92f', '#4daf4a']);

  var container = d3.select("#progress").append("div");
  container
    .style('position', 'relative')
    .style('width', '200px')
    .style('height', '20px');

  var background = container.append('div')
  background
    .style('width', '100%')
    .style('background', '#eeeeee')
    .style('height', '100%')
    .style('position', 'absolute')
    .style('top', '0px')
    .style('left', '0px');

  var foreground = container.append('div')
  foreground
    .style('width', (value * 100) + '%')
    .style('background', colorScale(value))
    // .style('background', function () {
      // if (value <= 0.5) {
      // 	return 'yellow';
      // }
      // return 'green';
    // })
    .style('height', '100%')
    .style('position', 'absolute')
    .style('top', '0px')
    .style('left', '0px');
  }