JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg class="chart"></svg>

CSS

.grow rect {
  stroke: black;
  shape-rendering: crispEdges;
  fill: none;
}

.axis text {
  font: 10px sans-serif;
}

.legend text {
  font: 12px sans-serif;
}

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

.x.axis path,
.x.axis line {
  display: none;
}

.y.axis path,
.y.axis line {
  display: none;
}

JavaScript

var totWidth = 700,
   totHeight = totWidth * 1.2,
   margin = {
     top: 80,
     right: 30,
     bottom: 80,
     left: 80
   },
   width = totWidth - (margin.left + margin.right),
   height = totHeight - (margin.top + margin.bottom);

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

 var y = d3.scale.ordinal()
   .rangeRoundBands([height, 0]);

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

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

 var chart = d3.select(".chart")
   .attr("width", totWidth)
   .attr("height", totHeight)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var datastr = '[{"Industry":"Government","Clerks":"3","Communication":"2","Construction":"2","Engineering":"2","Equip Op":"3","Repair":"2","Food Svc":"2","Gen Phys":"3","Health & Bio":"3","Hum & Ed":"3","Analysis":"3","Managers":"3","Outreach":"3","Public safety":"3","Service":"2"},{"Industry":"Other Svcs","Clerks":"3","Communication":"2","Construction":"2","Engineering":"1","Equip Op":"3","Repair":"2","Food Svc":"3","Gen Phys":"3","Health & Bio":"2","Hum & Ed":"2","Analysis":"2","Managers":"3","Outreach":"3","Public safety":"1","Service":"3"},{"Industry":"Accom/Food","Clerks":"3","Communication":"1","Construction":"1","Engineering":"1","Equip Op":"3","Repair":"1","Food Svc":"4","Gen Phys":"3","Health & Bio":"1","Hum & Ed":"1","Analysis":"1","Managers":"3","Outreach":"1","Public safety":"1","Service":"4"},{"Industry":"Arts/Ent/Rec","Clerks":"2","Communication":"2","Construction":"1","Engineering":"1","Equip Op":"2","Repair":"1","Food Svc":"3","Gen Phys":"2","Health & Bio":"1","Hum & Ed":"2","Analysis":"2","Managers":"2","Outreach":"3","Public safety":"1","Service":"3"},{"Industry":"Health/Soc","Clerks":"4","Communication":"2","Construction":"1","Engineering":"1","Equip Op":"3","Repair":"1","Food Svc":"3","Gen Phys":"2","Health & Bio":"4","Hum & Ed":"3","Analysis":"2","Managers":"3","Outreach":"4","Public...