JSFiddle - React, Tailwind, and code Playground

by Shang-De You

HTML

<div class="chart"></div>

CSS

.chart {
  position: relative;
}

.bar {
  font-size: 12px;
  font-family: sans-serif;
  border: 1px solid #A0A0A0;
  border-bottom-width: 0;
  background-color: #C0C0C0;
  padding: 1em;
}

.bar:last-of-type {
  border-bottom-width: 1px;
}

JavaScript

data = [
  {
    ind: "Foo",
    avg: 2
  },
  {
    ind: "Bar",
    avg: 3.5
  }
]

chart = d3.select(".chart")

histogram = d3.layout.histogram()
  .bins(2)
	.value(function(d){
	  return d.avg
  })

bar = chart.selectAll(".bar").data(data)

// Add
bar.enter().append("div")
	.attr("class", "bar")
  
//Clean
bar.exit().remove()

//Update
bar
	.text(function(d){
  	//return "#{d.ind}: #{d.avg}%"
    return d.ind + ": " + d.avg + "%"
  })
  .style("width", function(d){
  	//return "#{d.avg*10}em"
    return d.avg*10 + "em"
  })