JSFiddle - React, Tailwind, and code Playground

by spaccamontagna

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="cost-explorer">
<div class="cost-explorer-csv-cost">time,value
2020-06-23,0
2020-06-24,1.171293262
2020-06-25,0
2020-06-26,1.30730246
</div>
<div class="cost-explorer-csv-usage">time,value
2020-06-23,0
2020-06-24,4.350833
2020-06-25,0
2020-06-26,4.866112
</div>
</div>

CSS

.bar {
  fill: steelblue;
}

.chartLoading {
  position: absolute;
}

.cost-explorer {
	padding: 10px;
}

.cost-explorer .cost-explorer-csv-usage {
    border-bottom: 1px solid gray;
}

.d3-tip {
  position: absolute;
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

JavaScript

jQuery(document).ready(function () {
    myChart.timeBarChart('cost-explorer-csv-cost');
    myChart.timeBarChart('cost-explorer-csv-usage');
});

var myChart = {

    timeBarChart: function (target) {

      if (typeof(target) == "undefined" || target=="") return;
            
      target = "." + target;
      var svgTarget = target + ' .chart';
      
      // load CSV data
      var csvData = jQuery(target).html();
      
      // define svg tag that will contain the chart
      jQuery(target).html('<svg class="chart">' + 
          '<div class="chartLoading">Loading...</div></svg>');

      // set chart size and margins
      var availX = jQuery('.cost-explorer').width() - 240;

      var margin = {top: 20, right: 30, bottom: 130, left: 40},
          width = availX - margin.left - margin.right - 4,
          height = 500 - margin.top - margin.bottom;

      var x = d3.scaleBand()
          .rangeRound([0, width])
          .padding(0.1);

      var y = d3.scaleLinear()
          .rangeRound([height, 0]);
      
      var chart = d3.select(svgTarget)
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var div = d3.select("body")
          .append("div")
          .style("opacity", 0)
          .attr("class", "d3-tip");      
      
      // parse CSV data
      console.log(csvData)
      var parsedData = d3.csvParse(csvData, function(d) {
          return {
              time:d.time,
              value:+d.value
          };
      });

      // set x=time and y=value
      var color = d3.scaleOrdinal(d3.schemeCategory10);
      x.domain(parsedData.map(function(d) { return d.time; }));
      y.domain([0, d3.max(parsedData, function(d) { 
          if (d.value == 0) { return 1 } else { return d.value } })]);

      var xTicksLimit = Math.floor(x.domain().length / 36);
      var...