JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart" id="history-chart-main"></div>

CSS

.chart {
    text-align: center;
    padding: 10px 10px 25px 10px;
    background: #f6f6f6;
  }

  .chart svg {
    overflow: visible;
  }

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

JavaScript

const data = [
    { value: 46, date: '2000-06-28', formatted_date: '06/28/2000' },
    { value: 48, date: '2003-06-28', formatted_date: '06/28/2003' },
    { value: 16, date: '2004-06-28', formatted_date: '06/28/2004' },
    { value: 36, date: '2006-06-28', formatted_date: '06/28/2006' },
    { value: 40, date: '2010-06-28', formatted_date: '06/28/2010' },
    { value: 48, date: '2012-06-28', formatted_date: '06/28/2012' },
    { value: 34, date: '2018-06-28', formatted_date: '06/28/2018' },
    { value: 33, date: '2020-06-28', formatted_date: '06/28/2020' }
  ];
  create_area_chart(data, 'history-chart-main');
  
  function create_area_chart(data, target){
    document.getElementById(target).innerHTML = '';
    var parentw = document.getElementById(target).offsetWidth;
    var parenth = 0.6*parentw;
    var svg = d3.select('#'+target).append("svg").attr("width", parentw).attr("height", parenth),
        margin = {top: 20, right: 20, bottom: 40, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%Y-%m-%d");
    bisectDate = d3.bisector(function(d) { return d.date; }).left;

    var x = d3.scaleTime()
        .rangeRound([0, width]);

    var y = d3.scaleLinear()
        .rangeRound([height, 0]);

    var area = d3.area()
        .x(function (d) { return x(d.date); })
        .y1(function (d) { return y(d.value); });

    data.forEach(function (d) {
        //only parse time if not already parsed (i.e. when using time period filters)
        if(parseTime(d.date))
            d.date = parseTime(d.date);
        d.value = +d.value;
    });

    x.domain([d3.min(data, function(d) { return d.date}), d3.max(data, function(d) { return d.date})]);
    y.domain([0, 1.05 * d3.max(data, function (d) { return d.value; })]);
    area.y0(y(0));

   ...