JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
      padding: 10px;
      background: #000;
    }
    div {
      background: #333;
      margin-bottom: 10px;
      padding: 7px;
      color: #fff;
      font-family: Arial;
      font-size: 12px; 
    }
</style>
<body>
<script src="http://d3js.org/d3.v2.js"></script>
<script>

</script>

JavaScript

var distances = [2.23, 2.39, 2.59, 2.77];

  d3.select('body').selectAll('div')
    .data(distances)
    .enter()
      .append('div')
      .style('width', function(d) { return (d * 120) + 'px'; })
      .text(function(d) { return d + ' miles'; });