JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<input id='date' />
<svg    xmlns:dc="http://purl.org/dc/elements/1.1/"    xmlns:cc="http://creativecommons.org/ns#"    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"    xmlns:svg="http://www.w3.org/2000/svg"    xmlns="http://www.w3.org/2000/svg"    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    width="959"    height="593"    id="svg2"    sodipodi:version="0.32"    inkscape:version="0.46"    sodipodi:docname="United States WIP.svg"    inkscape:output_extension="org.inkscape.output.svg.inkscape">   <metadata      id="metadata62">     <rdf:RDF>       <cc:Work          rdf:about="">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />       </cc:Work>     </rdf:RDF>   </metadata>   <defs      id="defs60">     <inkscape:perspective        sodipodi:type="inkscape:persp3d"        inkscape:vp_x="0 : 296.5 : 1"        inkscape:vp_y="0 : 1000 : 0"        inkscape:vp_z="959 : 296.5 : 1"        inkscape:persp3d-origin="479.5 : 197.66667 : 1"        id="perspective64" />   </defs>   <sodipodi:namedview      inkscape:window-height="814"      inkscape:window-width="1152"      inkscape:pageshadow="2"      inkscape:pageopacity="0.0"      guidetolerance="10.0"      gridtolerance="10.0"      objecttolerance="10.0"      borderopacity="1.0"      bordercolor="#666666"      pagecolor="#ffffff"      id="base"      showgrid="false"      inkscape:zoom="0.70710678"      inkscape:cx="608.50443"      inkscape:cy="298.13957"      inkscape:window-x="-8"      inkscape:window-y="-8"      inkscape:current-layer="svg2"      showguides="true"      inkscape:guide-bbox="true" />   <path      style="fill:#d3d3d3;stroke:#ffffff;stroke-opacity:1;stroke-width:0.75;stroke-miterlimit:4;stroke-dasharray:none"      id="HI"      d="M 233.08751,519.30948 L 235.02744,515.75293 L 237.2907,515.42961 L 237.61402,516.23791 L...

CSS

textarea{
    display: none;
}

JavaScript

function CSVtoJSON(CSV){
    input = CSV.split('\n');
    for(i=0;i<input.length;i++){
        input[i] = input[i].split(',');
        if(i!==0){
            input[i] = createJSON(input[0],input[i]);
        }
    }
    
    function createJSON(key,input){
        obj = {};
        for(j=0;j<key.length;j++){
                obj[key[j]] = input[j];
        }
        return obj;
    }
    return input.splice(1);
}

testArr = CSVtoJSON(document.getElementById('CSV').value);
//SVG drawing
paths = document.getElementsByTagName('path');
date = document.getElementById('date');
count = 0;
function colorUnemployment(){
    for(i=0;i<paths.length;i++){
        id = paths[i].getAttribute('id').match(/[A-Z]{2}/);
        if(id == 'SP'){
            id = 'MI';
        }
        value = testArr[count][id];
        color = 225 - Math.floor(value*15);
        paths[i].style.fill = 'rgb(255,'+color+','+Math.floor(color/2)+')';
    }
    date.value = testArr[count]['    Date'];
    if(count<testArr.length){
        console.log('hey');
        count++;
        setTimeout(colorUnemployment,100);
    }
}

colorUnemployment();