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>

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

var data;

function plot_area(data){

    var config = {};
    config.query = {};
    config.number_of_rows = 10;
    config.query.select = ['store'];

    // Plots the data as an area chart
    var chart = StackedBar()
                    .width(820)
                    .height(450)
                    .columns(data.columns)
                    .config(config)
                    .margin({top: 30, right: 20, bottom: 20, left: 60})
                    .x(d3.scale.ordinal())
                    .y(d3.scale.linear());

  console.log(data['data']);
  d3.select("#div1").datum(data).call(chart);

}

d3.json("http://www.exvisuals.com/wp-content/uploads/2018/08/MtPrincetonBar_Years6.txt", function(error, d) {
  data = d;
  plot_area(data);
});