viewof usStatesMap = { // Global variables (for use in updates) let perwtByFips, counties, radiusScale, countyColorScale; // 1) Create a container with SVG, tooltip, and legend container. const container = html`

Geospatial Distribution of Artistic Occupations Across U.S. States and Counties

`; // 2) Grab references to the SVG, tooltip, and legend container. const svg = d3.select(container).select("svg"); const tooltip = d3.select(container).select(".tooltip"); const legendContainer = d3.select(container).select("#legendContainer"); const width = +svg.attr("width"); const height = +svg.attr("height"); const projection = d3 .geoAlbersUsa() .scale(1300) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); async function drawMap() { // 3) Load main data (CSV with STATE, COUNTY, PERWT) const rawData = await FileAttachment("updated_data.csv").csv(); const data = rawData.map((d) => ({ STATE: d.STATE?.trim() || "", COUNTY: d.COUNTY?.trim() || "", PERWT: +d.PERWT || 0 })); // 4) Load the crosswalk from fips@2.csv (with "State Name", "County Name", and "5 digit FIPS") const crosswalkRaw = await FileAttachment("fips@2.csv").csv(); const crosswalkMap = new Map(); crosswalkRaw.forEach((row) => { const sName = (row["State Name"] || "").trim().toLowerCase(); const cName = (row["County Name"] || "").trim().toLowerCase(); // Use the provided "5 digit FIPS" column; pad if necessary. const rawFips = (row["5 digit FIPS"] || "").trim(); const fips = rawFips.padStart(5, "0"); crosswalkMap.set(`${sName}_${cName}`, fips); }); // 5) Load the US TopoJSON (with states & counties) const usTopo = await FileAttachment("counties-10m.json").json(); const states = topojson.feature(usTopo, usTopo.objects.states).features; counties = topojson.feature(usTopo, usTopo.objects.counties).features; // global // 6) Aggregate PERWT by state (using state names) const perwtByState = d3.rollup( data, (v) => d3.sum(v, (d) => d.PERWT), (d) => d.STATE.toLowerCase() ); // 7) Aggregate PERWT by county using crosswalk (key: 5-digit FIPS) perwtByFips = d3.rollup( data, (v) => d3.sum(v, (d) => d.PERWT), (d) => { const key = `${d.STATE.toLowerCase()}_${d.COUNTY.toLowerCase()}`; return crosswalkMap.get(key) || "unknown"; } ); // 8) Create a log-based red color scale for states. const stateValues = []; states.forEach((s) => { const stName = s.properties.name?.toLowerCase() || ""; const val = perwtByState.get(stName) || 0; stateValues.push(val); }); const maxStateVal = d3.max(stateValues) || 0; const stateColorScale = d3 .scaleSequential(d3.interpolateReds) .domain([0, Math.log(maxStateVal + 1)]); // 9) Draw state polygons with tooltips. svg .selectAll(".state") .data(states) .join("path") .attr("class", "state") .attr("d", path) .attr("fill", (d) => { const stName = d.properties.name?.toLowerCase() || ""; const val = perwtByState.get(stName) || 0; return stateColorScale(Math.log(val + 1)); }) .on("mouseover", (event, d) => { d3.select(event.currentTarget) .attr("stroke", "#000") .attr("stroke-width", 2); const stName = d.properties.name || ""; const val = perwtByState.get(stName.toLowerCase()) || 0; tooltip.style("visibility", "visible").html(`

${stName} State

Number of Artists: ${val}

`); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, container); tooltip.style("left", x + 10 + "px").style("top", y - 28 + "px"); }) .on("mouseout", (event) => { d3.select(event.currentTarget) .attr("stroke", "#fff") .attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); // 10) Prepare scales for county bubbles. const countyValues = []; counties.forEach((c) => { const val = perwtByFips.get(c.id) || 0; // c.id is the 5-digit FIPS code countyValues.push(val); }); const maxCountyVal = d3.max(countyValues) || 0; radiusScale = d3.scaleSqrt().domain([0, maxCountyVal]).range([0, 12]); // (Using a fixed blue color for bubbles) countyColorScale = d3 .scaleSequential(d3.interpolateBlues) .domain([0, Math.sqrt(maxCountyVal)]); // 11) Draw county bubbles (only those with data) with tooltips. svg .selectAll(".county-bubble") .data(counties.filter((d) => perwtByFips.has(d.id))) .join("circle") .attr("class", "county-bubble") .attr("cx", (d) => path.centroid(d)[0]) .attr("cy", (d) => path.centroid(d)[1]) .attr("r", (d) => { const val = perwtByFips.get(d.id); return radiusScale(val); }) .on("mouseover", (event, d) => { const fips = d.id; const countyVal = perwtByFips.get(fips); const countyName = d.properties.name || ""; tooltip.style("visibility", "visible").html(`

${countyName} County

Number of Artists: ${countyVal}

`); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, container); tooltip.style("left", x + 10 + "px").style("top", y - 28 + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }); // 12) Build legends for state heatmap and county bubble size. buildLegends(maxStateVal, maxCountyVal, stateColorScale, radiusScale); } // Function to build legends. function buildLegends( maxStateVal, maxCountyVal, stateColorScale, radiusScale ) { legendContainer.html(""); // Clear previous legends. // --- State Color Legend --- const stateLegendDiv = legendContainer .append("div") .attr("class", "legend") .style("margin-bottom", "10px"); stateLegendDiv .append("div") .attr("class", "legendTitle") .text("State Heatmap (Total Artists)"); const legendWidth = 200, legendHeight = 10; const svgStateLegend = stateLegendDiv .append("svg") .attr("width", legendWidth) .attr("height", 40); const gradient = svgStateLegend .append("defs") .append("linearGradient") .attr("id", "state-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); const steps = 10; d3.range(steps).forEach((i) => { const t = i / (steps - 1); // Convert t to a value on the log scale const value = Math.exp(t * Math.log(maxStateVal + 1)) - 1; gradient .append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", stateColorScale(Math.log(value + 1))); }); svgStateLegend .append("rect") .attr("x", 0) .attr("y", 10) .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#state-gradient)"); const stateAxisScale = d3 .scaleLinear() .domain([0, maxStateVal]) .range([0, legendWidth]); const stateAxis = d3 .axisBottom(stateAxisScale) .ticks(5) .tickFormat(d3.format(".2s")); svgStateLegend .append("g") .attr("transform", `translate(0, ${10 + legendHeight})`) .call(stateAxis); // --- County Bubble Size Legend --- const bubbleLegendDiv = legendContainer .append("div") .attr("class", "legend") .style("margin-bottom", "10px"); bubbleLegendDiv .append("div") .attr("class", "legendTitle") .text("County Bubble Size (Artists)"); const svgBubbleLegend = bubbleLegendDiv .append("svg") .attr("width", 200) .attr("height", 80); const sampleVals = [ Math.round(maxCountyVal * 0.25), Math.round(maxCountyVal * 0.5), Math.round(maxCountyVal) ]; sampleVals.forEach((v, i) => { const r = radiusScale(v); const cx = 40 + i * 60; const cy = 40; svgBubbleLegend .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", r) .attr("fill", "blue") .attr("fill-opacity", 0.7) .attr("stroke", "#fff"); svgBubbleLegend .append("text") .attr("x", cx) .attr("y", cy + r + 15) .attr("text-anchor", "middle") .style("font-size", "10px") .text(v); }); } // 13) Invoke the async function to draw the map and legends. drawMap(); return container; }