JSFiddle - React, Tailwind, and code Playground

by sbecker

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>
var distances = [2.23, 2.39, 2.59, 2.77, 3.05];

d3.select('body').selectAll('div')
  .data(distances)
  .enter()
    .append('div')
    .html('...')
    .style('width', '10px')
    .style('opacity', 0)
    .on("mouseover", function(){
      d3.select(this).transition().duration(300)
        .style("background-color", "#FFD700");
    })
    .on("mouseout", function(){
      d3.select(this).transition().duration(300)
        .style("background-color", "#333");})
    .transition()
      .delay(function(d, i) { return i * 300 })
      .duration(300)    
      .style('width', function(d) { return (d * 150) + 'px'; })
      .style('opacity', 1)
      .text(function(d) { return d + ' miles'; });
</script>