JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<div id="legend">
  <svg with=500 height=30>
        <defs>
            <linearGradient id="Gradient">
                <stop offset="0%" stop-color="red" />
                <stop offset="100%" stop-color="green" />
            </lineargradient>
        </defs>
        <rect fill="url(#Gradient)" stroke="black" x="0" y="0" width="300" height="30" />
        <text fill="white" x="5" y="15" dy=".35em">0%</text>
        <text fill="white" x="295" y="15" dy=".35em" text-anchor="end">100%</text>
    </svg>
</div>
<input type="button" onclick="update()" value="Update" />
<div id="chart"></div>

CSS

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

var margin = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 30
  },
  width = 500 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var colorscale = d3.scale.linear()
  .domain([0, 1])
  .range(["red", "green"]);
var symbol = d3.svg.symbol().type("cross").size(250);
var percent = d3.format(".1%f");

function update() {
  //generate random data
  var data = [];
  for (var i = 0; i < 15; i++) {
    data.push(Math.random());
  }
  //add-update symbols
  var symbols = svg.selectAll("path")
    .data(data);
  symbols.enter().append("path")
    .attr("transform", function(d, i) {
      return "translate(0," + (25 * i + 10) + ")";
    })
    .attr("d", symbol)
    .style("stroke", "black");
  symbols.transition().duration(1000)
    .style("fill", function(d) {
      return colorscale(d);
    });
  //add-update text
  var text = svg.selectAll("text")
    .data(data);
  text.enter().append("text")
    .attr("transform", function(d, i) {
      return "translate(25," + (25 * i + 10) + ")";
    })
    .attr("dy", ".35em");
  text.text(function(d) {
    return percent(d);
  });
}
update();