JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="vis"></div>

CSS

/* css goes here */
.axis path,
.axis line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges;
}

.labels text {
    fill: gray;
    text-anchor: middle;
}

.axis text {
  font-family: sans-serif;
  font-size: 13px;
  fill: gray;
}

/* d3 tip */
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.d3-tip {
   font-size: 13px;   
   font-family: Consolas;
}

JavaScript

/* javascript goes here */
var dataset = [5, 20, 13, 19, 21, 25, 22, 18, 15, 13,
  11, 12, 15, 20, 18, 17, 16, 18, 23, 18
];

var dataset = [ 
	{ key: 0, value: 5 },
	{ key: 1, value: 10 },
	{ key: 2, value: 13 },
	{ key: 3, value: 19 },
	{ key: 4, value: 21 },
	{ key: 5, value: 25 },
	{ key: 6, value: 22 },
	{ key: 7, value: 18 },
	{ key: 8, value: 15 },
	{ key: 9, value: 13 },
	{ key: 10, value: 11 },
	{ key: 11, value: 12 },
	{ key: 12, value: 15 },
	{ key: 13, value: 20 },
	{ key: 14, value: 18 },
	{ key: 15, value: 17 },
	{ key: 16, value: 16 },
	{ key: 17, value: 18 },
	{ key: 18, value: 23 },
	{ key: 19, value: 25 } ];

console.log(dataset.length)


var w = 550,
    h = 400

// boilerplate setup code

var margin = {top: 60, right: 20, bottom: 40, left: 20},
  width = w - margin.left - margin.right,
  height = h - margin.top - margin.bottom

var svg = d3.select("#vis")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
  
svg.append("rect")
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('fill', '#eee')

var svg = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var yScale = d3.scale.linear()
  .range([height, 0])
  .domain([0, d3.max(dataset, function(d){return d.value})])

var xScale =  d3.scale.ordinal()
  .rangeRoundBands([0, width], 0.05)
  .domain(d3.range(dataset.length))
 
var colorScale = d3.scale.quantize()
  .range(["steelblue", "darkorange", "red", "yellow"])
  .domain([0, d3.max(dataset, function(d){return d.value})])

var bars = svg.selectAll('rect')
  .data(dataset, function(d){return d.key})
  .enter()
  .append("rect")
    .attr("class", "bar")     

bars
  .attr("x", function(d, i){return xScale(i)})
  .attr("y", function(d){return yScale(d.value)})
  .attr("height", function(d, i){
     return height - yScale(d.value)
   })
  .attr("width", xScale.rangeBand())
  .attr("fill", function(d, i){
    if (i === dataset.length - 1){
      return "steelblue"
    } else {
     ...