Published
Edited
Apr 22, 2021
chart = {
renderCity({ MSA_ID: featuredCity});
countySubdivisionGroup.raise();
cityGroup.raise();
return svg.node();
}
generateMap = ({ geoJSON, chartProjection, pathGroup, mapType }) => {
let path = d3.geoPath()
.projection(chartProjection);
pathGroup.selectAll("path")
.data( geoJSON.features, d => d.properties.GEOID)
.join(
enter => enter.append("path")
.attr("d", path)
.attr("class", `${mapType}-path`)
.style("opacity", 1.0)
// .style('stroke-width', mapType === "state" ? 0.5 : 0)
.style("stroke", "black")
.style("stroke-width", mapType !== "tract" && showCityBoundaries ? 0.5 : 0)
// .style("stroke-width", 0)
.style("fill-opacity", d => {
if (mapType !== "tract") {
return 0;
}
return d.properties.total_commuters > 0 ? 1.0*d.properties.main_city_commuters / d.properties.total_commuters : 0.0;
})
.on("mouseover", function(e, d) {
if (mapType !== "tract") {
d3.select(this)
.attr("prev-stroke-width", d3.select(this).style("stroke-width"))
.style("stroke-width", 1)
toolTip.show(d, this);
}
})
.on("mouseout", function(e, d) {
if (mapType !== "tract") {
console.log("enter", showCityBoundaries)
d3.select(this).style("stroke-width", d3.select(this).attr("prev-stroke-width"))
toolTip.hide();
}
})
.style("fill", d => {
if (mapType === "state") {
return "white";
}
return mapColor
}),
update => update
.style("stroke-width", mapType !== "tract" && showCityBoundaries ? 0.5 : 0),
exit => exit.remove()
);
};
renderCity = ({ MSA_ID }) => {
const cityTracts = filterGeoJSON({ originalGeoJSON: tractGeoJSON, MSA_ID });
const msaCities = filterGeoJSON({ originalGeoJSON: cityGeoJSON, MSA_ID });
const msaMCDs = filterGeoJSON({ originalGeoJSON: MCDGeoJSON, MSA_ID });
let chartProjection = d3.geoAlbersUsa()
.fitExtent([[0, rectHeight+15], [width, height]], cityTracts);
// console.log(msaCitiesFeatures);
generateMap({ geoJSON: cityTracts, chartProjection, pathGroup: tractGroup, mapType: "tract" });
generateMap({ geoJSON: msaCities, chartProjection, pathGroup: cityGroup, mapType: "cities" });
generateMap({ geoJSON: msaMCDs, chartProjection, pathGroup: countySubdivisionGroup, mapType: "county-subdivisions" })
}
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.
