JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<script src="//d3js.org/d3.v3.min.js"></script>

CSS

.box {
  font: 10px sans-serif;
}

.box line,
.box rect,
.box circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.5px;
}

.box .center {
  stroke-dasharray: 3,3;
}

.box .outlier {
  fill: none;
  stroke: #ccc;
}

JavaScript

// load some stuff into a global var. 
// then do some etl magic.

// some random data listID strings and then some random days 0.00 anywhere from 0- 90 dayz? ~15 "lists" with ~24 cardz each 

// so like build a graph that computez average time (dayz) for each list 

/* 			-				-				-				@				-
 * t		-				@				-				-				-
 * i		@				-				-				-				-
 * m		-				-				@				-				@
 * e		-				-				-				-				-
 *  	listA		listB		listC		listD		listE
 * 		 100		 80			 60			 50      30			<-- total cards 
 * 						    lists
*/
// see: https://bl.ocks.org/mbostock/4061502
// http://bl.ocks.org/jensgrubert/7789216

let listData = [
	{
  	"listA": 10.00,
  	"listB": 14.05,
    "listC": 7.09,
    "listD": 20.01,
    "listE": 6.66
  },
  {
  	"listA": 19.34,
  	"listB": 15.47,
    "listC": 2.22,
    "listD": 24.43
  }
];

/* BOX.JS */
(function() {

// Inspired by http://informationandvisualization.de/blog/box-plot
d3.box = function() {
  var width = 1,
      height = 1,
      duration = 0,
      domain = null,
      value = Number,
      whiskers = boxWhiskers,
      quartiles = boxQuartiles,
	  showLabels = true, // whether or not to show text labels
	  numBars = 4,
	  curBar = 1,
      tickFormat = null;

  // For each small multiple…
  function box(g) {
    g.each(function(data, i) {
      //d = d.map(value).sort(d3.ascending);
	  //var boxIndex = data[0];
	  //var boxIndex = 1;
	  var d = data[1].sort(d3.ascending);
	  
	 // console.log(boxIndex); 
	  //console.log(d); 
	  
      var g = d3.select(this),
          n = d.length,
          min = d[0],
          max = d[n - 1];

      // Compute quartiles. Must return exactly 3 elements.
      var quartileData = d.quartiles = quartiles(d);

      // Compute whiskers. Must return exactly 2 elements, or null.
      var whiskerIndices = whiskers && whiskers.call(this, d, i),
          whiskerData = whiskerIndices && whiskerIndices.map(function(i) { return d[i]; });

      // Compute outliers. If no whiskers are specified, all...