JSFiddle - React, Tailwind, and code Playground

by Mark Friesen

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

CSS

.axis .domain {
  display: none;
}

JavaScript

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 50, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05)
    .align(0.2);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var csv = "Month,Projected Sales/Purchase,Purchase ,Shipped,Supplier\nJAN-17,310504,552339,259034,A\nJAN-17,610504,252339,659034,B\nFEB-17,910504,552339,259034,A\nFEB-17,210504,252339,659034,B\nFEB-17,810504,252339,659034,C\n";

var data = d3.csvParse(csv);

var stack = d3.stack()
		.keys(data.columns.slice(1,4));
var stackedData = stack(data);

for(var j=0;j<data.length;j++){
	
    var d  = stackedData[0][j].data;

    //calculate total of all 3 columns
    var count = 0;
    var t = 0;
    for (var key in d) {  	
      if(count!=0 && count!=4){
        t+= +d[key];
        d.total = t;
      }
      count++;
    }  
  }	
  
  var keys = data.columns.slice(1,4);    
  x.domain(data.map(function(d) { return d.Month; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);
  z.domain(keys);
  
	g.append("g")
	.selectAll("g")
	.data(stackedData)
	.enter().append("g")
	  .attr("fill", function(d) { return z(d.index); })
	.selectAll("rect")
	.data(function(d,i) { return d; })
	.enter().append("rect")
	.attr("x", function(d, i){return i*75;})
	.attr("y", function(d) { return y(d[1]); })
	.attr("height", function(d) { return y(d[0]) - y(d[1]); })
	.attr("width", 50);