JSFiddle - React, Tailwind, and code Playground

by Abdullah Rasheedd

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<button id="programmaticZoom">Zoom</button>
<div id="container">

    <div id="dial">
           
    </div>
    <svg id="svgChart"></svg>
</div>

CSS

#container{
        height: 700px;
    }
#dial {
    width: 170px;
    height: 170px;
    margin: 0px auto 20px;
}

.chart {
    height: 100%;
    margin: 30px auto 0px;
}
div.bar{
    display: inline-block;
    width: 20px;
    height: 75px;
    background-color: teal;
}

.weather-chart path{
    fill:#FFAD27;
    fill-opacity: 0.5;
}

circle {
    fill: #58D6C7;
}

.usage-chart path{
    fill:none;
    stroke:#58D6C7;
    stroke-width: 2px;
}
g.axis path {
    stroke-width: 0;
}
#svg-bars{
        width:500px;
        margin:0 auto;
}

.area {
        /*fill: url(#gradient);*/
        fill-opacity: .2;
        clip-path: url(#clip);
    }

    .zoom {
        cursor: move;
        fill: none;
        pointer-events: all;
    }
    .line {
        fill: none;
        stroke: black;
        stroke-width: 2px;
        clip-path: url(#clip);
    }
    
    .circle {
            fill: transparent;
            stroke: none;
            stroke-width: 2px;
            clip-path: url(#clip);
    }
    .circle.selected{
        fill: #31B5BB;
        stroke: #777777;
    }
            .zeroline {
            fill: none;
            stroke: red;
            stroke-width: 0.5px;
            stroke-dasharray: 5 5;
        }

        .zerolinetext {
            fill: red;
        }

        .overlay {
            fill: none;
            stroke: none;
            pointer-events: all;
        }

        .focusLine {
            fill: none;
            stroke: steelblue;
            stroke-width: 0.5px;
        }

        .focusCircle {
            fill: red;
        }

.weather-chart{
        fill:#FFAD27;
        fill-opacity: 0.5;
        clip-path: url(#clip);
    }

.axis g.tick text {
    fill: #777777;
}


div#chart-assistant {
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #777777;
}

.year {
    font-family: Roboto-Regular;
    font-size: 22px;
}

.month {
    font-size: 30px;
}

JavaScript

var data,
    hourlyData,
    dailyData,
    monthlyData,
    x,x2,y,y2,
    focus,
    monthly,
    area,
    brush,
    zoom,
    line,
    weatherChart,
    selectedNode,
    mode,
    xAxis,
    yAxis,
    xDomain,
    yDomain,
    areaPath,
    linePath,
    width;

    data = getMonthly();
    initializeGraph();

    function initializeGraph(){
        mode = 'monthly';
        var el = d3.select('body');
        var chart = el.select('#container');
        var svg = el.select('svg#svgChart');
        var dial = chart.select('#dial');
        var dialHeight = dial.node().offsetHeight;
        var chartHeight = chart.node().offsetHeight;
        svg.attr('height',chartHeight - dialHeight - 100 - 60);
        var chartWidth = chart.node().getBoundingClientRect().width,
        margin = {top: 20, right: 40, bottom: 30, left: 40},
            margin2 = {top: 430, right: 20, bottom: 30, left: 40};
            width = +chartWidth - margin.left - margin.right;
        var height = +svg.attr("height") - margin.top - margin.bottom - 80,
            height2 = +svg.attr("height") - margin2.top - margin2.bottom - 80;
        svg.attr('width', chartWidth);

        // setup scales
        x = d3.scaleTime().range([0, width]);
        x2 = d3.scaleTime().range([0, width]);
        y = d3.scaleLinear().range([height, 0]);
        y2 = d3.scaleLinear().range([height2, 0]);

        // setup domain
        xDomain = d3.extent(data, function(d){ console.info(data); return getDate(d);});
        yDomain = [0, d3.max(data, function(d){return d.kWh; })];
    
        x.domain(xDomain);
        y.domain(yDomain);
        x2.domain(x.domain());
        y2.domain(y.domain());

            // setup axis
        xAxis = d3.axisBottom(x).tickSize(0).tickFormat(d3.timeFormat('%b'));
        yAxis = d3.axisLeft(y).tickValues(y.domain()).ticks(3).tickSize(0);

        // get day range
        var dayDiff = daydiff(x.domain()[0],x.domain()[1]);

        brush = d3.brushX()
              ...