JSFiddle - React, Tailwind, and code Playground

by wegunterjr

HTML

<body>
 	<div id="chart"></div>

 </body>

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

svg {
border: solid 1px #ccc;
font: 10px sans-serif;
shape-rendering: crispEdges;
}

JavaScript

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

var padding = 20;
//this dataset was actually a csv, i didn't know how to include it in jsfiddle, so i tried just to make it a list, but
// that isn't working.  any suggestions, would be helpful
var dataset = [ Program,Awards_2013,Sales_2013,Acquisitions_2013,Awards_2014,Awards_2015,Awards_2016,Awards_2017,
Apple,6500,27110,,6500,1600,1000,5000,
Microsoft,5000,4500,,0,0,0,0,
Atari,4000,19100,,18891,17775,15249,15249,
Other,0,0,,1960,41080,32000,2450 ];
//d3.csv("DataFile.csv", function(data) 
//{ 
       var xScale = d3.scale.ordinal()
              .domain(d3.range(data.length))
              .rangeRoundBands([0, width], .08);

      var yScale = d3.scale.linear()
              .domain([0, d3.max(data)])
              .range([0, height]);
    
     //Create SVG element
      var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

      //Create bars
      svg.selectAll("rect")
         .data(data)
         .enter().append("rect")
         .attr("x", function(d, i) {return xScale(i);})
         .attr("y", function(d) { 10 })
         .attr("width", function(d,i) {return d.Sales_2013})
         .attr("height", function(d) {return d.Awards_2013 })
         .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")"; })
         .on("mouseover", function() {d3.select(this).style("fill", "aliceblue"); })
         .on("mouseout", function() {d3.select(this).style("fill", "green"); });
      //.attr("width", function(d, i) {return d.Sales_2013 + d.Acquisitions_2013; })
      //.attr("height" , function(d) {return d.Awards_2014 ; });
      //Create labels
      svg.selectAll("text")
         .data(data)
         .enter()
         .append("text")
         .text(function(d) {
            return d.Sales_2013;
         })
         .attr("text-anchor",...