JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg width="800" height="800">
    <g transform="translate(100, 100)">
        <rect height="500"/>
        <g class="linear" transform="translate(0, 100)"></g>
        <g class="discrete" transform="translate(0, 200)"></g>
        <g class="custom" transform="translate(0, 300)"></g>
        <g class="linear-data" transform="translate(0, 100)"></g>
        <g class="discrete-data" transform="translate(0, 200)"></g>
        <g class="custom-data" transform="translate(0, 300)"></g>
    </g>
</svg>

CSS

body { background: #20262e }
svg { border: thin solid white; background: white }
rect { stroke: red; fill: none }
.data { fill: steelblue; opacity: 1; stroke: none }
.data2 { fill: orange; opacity: 1; stroke: none }

JavaScript

const width = 500;

const days = [new Date(2018,0,1), new Date(2018,0,2), new Date(2018,0,3), new Date(2018,0,4), new Date(2018,0,5)];
const months = [new Date(2018,0,1), new Date(2018,1,1), new Date(2018,2,1), new Date(2018,3,1)];
const years = [new Date(2016, 0, 1), new Date(2018, 0, 1), new Date(2019, 0, 1)];
const numerical = [0, 150, 200];

const data = years;
const dataType = "DATE"; // INTEGER DATE

d3.scaleLinearBand = function(dataType, _linear) {
    
    const inflateDomain = (data) => {
       const extent = scale._linear.domain();
       const min = extent[0];
       const max = extent[1];
       const values = [];
       let bucketSize = 0;

       switch(scale.resolution()) {
            case "YEARS": bucketSize = 31536000000; break;
            case "MONTHS": bucketSize = 10; break;
            case "DAYS": bucketSize = 86400000; break;
            case "HOURS": bucketSize = 3600000; break;
            default: bucketSize = 86400000; break;
       }

       let last = min;
       while(last <= max) {
          values.push(last);
          last = new Date(last.getTime() + bucketSize);
       }

       return values;
    }

    const findMinimumDiff = (data) => {
        let minDiff = Number.MAX_VALUE;

        // Handle the case where there is no data
        if (data.length === 0) return 0;

        // Find the minimum difference which will
        // determine the size of the samples
        for(let i = 1; i < data.length; i++) {
            const diff = data[i] - data[i-1];
            if (diff < minDiff) {
                minDiff = diff;
            }
        }

        return minDiff;
    };
    
    const calculateNumericalResolution = (data) => {   
        const minDiff = findMinimumDiff(data);

        // Start from the largest sample and find which
        // one best accomdates the minDiff we calculated
        let bucket = Math.pow(10, 308);
        while (bucket > minDiff) {
            bucket /= 10;
        }

        return...