Published
Edited
Oct 30, 2021
1 star
{
if (groupingMethod == "alg") {
d3.select(chart)
.selectAll(".ZCTA")
.attr(
"class",
(d) => `ZCTA ID${algorithm_split.get(d.properties.ZCTA5CE10)}`
)
.transition()
.duration(750)
.attr("fill", (d) =>
algorithmScale(algorithm_split.get(d.properties.ZCTA5CE10))
)
.select("title")
.text(title);
d3.select(chart)
.select(".legend")
.selectAll("rect")
.data(algorithmScale.domain())
.join("rect")
.on("mouseover", (d) =>
d3
.select(chart)
.selectAll(`.ZCTA:not(.ID${d})`)
.transition()
.duration(1000)
.attr("opacity", 0.25)
)
.on("mouseout", (d) =>
d3
.select(chart)
.selectAll(`.ZCTA:not(.ID${d})`)
.transition()
.duration(1000)
.attr("opacity", 1)
)
.attr("stroke", "#4a4a4a")
.attr("x", 20)
.transition()
.duration(750)
.attr("fill", (d) => algorithmScale(d))
.attr("y", (d) => 10 + d * 23)
.attr("width", 50)
.attr("height", 15);
d3.select(chart)
.select(".legend")
.selectAll("text")
.data(algorithmScale.domain())
.join("text")
.attr("x", 80)
.transition()
.duration(750)
.attr("y", (d) => 23 + d * 23)
.text((d) => `Stratum ${d}`);
} else {
d3.select(chart)
.selectAll(".ZCTA")
.attr(
"class",
(d) => `ZCTA ID${manual_split.get(d.properties.ZCTA5CE10)}`
)
.transition()
.duration(1750)
.attr("fill", (d) =>
manualScale(manualLabels.get(manual_split.get(d.properties.ZCTA5CE10)))
)
.select("title")
.text(title);
d3.select(chart)
.select(".legend")
.selectAll("rect")
.data(manualScale.domain())
.join("rect")
.on("mouseover", (d) =>
d3
.select(chart)
.selectAll(`.ZCTA:not(.ID${Array.from(manualLabels.keys())[d - 1]})`)
.transition()
.duration(1000)
.attr("opacity", 0.25)
)
.on("mouseout", (d) =>
d3
.select(chart)
.selectAll(`.ZCTA:not(.ID${Array.from(manualLabels.keys())[d - 1]})`)
.transition()
.duration(1000)
.attr("opacity", 1)
)
.attr("stroke", "#4a4a4a")
.attr("x", 20)
.transition()
.duration(750)
.attr("fill", (d) => manualScale(d))
.attr("y", (d) => 10 + d * 23)
.attr("width", 50)
.attr("height", 15);
d3.select(chart)
.select(".legend")
.selectAll("text")
.data(manualScale.domain())
.join("text")
.attr("x", 80)
.transition()
.duration(750)
.attr("y", (d) => 23 + d * 23)
.text((d) => `Stratum ${Array.from(manualLabels.keys())[d - 1]}`);
}
}
Array.from(manualLabels.keys())[4]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
