JSFiddle - React, Tailwind, and code Playground

by Patricia Warwick

HTML

<div class="rtecenter" id="cases">&nbsp;</div>
<script type="text/javascript">
    var outerWidth = 600;var height = 200;
    var margin = {top: 40, right: 40, bottom: 60, left: 40};
    var parseDate = d3.time.format("%Y-%m-%d").parse;
    var formatDate = d3.time.format("%b %d, '%y");
    var x = d3.scale.ordinal().rangeRoundBands([0, outerWidth], 0.1); // 0.05
    var scaleticks = 5;
    var y = d3.scale.linear().range([height, 0]); 
	var xAxis = d3.svg.axis()
    	.scale(x)
	    .orient("bottom")
    	.tickPadding(8)
	    .ticks(scaleticks)
        .tickFormat(d3.time.format("%m-%d"));
    var yAxis = d3.svg.axis() .scale(y) 
        .orient("left") 
        .ticks(10); 
    var svg = d3.select("#cases").append("svg") 
        .attr("width", outerWidth + margin.left + margin.right) 
        .attr("height", height + margin.top + margin.bottom) 
        .append("g") 
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
    var data = [
      {"date": "2020-08-01", "deaths":"0"},
      {"date": "2020-08-02", "deaths":"1"},
      {"date": "2020-08-03", "deaths":"0"},
      {"date": "2020-08-04", "deaths":"1"},
      {"date": "2020-08-05", "deaths":"0"},
      {"date": "2020-08-06", "deaths":"1"}
      ]
    data.forEach(function(d) { 
            d.date = parseDate(d.date); 
            d.value=+d.deaths;
        });
    x.domain(data.map(function(d) {
           return d.date; })
        );
    y.domain([0, d3.max(data, function(d) { 
           return d.value; })
       ]);
    svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis) 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-0.8em") 
       .attr("dy", "-0.55em") //.55
       .attr("transform", "rotate(-65)"); 
    svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6)...