JSFiddle - React, Tailwind, and code Playground

by mariocatch

HTML

<body>

</body>

JavaScript

var w = 300;
var h = 120;
var padding = 2;

var data = [5, 10, 13, 19, 21, 25, 11, 25, 22, 18, 7]

function colorPicker(v) {
  return v <= 20 ? '#666' : '#F03'
}

var svg = d3.select('body')
  .append('svg')
  .attr('width', w)
  .attr('height', h);

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr({
    x: function(d, i) {
      return i * (w / data.length);
    },
    y: function(d, i) {
      return h - d * 4;
    },
    height: function(d, i) {
      return d * 4;
    },
    width: w / data.length - padding,
    fill: function(d) {
      return colorPicker(d);
    }
  });

svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .text(function(d) {
    return d;
  })
  .attr({
    "text-anchor": "middle",
    x: function(d, i) {
      return i * (w / data.length) + (w/data.length - padding) / 2;
    },
    y: function(d, i) {
      return h - d * 4 + 14;
    },
    "font-family": "sans-serif",
    "font-size": 12,
    "fill": "#FFF"
  })