// Observable-style viewof bubble chart viewof kickstarterFundingViz = { const container = html`

📊 Kickstarter Funding by U.S. States & Counties

State: Metric:

`; const stateDropdown = d3.select(container).select("#stateFilter"); const metricDropdown = d3.select(container).select("#metricSelector"); const resetButton = d3.select(container).select("#resetButton"); const svg = d3.select(container).select("svg"); const tooltip = d3.select(container).select(".tooltip"); const legendDiv = d3.select(container).select(".legend"); const dataset = await FileAttachment("cleaned_kickstarter_cleaned.json").json(); const fipsMapping = await FileAttachment("fips_to_county_mapping.json").json(); const fipsToState = { "01": "Alabama", "02": "Alaska", "04": "Arizona", "05": "Arkansas", "06": "California", "08": "Colorado", "09": "Connecticut", "10": "Delaware", "11": "District of Columbia", "12": "Florida", "13": "Georgia", "15": "Hawaii", "16": "Idaho", "17": "Illinois", "18": "Indiana", "19": "Iowa", "20": "Kansas", "21": "Kentucky", "22": "Louisiana", "23": "Maine", "24": "Maryland", "25": "Massachusetts", "26": "Michigan", "27": "Minnesota", "28": "Mississippi", "29": "Missouri", "30": "Montana", "31": "Nebraska", "32": "Nevada", "33": "New Hampshire", "34": "New Jersey", "35": "New Mexico", "36": "New York", "37": "North Carolina", "38": "North Dakota", "39": "Ohio", "40": "Oklahoma", "41": "Oregon", "42": "Pennsylvania", "44": "Rhode Island", "45": "South Carolina", "46": "South Dakota", "47": "Tennessee", "48": "Texas", "49": "Utah", "50": "Vermont", "51": "Virginia", "53": "Washington", "54": "West Virginia", "55": "Wisconsin", "56": "Wyoming" }; const stateCountyMapping = {}; fipsMapping.forEach(entry => { const fips = entry.fips; const county = entry.name; const stateCode = fips.substring(0, 2); const state = fipsToState[stateCode]; if (!state) return; if (!stateCountyMapping[state]) stateCountyMapping[state] = []; stateCountyMapping[state].push({ fips, county }); }); stateDropdown.append("option").attr("value", "all").text("All States"); Object.keys(stateCountyMapping).sort().forEach(state => { stateDropdown.append("option").attr("value", state).text(state); }); function cleanCountyName(name) { return name.replace(/ County| City| Parish| Borough/gi, "").trim(); } function updateChart(state, _, metric) { let filteredData = dataset.filter(d => d[metric]); if (state === "all") { const stateValues = {}; filteredData.forEach(d => { const stateCode = d.fips.substring(0, 2); const stateName = fipsToState[stateCode]; if (!stateName) return; if (!stateValues[stateName]) stateValues[stateName] = { value: 0 }; stateValues[stateName].value += +d[metric]; }); const rootData = { name: "States", children: Object.entries(stateValues).map(([state, val]) => ({ name: state, value: val.value })) }; drawChart(rootData, metric, "state"); } else { filteredData = filteredData.filter(d => stateCountyMapping[state]?.some(c => c.fips === d.fips)); const rootData = { name: "Counties", children: filteredData.map(d => ({ name: cleanCountyName(fipsMapping.find(entry => entry.fips === d.fips)?.name || "Unknown"), value: +d[metric], fips: d.fips })) }; drawChart(rootData, metric, "county"); } } function drawChart(rootData, metric, level) { svg.selectAll("*").remove(); const root = d3.pack().size([850, 850]).padding(4)(d3.hierarchy(rootData).sum(d => d.value)); const values = rootData.children.map(d => d.value); const colorScale = d3.scaleSequential(d3.interpolatePlasma).domain([d3.min(values), d3.max(values)]); const nodes = svg.selectAll(".node") .data(root.descendants().slice(1)) .enter().append("g") .attr("class", "node") .attr("transform", d => `translate(${d.x},${d.y})`); nodes.append("circle") .attr("r", 0) .attr("fill", d => colorScale(d.data.value)) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .transition().duration(800).ease(d3.easeBackOut) .attr("r", d => d.r); nodes.append("text") .text(d => d.r > 30 ? d.data.name : "") .attr("dy", "0.35em") .style("text-anchor", "middle") .style("fill", "#fff") .style("font-weight", "600") .style("font-size", d => `${Math.min(d.r / 3, 14)}px`) .style("font-family", "'Segoe UI', Arial, sans-serif") .style("text-shadow", "0px 0px 4px rgba(0,0,0,0.7)"); let tooltipHideTimeout; nodes.on("mouseover", function(event, d) { clearTimeout(tooltipHideTimeout); let html = `${d.data.name}
`; if (level === "state") { html += `${metric}: ${d3.format("$,.0f")(d.data.value)}`; } else { const countyData = dataset.find(entry => entry.fips === d.data.fips); html += `

Total Funding: ${d3.format("$,.0f")(countyData?.sumamt || 0)}
Median Funding: ${d3.format("$,.0f")(countyData?.medamt || 0)}
Average Funding: ${d3.format("$,.0f")(countyData?.meanamt || 0)}
Total Backers: ${countyData?.sumbackers ?? 0}

`; } tooltip.style("display", "block").style("opacity", 1).html(html); }) .on("mousemove", event => tooltip.style("left", (event.pageX + 15) + "px").style("top", (event.pageY - 40) + "px")) .on("mouseout", () => { tooltipHideTimeout = setTimeout(() => { tooltip.transition().duration(300).style("opacity", 0) .on("end", () => tooltip.style("display", "none")); }, 200); }); // Legend legendDiv.html(""); const legendSvg = legendDiv.append("svg").attr("width", 300).attr("height", 40); const defs = legendSvg.append("defs"); const linearGradient = defs.append("linearGradient").attr("id", "gradient"); linearGradient.selectAll("stop") .data(d3.range(0, 1.01, 0.01)) .enter().append("stop") .attr("offset", d => d) .attr("stop-color", d => colorScale(d3.min(values) + d * (d3.max(values) - d3.min(values)))); legendSvg.append("rect") .attr("x", 20).attr("y", 10).attr("width", 200).attr("height", 10).style("fill", "url(#gradient)"); const legendScale = d3.scaleLinear().domain([d3.min(values), d3.max(values)]).range([20, 220]); const axis = d3.axisBottom(legendScale).ticks(5).tickFormat(d3.format("$.2s")); legendSvg.append("g").attr("transform", "translate(0, 20)").call(axis); } // Event Listeners stateDropdown.on("change", function () { updateChart(this.value, null, metricDropdown.node().value); }); metricDropdown.on("change", () => { updateChart(stateDropdown.node().value, null, metricDropdown.node().value); }); resetButton.on("click", () => { stateDropdown.node().value = "all"; metricDropdown.node().value = "sumamt"; updateChart("all", null, "sumamt"); }); updateChart("all", null, "sumamt"); return container; }