chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); const yearsText = html` 1999 `; svg.append("g").attr("transform", "translate(610,20)"); //state svgs svg .append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", (d) => { let deathArray = getDeathData(d.properties.name, yearsSlider.value); let colorScale = d3 .scaleLinear() .domain([ maxOverallAgeAdjustedDeathRate / 2, maxOverallAgeAdjustedDeathRate ]) .range(["purple", "pink"]); return colorScale(deathArray[0].AADR); }) .attr("d", path) .on("mouseover", function (d, i) { d3.select(this) .transition() .duration("50") .attr("fill", (d) => { let deathArray = getDeathData(d.properties.name, yearsSlider.value); let colorScale = d3 .scaleLinear() .domain([ maxOverallAgeAdjustedDeathRate / 2, maxOverallAgeAdjustedDeathRate ]) .range(["white", "darkblue"]); return colorScale(deathArray[0].AADR); }); }) .call(attachTooltip) .on("mouseout", function (d, i) { d3.select("#tooltip").classed("hidden", true); d3.select(this) .transition() .duration("50") .attr("fill", (d) => { let deathArray = getDeathData(d.properties.name, yearsSlider.value); let colorScale = d3 .scaleLinear() .domain([ maxOverallAgeAdjustedDeathRate / 2, maxOverallAgeAdjustedDeathRate ]) .range(["purple", "pink"]); return colorScale(deathArray[0].AADR); }); }); //dividing paths svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); function updateGraph() { const numDays = +yearsSlider.value; yearsText.innerText = numDays; } yearsSlider.addEventListener("input", updateGraph); return html` ${yearsSlider} ${yearsText} ${svg.node()} `; }