JSFiddle - React, Tailwind, and code Playground

by jrideout

HTML

<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<div id="chart"></div>

JavaScript

var sales = d3.dsv("|", "text/plain").parse(["Market|Product_Type|Sales",
"West|Espresso|120",
"West|Tea|100",
"West|Coffee|85",
"Central|Espresso|250",
"Central|Espresso|750",
"Central|Tea|100",
"Central|Coffee|120",
"East|Espresso|120",
"East|Tea|650",
"East|Tea|350",
"East|Coffee|560"].join('\n'));

var ndx = crossfilter(sales);
var regionDim = ndx.dimension(dc.pluck('Market'));
var salesGroup = regionDim.group().reduce(
  function(p,v) {
    p[v.Product_Type] = (p[v.Product_Type] || 0) + +v.Sales;
    return p;
  },
  function(p,v) {
    p[v.Product_Type] = (p[v.Product_Type] || 0) - +v.Sales;
    return p;
  },
  function() { return {}; });

var bar = dc.barChart('#chart')
  .height(400)
  .width(400)
  .ordinalColors(["#7FC97F","#BEAED4",'#FDC086'])
  .dimension(regionDim)
  .x(d3.scale.ordinal())
  .barPadding(0.05)
  .outerPadding(0.05)
  .xUnits(dc.units.ordinal)
  .group(salesGroup, "Coffee")
  .valueAccessor(function(d) {return d.value.Coffee;})
  .stack(salesGroup, "Tea", function(d) {return d.value.Tea;})
  .stack(salesGroup, "Espresso", function(d) {return d.value.Espresso;})
  .renderlet(function(c) {
      c.svg().select('g').attr("transform","rotate(90 200,200)");
  });

dc.renderAll();