{ // ************************************************************ // Declaration of SVG and Geographic Projection // ************************************************************ let width = 975; let height = 610; let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); // ======== Geographic projection of the United States ======== let proj = d3.geoAlbersUsa().fitSize([width, height], stateShapes); let path = d3.geoPath().projection(proj); // stateShapes specific pathing // ************************************************************ // Create Color Scale // ************************************************************ let color_scale = d3 .scaleQuantile() .domain( Array.from( swe_state_incomes, ([key, value]) => value[selected_income_stat] ) ) .range(d3.schemeGreens[8]); // ************************************************************ // Map Creation and Styling // ************************************************************ let map = svg.append("g"); let axes_labels = svg.append("g").style("font-size", "12px"); let states = map.append("g"); states .selectAll("path.state") .data(united_states) .join("path") .attr("d", path) .attr("fill", (o) => color_scale( swe_state_incomes.get(o.properties.name)[selected_income_stat] ) ) .attr("stroke-width", "1") .attr("stroke", "lightgray") .attr("id", (o) => state_abbrev.get(o.properties.name)) // ======== State Pointer Events ======== .on("pointerenter", function (event, d) { d3.select(this).raise().attr("stroke-width", 1); d3.select(this).attr("stroke", "black"); axes_labels.text(""); displayStats(event, d); }) .on("pointerleave", function () { d3.select(this).attr("stroke", "lightgray"); d3.select(this).attr("stroke-width", 1); }) // ======== State Tippy ======== .each(function (d) { tippy(this, { content: `

${d.properties.name}

`, allowHTML: true, theme: "light-border" }); }) // ======== State onClick Events ======== .on("click", clicked); // ************************************************************ // City Markers // ************************************************************ let cities = cityData .filter((o) => o.population > 140000 /* City population of Asheville, NC */) .filter((o) => proj([o.longitude, o.latitude])); cities.forEach(function (o) { let [x, y] = proj([o.longitude, o.latitude]); o.x = x; o.y = y; }); let max = d3.max(cities.map((o) => o.population)); let circle_group = map.append("g"); circle_group .selectAll("circle.city") .data(cities) .join("circle") .attr("cx", (o) => o.x) .attr("cy", (o) => o.y) .attr("r", (o) => 12 * (o.population / max) ** 0.5) // ======== Circle Colors ======== .attr("fill", "gold") .attr("fill-opacity", 0.5) .attr("stroke-width", 0.5) .attr("stroke", "black") // ======== City Pointer Events ======== .on("pointerenter", function (event, d) { // highlight this city d3.select(this).raise().attr("stroke", "black"); d3.select(this).attr("stroke-width", 1); // highlight its state const state = abbrev_state.get(d.name.split(", ")[1]); const abbrev = state_abbrev.get(state); d3.select("#" + abbrev) .raise() .attr("stroke", "black"); d3.select("#" + abbrev) .attr("stroke-width", 1) .attr("stroke", "black"); }) .on("pointerleave", function (event, d) { const state = abbrev_state.get(d.name.split(", ")[1]); const abbrev = state_abbrev.get(state); d3.select(this).attr("stroke", "black"); d3.select(this).attr("stroke-width", 0.5); d3.select("#" + abbrev) .attr("stroke-width", 1) .attr("stroke", "lightgray"); }) // ======== City Tippy ======== .each(function (d) { const stat = swe_metro_incomes.has(d.name) ? swe_metro_incomes.get(d.name)[selected_income_stat] : "no data"; const symbol = selected_income_stat != "employment" ? stat == "no data" ? "" : "$" : ""; tippy(this, { content: `

City: ${d.name}

Population: ${d.population.toLocaleString( "en-US" )}

${new Map( Array.from(labels, ([k, v]) => [v, k]) ).get(selected_income_stat)}: ${symbol}${stat.toLocaleString( "en-US" )}

`, allowHTML: true, theme: "light-border" }); }); // ************************************************************ // Display Statistics Function // ************************************************************ function displayStats(event, d) { axes_labels .append("foreignObject") .attr("width", 200) .attr("height", 200) .append("xhtml:body").html(`
State: ${d.properties.name}
Employment: ${swe_state_incomes .get(d.properties.name) ["employment"].toLocaleString("en-US")}
Median: $${swe_state_incomes .get(d.properties.name) ["median"].toLocaleString("en-US")}
10th Percentile: $${swe_state_incomes .get(d.properties.name) ["tenth_percentile"].toLocaleString("en-US")}
90th Percentile: $${swe_state_incomes .get(d.properties.name) ["ninetieth_percentile"].toLocaleString("en-US")} `); } // ************************************************************ // Mike Bostock's "Zoom to Bounding Box" code. Bostock's // notebook and this code can be found at: // https://observablehq.com/@d3/zoom-to-bounding-box // ************************************************************ function clicked(event, d) { const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); states.transition().style("fill", null); d3.select(this).transition(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); function zoomed(event) { const { transform } = event; map.attr("transform", transform); map.attr("stroke-width", 1 / transform.k); } function reset() { axes_labels.text(""); states.transition().style("fill", null); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } svg.call(zoom); // end of Mike Bostock's code svg.node().scale = color_scale; return svg.node(); }