JSFiddle - React, Tailwind, and code Playground

by Patricia Warwick

CSS

svg {
font-size:0.7em;
}

.d3-tip {
    line-height: 1;
    padding: 8px;
    background: white;
    text-align: center;
    font-size:0.5em;
    color: black;
    border-radius: 2px;
    border : 1px ; 
    border-style: solid;
    border-color: black;
    border-radius : 8px ; 
  }

JavaScript

var outerWidth = $("#node-470").outerWidth(); // change to correct node number

    var maxWidth = 900;
    var maxHeight = 400;
    if (outerWidth > maxWidth) {
      outerWidth = maxWidth
    };
    var widthRatio = outerWidth / maxWidth;
    var maxDays = 56;

    var height = maxHeight * widthRatio; // default

    if (outerWidth <= 600) { // iphone
      device = "iPhone";
      outerWidth = outerWidth * 0.75;
      margin = {
        top: 40,
        right: 10,
        bottom: 60,
        left: 30
      };
    } else if (outerWidth <= 800) { // tablet
      device = "iPad";
      outerWidth = outerWidth * 0.75;
      margin = {
        top: 40,
        right: 60,
        bottom: 60,
        left: 40
      };
    } else {
      device = "desktop";
      outerWidth = outerWidth * 0.75;
      var margin = {
        top: 40,
        right: 40,
        bottom: 100,
        left: 50
      }; // default
    }

    var parseDate = d3.time.format("%Y-%m-%d").parse;
    var formatDate = d3.time.format("%d %b");
    var formatNumber = d3.format(",.0f");

    dailyCases("#cases");

  
    function dailyCases(divId) {

      d3.csv(ontarioCSV, function(error, data) {

        var svg = d3.select(divId).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 tip = d3.tip()
          .attr('class', 'd3-tip')
          .html(function(d) {
            return "<p>" + formatNumber(d.AvgNewCases) + " new cases<br />(7-day average)<br />" + formatDate(d.keyDate) + "</p>"
          })

        tip.direction('n') // Position the tooltip to the north of a target element
        svg.call(tip);
        var xscaleticks = 7;
        var yscaleticks = 20;

        var y = d3.scale.linear().range([height, 0]);
        var x = d3.scale.ordinal().rangeRoundBands([0,...