JSFiddle - React, Tailwind, and code Playground

by Patricia Warwick

HTML

<h1 class="rtecenter">Vaccinations in Ontario Public Health Units</h1>

<p class="rtecenter">Hover the mouse over the Public Health Unit to see its name and the number of vaccinations per 100,000 residents in the last 2 weeks.<br />
The drop-down list of outcomes has Age groups.<br />
<em>The function that changes the colour of the PHUs based on the rate of vaccinations isn't working at present.</em></p>

<p class="rtecenter"><select id="selectButton"></select></p>

<div id="map">&nbsp;</div>

JavaScript

var phuCSV="/sites/default/d3_files/covid-19/phu-2021-08-05.csv";
var ontarioCSV="https://covid-19-charts.ca/sites/default/d3_files/covid-19/covidtesting-x-2021-08-06.csv";
var OntarioVaccinesCSV="https://covid-19-charts.ca/sites/default/d3_files/covid-19/vaccine-doses-ontario-2021-08-06.csv"; 
var OntarioVaccinesAgeCSV="https://covid-19-charts.ca/sites/default/d3_files/covid-19/vaccines-by-age-2021-08-06"
var phuVaxAgeCSV="https://covid-19-charts.ca/sites/default/d3_files/covid-19/vaccines-by-age-phu-2021-08-06.csv"

var phu1phu2CSV="https://covid-19-charts.ca/sites/default/d3_files/covid-19/phu1-phu2.csv"
var phuPopulationCSV ="https://covid-19-charts.ca/sites/default/d3_files/PHUsb.csv";
var phuAddressesCSV ="https://covid-19-charts.ca/sites/default/d3_files/PHUsb-addresses.csv";
//var outerWidth = $("#node-606").outerWidth();  // change to correct node number
    var outerWidth = 800 
    var maxWidth=800;
    var maxDays = 14;

    if (outerWidth > maxWidth) {
        outerWidth = maxWidth}

    var height = 250; // default

   if (outerWidth <= 600){ // iphone
        device="iPhone"; 
        height = 300;
        var scale=600;  
        labelOffset = -30; shapeHeight = 10; shapePadding = 5; // iphone
        tWidth=80 
        tHeight = 30
        var margin = {top: 0, right: 40, bottom: 40, left: 40}  // default
   //     tooltipWidth=100,tooltipHeight=50,tooltipLeft=00,tooltipTop=300;
    } else if (outerWidth <= 800) { // tablet
        device="iPad"; 
        var scale=1600;
        tWidth=160 
        tHeight = 100; 
        var margin = {top: 40, right: 40, bottom: 40, left: 20};  // default
   //     tooltipWidth=100,tooltipHeight=80,tooltipLeft=00,tooltipTop=200;  
        var labelOffset = -40; var shapeHeight = 15; var shapePadding = 10; // change for devices // -40     
     } else {    
        var device="desktop";
        var margin = {top: 40, right: 20, bottom: 40, left: 20};  // default
        var tWidth=200, tHeight = 200;
        var...