JSFiddle - React, Tailwind, and code Playground

by Patricia Warwick

JavaScript

var viewportWidth = $("#node-269").outerWidth();  // change to correct node number
    var parseDate = d3.time.format("%Y-%m-%d").parse;
 
    var formatInteger = d3.format(".0f");
    var maxWidth=950;
    if (viewportWidth > maxWidth) {viewportWidth = maxWidth};
    var widthRatio=viewportWidth/maxWidth;

    var maxDays = 21;

    var tooltipWidth=150*widthRatio; 
    var tooltipHeight=120*widthRatio;
    var tooltipLeft=100*widthRatio; // console.log("tooltipLeft ", tooltipLeft);
    var tooltipTop=300*widthRatio;//  console.log("tooltipTop ", tooltipTop);

    var xAdjust=-200; var yAdjust=00; // width was 50
    var widthTransform = maxWidth/1
    var heightTransform = maxWidth/1.5;
  
    var margin={top:120, right:0, bottom:200, left:0};
    var scale=2500*widthRatio;
    var tWidth=200*widthRatio, tHeight = 200*widthRatio;

    if (viewportWidth < 400) {  
           var device = "phone"; // PHONE
           widthTransform = viewportWidth/2;
           var xAdjust=70; var yAdjust=450;
    } else if (viewportWidth < 800) { 
            device = "tablet"; // TABLET
            widthTransform = viewportWidth/3; // divide by 2.2 nearly works
            var xAdjust=50; var yAdjust=250;
     } else {
       device = "desktop"; // DESKTOP */
    };

    var width=(viewportWidth - margin.left - margin.right);
    var height=width; // console.log("width ", width); // console.log("margin.top ", margin.top);
      
    var centered;

    var colors = d3.scale.ordinal() 
      .domain(["less than 50","50 - 99","100 - 149","150 - 199","200 - 249","250 - 299","300 or more"])
      .range(['#f1eef6','#d4b9da','#c994c7','#df65b0','#e7298a','#ce1256','#91003f']);

     var colorLegend = d3.legend.color()
        .labelFormat(d3.format(".2f"))
        .scale(colors)
        .shapePadding(10*widthRatio)
        .shapeWidth(15*widthRatio)
        .shapeHeight(15*widthRatio)
        .labelOffset(10*widthRatio);
 
    // Sets the projection and scale of the map
    var...