JSFiddle - React, Tailwind, and code Playground

by adkf37

CSS

body {

    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

    position: relative;

    width: 960px;

}

.axis text {

    font: 10px sans-serif;

}

.axis path, .axis line {

    fill: none;

    stroke: #000;

    shape-rendering: crispEdges;

}

.bar {

    fill: steelblue;

    fill-opacity: .9;

}

.x.axis path {

    display: none;

}

label {

    position: absolute;

    top: 20px;

    right: 0px;

}

JavaScript

var data = [{ "letter": "A", "frequency": .08167},
{ "letter": "B", "frequency": .01492},
{ "letter": "C", "frequency": .02780},
{ "letter": "D", "frequency": .04253},
{ "letter": "E", "frequency": .12702},
{ "letter": "F", "frequency": .02288},
{ "letter": "G", "frequency": .02022},
{ "letter": "H", "frequency": .06094},
{ "letter": "I", "frequency": .06973},
{ "letter": "J", "frequency": .00153},
{ "letter": "K", "frequency": .00747},
{ "letter": "L", "frequency": .04025},
{ "letter": "M", "frequency": .02517},
{ "letter": "N", "frequency": .06749},
{ "letter": "O", "frequency": .07507},
{ "letter": "P", "frequency": .01929},
{ "letter": "Q", "frequency": .00098},
{ "letter": "R", "frequency": .05987},
{ "letter": "S", "frequency": .06333},
{ "letter": "T", "frequency": .09056},
{ "letter": "U", "frequency": .02758},
{ "letter": "V", "frequency": .01037},
{ "letter": "W", "frequency": .02465},
{ "letter": "X", "frequency": .00150},
{ "letter": "Y", "frequency": .01971},
{ "letter": "Z", "frequency": .00074}];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x2 = d3.scale.ordinal()
  .rangeBands([0, width], 0);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom"); 

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

var svg = d3.select("body").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 + ")");


  data.forEach(function(d) {
    d.frequency = +d.frequency;
  });

  x.domain(data.map(function(d) { return d.letter; }));
  x2.domain(data.map(function(d) { return d.letter; }));
  y.domain([0,...