JSFiddle - React, Tailwind, and code Playground

by Mohit Agrawal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="example"></div>

CSS

.axis path,
  .axis line{
    fill: none;
    stroke: black;
  }

  .line{
    fill: none;
    stroke: blue;
    stroke-width: 2px;
  }

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.2;
  }



.chart rect {
  stroke: white;
  fill-opacity: .6;
  fill: steelblue;
 
}
.bar.positive {
  fill: steelblue;
}
 
.bar.negative {
  fill: brown;
}
 
.axis text {
  font: 10px sans-serif;
}
 
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
 
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}
text {
    font-size: 12px !important;
    width: 4em;
}
.zero.axis path {
    stroke-width:0.5!important;
    stroke-dasharray: 5,5!important;
}

JavaScript

var data = [["Since Mar 10, 2015",190], ["1 year",17.1], ["3 year",6.9], ["Since Mar 10, 2010",-150]];
 
 
d3.select("#example")
  .datum(data)
    .call(columnChart()
      .width(320)
      .height(240)
      .x(function(d, i) { return d[0]; })
      .y(function(d, i) { return d[1]; }));
 
function columnChart() {
  var margin = {top: 30, right: 10, bottom: 50, left: 50},
      width = 40,
      height = 40,
      xRoundBands = 0.5,
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; },
      xScale = d3.scale.ordinal(),
      yScale = d3.scale.linear().range([height, 0]),
      yAxis = d3.svg.axis().scale(yScale).orient("left"),
      xAxis = d3.svg.axis().scale(xScale);
        
   function chart(selection) {
    selection.each(function(data) {
 
      // Convert data to standard representation greedily;
      // this is needed for nondeterministic accessors.
      data = data.map(function(d, i) {
        return [xValue.call(data, d, i), yValue.call(data, d, i)];
      });
   
      // Update the x-scale.
      xScale
          .domain(data.map(function(d) { return d[0];} ))
          .rangeRoundBands([0, width - margin.left - margin.right], xRoundBands);
   
      // Update the y-scale.
      yScale
          .domain([d3.min(data.map(function(d) { return d[1];} )), d3.max(data.map(function(d) { return d[1];} ))])
          .range([height - margin.top - margin.bottom, 0])
          .nice();
        
      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([data]);
        
      // Otherwise, create the skeletal chart.
      var gEnter = svg.enter().append("svg").append("g");
      gEnter.append("g").attr("class", "bars");
      gEnter.append("g").attr("class", "y axis");
      gEnter.append("g").attr("class", "x axis");
      gEnter.append("g").attr("class", "x axis zero");

 
      // Update the outer dimensions.
      svg .attr("width", width)
          .attr("height", height);
...