JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://unpkg.com/d3@6/dist/d3.js"></script>
<script src="https://unpkg.com/[email protected]/crossfilter.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
<script src="https://unpkg.com/dc@4/dist/dc.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dc@4/dist/style/dc.css">
<div id="chart"></div>

JavaScript

const results = [
    {week : "1", capacity: "48"},
    {week : "1", capacity: "60"},
    {week : "2", capacity: "33"},
    {week : "42", capacity: "67"},
    {week : "42", capacity: "60"},
    {week : "43", capacity: "66"},
    {week : "44", capacity: "52"},
    {week : "45", capacity: "63"},
    {week : "46", capacity: "67"},
    {week : "47", capacity: "80"},
    {week : "48", capacity: "61"},
    {week : "48", capacity: "66"},
    {week : "49", capacity: "54"},
    {week : "50", capacity: "69"}
];

function fill_ints(group, fillval, stride = 1) {
    return {
      all: function() {
        var orig = group.all();
        var target = d3.range(orig[0].key, orig[orig.length-1].key, stride);
        var result = [];
        for(var oi = 0, ti = 0; oi < orig.length && ti < target.length;) {
          if(orig[oi].key <= target[ti]) {
            result.push(orig[oi]);
            if(orig[oi++].key === target[ti])
              ++ti;
          } else {
            result.push({key: target[ti], value: fillval});
            ++ti;
          }
        }
        if(oi<orig.length)
          Array.prototype.push.apply(result, orig.slice(oi));
        if(ti<target.length)
          result = [...result, ...target.slice(ti).map(t => ({key: t, value: fillval}))];
        return result;
      }
    };
}

let chart = dc.lineChart("#chart");
let ndx = crossfilter(results);

results.forEach(function (d) {
     d.week = +d.week;
     d.capacity = +d.capacity;
});
            
let weekDimension = ndx.dimension(d => d.week);
                
function reduceAdd(p, v) {
    ++p.count;
    p.total += v.capacity;
    p.average = p.total / p.count;
    return p;
}

function reduceRemove(p, v) {
    --p.count;
    p.total -= v.capacity;
    p.average = p.count ? p.total / p.count : 0;
    return p;
}

function reduceInitial() {
    return { count: 0, total: 0, average: 0 };
} 

let capacityGroup = weekDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);

const filledGroup...