JSFiddle - React, Tailwind, and code Playground

by gdicerbo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">

<body>
      <div class="container">
        <div id="div1"></div>
      </div>

      <script>
var data = [{"Jun-15": "121037.84", "Feb-16": "128654.97", "Sep-15": "327144.14", "Dec-15": "70287.96", "May-15": "330889.42", "Apr-16": "-305371.47", "Mar-16": "83448.15", "Oct-15": "235907.99", "Jul-15": "225017.75", "Aug-15": "618267.31", "Jan-16": "24202.15", "Nov-15": "-38382.18", "total": "1821104.03", "store": "c50225b0-1bd7-11e6-b5ff-3c15c2ceba18"}, {"Jun-15": "71667.02", "Feb-16": "-4521.41", "Sep-15": "217698.23", "Dec-15": "153158.91", "May-15": "216405.16", "Apr-16": "169519.15", "Mar-16": "310741.99", "Oct-15": "83193.77", "Jul-15": "87451.82", "Aug-15": "155406.29", "Jan-16": "99839.93", "Nov-15": "167235.81", "total": "1727796.67", "store": "c50227b8-1bd7-11e6-92b9-3c15c2ceba18"}, {"Jun-15": "12702.2", "Feb-16": "55324.7", "Sep-15": "18429.2", "Dec-15": "34066.9", "May-15": "26651.2", "Apr-16": "51752.78", "Mar-16": "22454.35", "Oct-15": "52433.55", "Jul-15": "18721.4", "Aug-15": "34650.2", "Jan-16": "-6776.4", "Nov-15": "11745.6", "total": "332155.68", "store": "c50228ee-1bd7-11e6-9046-3c15c2ceba18"}, {"Jun-15": "51609.74", "Feb-16": "243.0", "Sep-15": "138224.38", "Dec-15": "139201.6", "May-15": "33116.53", "Apr-16": "-47466.9", "Mar-16": "13914.95", "Oct-15": "-38011.5", "Jul-15": "17790.34", "Aug-15": "45911.78", "Jan-16": "24940.8", "Nov-15": "-159685.35", "total": "219789.37", "store": "c50229f3-1bd7-11e6-b01e-3c15c2ceba18"}, {"Jun-15": "12918.0", "Feb-16": "24092.4", "Sep-15": "36912.0", "Dec-15": "6258.0", "May-15": "21288.0", "Apr-16": "25423.6", "Mar-16": "-65140.2", "Oct-15": "30888.0", "Jul-15": "33694.0", "Aug-15": "29106.0", "Jan-16": "-7750.2", "Nov-15": "-1644.0", "total": "146045.6", "store": "c5022b00-1bd7-11e6-8333-3c15c2ceba18"}, {"Jun-15": "973.7",...

CSS

body{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.axis text {
  font-size: 9px;
  font-family: sans-serif;
  fill: rgb(169, 178, 189);
}

.axis path {
 fill: none;
 stroke: rgb(169, 178, 189);
 shape-rendering: crispEdges;
}

.axis line {
  fill: none;
  stroke: rgb(169, 178, 189);
  shape-rendering: crispEdges;
}

JavaScript

function StackedBar() {

  var margin = {top: 0, right: 5, bottom: 20, left: 50},
      width = 400 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

  var duration = 1000;
  var x = d3.scale.ordinal();
  var y = d3.scale.linear();
  var columns;
  var config;

  var x_voronoi = d3.scale.linear();
  var y_voronoi = d3.scale.linear();

  var color = d3.scale.category20();
  var xAxis = d3.svg.axis();
  var yAxis = d3.svg.axis();

  var stack_area = d3.svg.area()
      //  .interpolate("basis")
       .x(function (d) { return x(d.x); })
       .y0(function(d) { return y(d.y0);})
       .y1(function (d) { return y(d.y0+d.y); });

   var line = d3.svg.line()
                   .interpolate("linear")
                   .x(function (d) { return x(d.x) + x.rangeBand()/2.0; })
                   .y(function (d) { return y(d.y); });


  var stack = d3.layout.stack()
        .values(function (d) { return d.values; })
        .x(function (d) { return (d.x); })
        .y(function (d) { return (d.y); });


  var prepare_data = function(data){

    var key_columns = _.filter(columns, function(c){ return c.type === 'object' });
    var key_values = _.intersection(_.map(columns, 'name'),
                                config.query.select );
    var x_values = _.difference(_.map(columns, 'name'),
                                config.query.select.concat(['total']));


    // Returns the key for each row
    var get_key = function(row){
      var values = _.map(key_values, function(c){
        return row[c];
      });
      // console.log(values);
      return _.join(values, "::");
    }

    var display_data = _.filter(data.data, function(item){ return item; });
    display_data = display_data.slice(0, config.number_of_rows);

    //console.log(display_data);

    var tmp = display_data.map(function(row){
          //  console.log(row);
           var name = get_key(row);
           var values = x_values.map(function(key){
               var y_val...