function plotDrivers(data, driveVar) { const div = d3.create("div"); const projection = d3.geoAlbersUsa().scale(550).translate([250, 140]); const path = d3.geoPath().projection(projection); const svg = div.append("svg").attr("viewBox", [0, 0, 500, 500 * 0.55]); const logo = svg.append("svg:image") .attr("x",425) .attr("y", 200) .attr('width', 50) .attr('height', 50) .attr("xlink:href", squarelogo1); const colors = [ "#08519c", "#3182bd", "#6baed6", "#9ecae1", "#eff3ff", "#f7f7f7", "#fee5d9", "#fc9272", "#fb6a4a", "#de2d26", "#a50f15" ]; let seasData = data.filter(d=> d.season === driverOpts[1]); for (let i = 0; i < seasData.length; i++) { let div = +seasData[i].CLIMDIV; let change = +seasData[i][driveVar]; let color; if (change <= -40) { color = colors[0]; } else if (change > -40 && change <= -30) { color = colors[1]; } else if (change > -30 && change <= -20) { color = colors[2]; } else if (change > -20 && change <= -10) { color = colors[3]; } else if (change > -10 && change <= -1) { color = colors[4]; } else if (change > -1 && change < 1) { color = colors[5]; } else if (change >= 1 && change < 10) { color = colors[6]; } else if (change >= 10 && change < 20) { color = colors[7]; } else if (change >= 20 && change < 30) { color = colors[8]; } else if (change >= 30 && change < 40) { color = colors[9]; } else if (change >= 40) { color = colors[10]; } else { color = "#dbdbdb"; } for (let j = 0; j < climdivs.features.length; j++) { let jsonDiv = +climdivs.features[j].properties.CLIMDIV; if (div === jsonDiv) { climdivs.features[j].properties.change = +change; climdivs.features[j].properties.color = color; break; } } }; const allDivs = svg .selectAll("path") .data(climdivs.features) .enter() .append("path") .attr("d", path) .style("fill", (d) => d.properties.color === undefined ? "#dbdbdb" : d.properties.color ) .style("stroke", "black") .style("stroke-width", 0.15); return div.node(); }