2f:Tf46,function drawRaceBarChart(geoid) { const raceKeys = [ "White (%)", "African American (%)", "Asian American (%)", "Hispanic (%)", "Native American (%)", "Other/Multiple (%)" ]; const tractData = tractMap.get(geoid); if (!tractData) return d3.create("svg").node(); // fallback for missing data const countyName = tractData["California County"]; // Compute California averages const stateAverages = {}; raceKeys.forEach((key) => { const values = caTracts.features .map((f) => +tractMap.get(f.properties.GEOID)?.[key]) .filter((v) => !isNaN(v)); stateAverages[key] = values.length > 0 ? d3.mean(values) : null; }); const data = raceKeys.flatMap((key) => { const race = key.replace(" (%)", ""); return [ { race, group: countyName, percent: +tractData[key] ?? null }, { race, group: "California", percent: stateAverages[key] } ]; }); // Dimensions const width = 600, height = 300, margin = { top: 30, right: 30, bottom: 40, left: 50 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const x0 = d3 .scaleBand() .domain(raceKeys.map((k) => k.replace(" (%)", ""))) .range([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() .domain(["California", countyName]) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const color = d3 .scaleOrdinal() .domain(["California", countyName]) .range(["#B0C4DE", "#4682B4"]); // Bars svg .append("g") .selectAll("g") .data(d3.group(data, (d) => d.race)) .join("g") .attr("transform", ([race]) => `translate(${x0(race)},0)`) .selectAll("rect") .data(([, group]) => group) .join("rect") .attr("x", (d) => x1(d.group)) .attr("y", (d) => (d.percent !== null ? y(d.percent) : y(0))) .attr("width", x1.bandwidth()) .attr("height", (d) => (d.percent !== null ? y(0) - y(d.percent) : 0)) .attr("fill", (d) => color(d.group)); // Y Axis svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(5) .tickFormat((d) => `${d}%`) ) .style("font-size", "11px"); // X Axis svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)); // Labels svg .append("g") .selectAll("g") .data(d3.group(data, (d) => d.race)) .join("g") .attr("transform", ([race]) => `translate(${x0(race)},0)`) .selectAll("text") .data(([, group]) => group) .join("text") .attr("x", (d) => x1(d.group) + x1.bandwidth() / 2) .attr("y", (d) => (d.percent !== null ? y(d.percent) - 5 : y(0))) .attr("text-anchor", "middle") .style("font-size", "11px") .text((d) => d.percent !== null && !isNaN(d.percent) ? `${d.percent.toFixed(1)}%` : "" ); // Title svg .append("text") .attr("x", width / 2 - 100) .attr("y", margin.top - 15) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text(`Race Composition`); // Legend const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margin.top})`); [countyName, "California"].forEach((label, i) => { legend .append("rect") .attr("x", i * -80 - 40) .attr("y", margin.top - 60) .attr("width", 15) .attr("height", 15) .attr("fill", color(label)); legend .append("text") .attr("x", i * -80 - 20) .attr("y", margin.top - 50) .text(label === countyName ? countyName : "California") .style("font-size", "12px"); }); return svg.node(); }30:T1152,function drawRaceBarChart2(countyName) { const raceKeys = [ "White (%)", "African American (%)", "Asian American (%)", "Hispanic (%)", "Native American (%)", "Other/Multiple (%)" ]; // --- County-Level Aggregation --- const countyTracts = caTracts.features.filter( (f) => f.properties.county && f.properties.county.trim() === countyName.trim() ); const raceTotals = {}; raceKeys.forEach((race) => (raceTotals[race] = 0)); countyTracts.forEach((f) => { const match = tractMap.get(f.properties.GEOID); if (match) { const pop = +match["Total Population"]; raceKeys.forEach((race) => { const pct = +match[race]; if (!isNaN(pct)) { raceTotals[race] += (pct / 100) * pop; } }); } }); const totalPop = Object.values(raceTotals).reduce((a, b) => a + b, 0); const countyData = raceKeys.map((race) => ({ race: race.replace(" (%)", ""), percent: (raceTotals[race] / totalPop) * 100, level: "County" })); // --- California-Level Aggregation (inline, no external pre-work) --- const stateTotals = {}; raceKeys.forEach((race) => (stateTotals[race] = 0)); caTracts.features.forEach((f) => { const match = tractMap.get(f.properties.GEOID); if (match) { const pop = +match["Total Population"]; raceKeys.forEach((race) => { const pct = +match[race]; if (!isNaN(pct)) { stateTotals[race] += (pct / 100) * pop; } }); } }); const statePop = Object.values(stateTotals).reduce((a, b) => a + b, 0); const stateData = raceKeys.map((race) => ({ race: race.replace(" (%)", ""), percent: (stateTotals[race] / statePop) * 100, level: "California" })); const data = [...countyData, ...stateData]; // --- Chart Rendering --- const width = 600, height = 300, margin = { top: 30, right: 30, bottom: 40, left: 50 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const x0 = d3 .scaleBand() .domain(raceKeys.map((d) => d.replace(" (%)", ""))) .range([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() .domain(["County", "California"]) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const color = d3 .scaleOrdinal() .domain(["County", "California"]) .range(["#4682B4", "#B0C4DE"]); const grouped = d3.group(data, (d) => d.race); svg .append("g") .selectAll("g") .data(grouped) .join("g") .attr("transform", (d) => `translate(${x0(d[0])},0)`) .selectAll("rect") .data((d) => d[1]) .join("rect") .attr("x", (d) => x1(d.level)) .attr("y", (d) => y(d.percent)) .attr("height", (d) => y(0) - y(d.percent)) .attr("width", x1.bandwidth()) .attr("fill", (d) => color(d.level)); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat((d) => d + "%")); // --- Add percent labels --- svg .append("g") .selectAll("g") .data(grouped) .join("g") .attr("transform", (d) => `translate(${x0(d[0])},0)`) .selectAll("text") .data((d) => d[1]) .join("text") .attr("x", (d) => x1(d.level) + x1.bandwidth() / 2) .attr("y", (d) => y(d.percent) - 5) .attr("text-anchor", "middle") .style("font-size", "11px") .text((d) => d.percent.toFixed(1) + "%"); // Chart title svg .append("text") .attr("x", width / 2 - 120) .attr("y", margin.top - 10) .attr("text-anchor", "middle") .attr("font-size", "16px") .style("font-weight", "bold") .text(`Race Composition in ${countyName}`); // Legend const legend = svg .append("g") .attr("transform", `translate(${width - 130}, ${margin.top})`); [countyName, "California"].forEach((label, i) => { legend .append("rect") .attr("x", 30) .attr("y", i * 20 - 30) .attr("width", 15) .attr("height", 15) .attr("fill", color(label)); legend .append("text") .attr("x", 50) .attr("y", i * 20 - 20) .text(label) .style("font-size", "12px"); }); return svg.node(); } 31:T1132,function drawPollutionBarChart(geoid) { const pollutantKeys = [ "Ozone Pctl", "PM2.5 Pctl", "Lead Pctl", "Pesticides Pctl", "Tox. Release Pctl", "Haz. Waste Pctl", "Imp. Water Bodies Pctl", "Solid Waste Pctl" ]; const labels = { "Ozone Pctl" : "Ozone", "PM2.5 Pctl" : "PM2.5", "Lead Pctl" : "Lead", "Pesticides Pctl" : "Pesticides", "Tox. Release Pctl" : "Toxic Release", "Haz. Waste Pctl": "Hazardous Waste", "Imp. Water Bodies Pctl": "Imp. Water Bodies", "Solid Waste Pctl": "Solid Waste" }; const geoidData = tractMap.get(geoid); if (!geoidData) { console.warn(`No data found for GEOID ${geoid}`); return d3.create("svg").node(); } const countyName = geoidData["California County"]; const stateSums = {}, stateCounts = {}; pollutantKeys.forEach((key) => { stateSums[key] = 0; stateCounts[key] = 0; }); // Calculate state averages caTracts.features.forEach((f) => { const match = tractMap.get(f.properties.GEOID); if (!match) return; pollutantKeys.forEach((key) => { const val = +match[key]; if (!isNaN(val)) { stateSums[key] += val; stateCounts[key] += 1; } }); }); const data = pollutantKeys.flatMap((key) => [ { factor: labels[key], level: "Tract", value: +geoidData[key] || 0 }, { factor: labels[key], level: "California", value: stateCounts[key] > 0 ? stateSums[key] / stateCounts[key] : 0 } ]); // --- D3 Setup --- const width = 600, height = 300, margin = { top: 30, right: 30, bottom: 40, left: 50 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const factors = [...new Set(data.map((d) => d.factor))]; const levels = ["Tract", "California"]; const x0 = d3 .scaleBand() .domain(factors) .range([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() .domain(levels) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const color = d3 .scaleOrdinal() .domain(levels) .range(["#F67B50", "#FBC490"]); // Bars svg .append("g") .selectAll("g") .data(factors) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("rect") .data((factor) => data.filter((d) => d.factor === factor)) .join("rect") .attr("x", (d) => x1(d.level)) .attr("y", (d) => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", (d) => y(0) - y(d.value)) .attr("fill", (d) => color(d.level)); // Value Labels svg .append("g") .selectAll("g") .data(factors) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("text") .data((factor) => data.filter((d) => d.factor === factor)) .join("text") .attr("x", (d) => x1(d.level) + x1.bandwidth() / 2) .attr("y", (d) => y(d.value) - 5) .attr("text-anchor", "middle") .style("font-size", "10px") .text((d) => d.value.toFixed(1) + "%"); // Y-Axis svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat((d) => `${d}%`)) .selectAll("text") .style("font-size", "11px"); // X-Axis svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)) .selectAll("text") .attr("transform", "rotate(-10)") .style("text-anchor", "middle"); // Title svg .append("text") .attr("x", width / 2 - 100) .attr("y", margin.top - 15) .attr("text-anchor", "middle") .attr("font-size", "16px") .style("font-weight", "bold") .text(`Pollution Burdens`); // Legend const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margin.top})`); levels.forEach((level, i) => { legend .append("rect") .attr("x", i *(-80) - 40) .attr("y", margin.top - 60) .attr("width", 15) .attr("height", 15) .attr("fill", color(level)); legend .append("text") .attr("x", i*(-80) -20) .attr("y", margin.top - 50) .text(level === "Tract" ? countyName : "California") .style("font-size", "12px"); }); return svg.node(); } 32:T1055,function drawPollutionBarChart2(countyName) { const pollutantKeys = [ "Ozone Pctl", "PM2.5 Pctl", "Lead Pctl", "Pesticides Pctl", "Tox. Release Pctl", "Haz. Waste Pctl", "Imp. Water Bodies Pctl", "Solid Waste Pctl" ]; // Initialize data structures const countySums = {}, countyCounts = {}; const stateSums = {}, stateCounts = {}; pollutantKeys.forEach((key) => { countySums[key] = 0; countyCounts[key] = 0; stateSums[key] = 0; stateCounts[key] = 0; }); caTracts.features.forEach((f) => { const match = tractMap.get(f.properties.GEOID); if (!match) return; pollutantKeys.forEach((key) => { const val = +match[key]; if (!isNaN(val)) { stateSums[key] += val; stateCounts[key] += 1; if (f.properties.county?.trim() === countyName.trim()) { countySums[key] += val; countyCounts[key] += 1; } } }); }); // Combine data into array const data = pollutantKeys.flatMap((key) => [ { pollutant: key.replace(" Pctl", ""), level: "County", value: countyCounts[key] > 0 ? countySums[key] / countyCounts[key] : 0 }, { pollutant: key.replace(" Pctl", ""), level: "California", value: stateCounts[key] > 0 ? stateSums[key] / stateCounts[key] : 0 } ]); // --- D3 Setup --- const width = 600, height = 300, margin = { top: 30, right: 30, bottom: 40, left: 50 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const pollutants = [...new Set(data.map((d) => d.pollutant))]; const levels = ["County", "California"]; const x0 = d3 .scaleBand() .domain(pollutants) .range([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() .domain(levels) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const color = d3 .scaleOrdinal() .domain(levels) .range(["#F67B50", "#FBC490"]); // Bars svg .append("g") .selectAll("g") .data(pollutants) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("rect") .data((pollutant) => data.filter((d) => d.pollutant === pollutant)) .join("rect") .attr("x", (d) => x1(d.level)) .attr("y", (d) => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", (d) => y(0) - y(d.value)) .attr("fill", (d) => color(d.level)); // Percent Labels svg .append("g") .selectAll("g") .data(pollutants) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("text") .data((pollutant) => data.filter((d) => d.pollutant === pollutant)) .join("text") .attr("x", (d) => x1(d.level) + x1.bandwidth() / 2) .attr("y", (d) => y(d.value) - 5) .attr("text-anchor", "middle") .style("font-size", "10px") .text((d) => d.value.toFixed(1) + "%"); // Axes svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)) .selectAll("text") .attr("transform", "rotate(-10)") .style("text-anchor", "middle"); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat((d) => d + "%")); // Title svg .append("text") .attr("x", width / 2 - 120) .attr("y", margin.top - 10) .attr("text-anchor", "middle") .attr("font-size", "16px") .style("font-weight", "bold") .text(`Pollution Percentiles in ${countyName}`); // Legend const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margin.top})`); levels.forEach((level, i) => { legend .append("rect") .attr("x", 30) .attr("y", i * 20 - 30) .attr("width", 15) .attr("height", 15) .attr("fill", color(level)); legend .append("text") .attr("x", 50) .attr("y", i * 20 - 20) .text(level === "County" ? countyName : "California") .style("font-size", "12px"); }); return svg.node(); } 33:T1077,function drawDemographicsBarChart(geoid) { const demographicKeys = [ "Education", "Poverty", "Unemployment", "Age_Adjusted_Rate_of_Asthma_ED_V" ]; const labels = { Education: "Low Education", Poverty: "Poverty", Unemployment: "Unemployment", Age_Adjusted_Rate_of_Asthma_ED_V: "Asthma Emergency Visits" }; const geoidData = tractMap.get(geoid); if (!geoidData) { console.warn(`No data found for GEOID ${geoid}`); return d3.create("svg").node(); // return empty SVG } const countyName = geoidData["California County"]; const stateSums = {}, stateCounts = {}; demographicKeys.forEach((key) => { stateSums[key] = 0; stateCounts[key] = 0; }); // Calculate state averages caTracts.features.forEach((f) => { const match = tractMap.get(f.properties.GEOID); if (!match) return; demographicKeys.forEach((key) => { const val = +match[key]; if (!isNaN(val)) { stateSums[key] += val; stateCounts[key] += 1; } }); }); const data = demographicKeys.flatMap((key) => [ { factor: labels[key], level: "Tract", value: +geoidData[key] || 0 }, { factor: labels[key], level: "California", value: stateCounts[key] > 0 ? stateSums[key] / stateCounts[key] : 0 } ]); // --- D3 Setup --- const width = 600, height = 300, margin = { top: 30, right: 30, bottom: 40, left: 50 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const factors = [...new Set(data.map((d) => d.factor))]; const levels = ["Tract", "California"]; const x0 = d3 .scaleBand() .domain(factors) .range([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() .domain(levels) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(levels).range(["#778A35", "#D1E2C4"]); // Bars svg .append("g") .selectAll("g") .data(factors) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("rect") .data((factor) => data.filter((d) => d.factor === factor)) .join("rect") .attr("x", (d) => x1(d.level)) .attr("y", (d) => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", (d) => y(0) - y(d.value)) .attr("fill", (d) => color(d.level)); // Value Labels svg .append("g") .selectAll("g") .data(factors) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("text") .data((factor) => data.filter((d) => d.factor === factor)) .join("text") .attr("x", (d) => x1(d.level) + x1.bandwidth() / 2) .attr("y", (d) => y(d.value) - 5) .attr("text-anchor", "middle") .style("font-size", "10px") .text((d) => d.value.toFixed(1) + "%"); // Y-Axis svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(5) .tickFormat((d) => `${d}%`) ) .selectAll("text") .style("font-size", "11px"); // X-Axis svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)); // Title svg .append("text") .attr("x", width / 2 - 100) .attr("y", margin.top - 15) .attr("text-anchor", "middle") .attr("font-size", "16px") .style("font-weight", "bold") .text(`Demographic Characteristics`); // Legend const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margin.top})`); levels.forEach((level, i) => { levels.forEach((level, i) => { legend .append("rect") .attr("x", i * -80 - 40) .attr("y", margin.top - 60) .attr("width", 15) .attr("height", 15) .attr("fill", color(level)); legend .append("text") .attr("x", i * -80 - 20) .attr("y", margin.top - 50) .text(level === "Tract" ? countyName : "California") .style("font-size", "12px"); }); }); return svg.node(); }34:T104a,function drawDemographicsBarChart2(countyName) { const demographicKeys = [ "Education Pctl", "Poverty Pctl", "Unemployment Pctl", "Age_Adjusted_Rate_of_Asthma_ED_V" ]; const labels = { "Education Pctl": "Low Education", "Poverty Pctl": "Poverty", "Unemployment Pctl": "Unemployment", "Age_Adjusted_Rate_of_Asthma_ED_V": "Asthma Emergency Visits" }; const countySums = {}, countyCounts = {}; const stateSums = {}, stateCounts = {}; demographicKeys.forEach((key) => { countySums[key] = 0; countyCounts[key] = 0; stateSums[key] = 0; stateCounts[key] = 0; }); caTracts.features.forEach((f) => { const match = tractMap.get(f.properties.GEOID); if (!match) return; demographicKeys.forEach((key) => { const val = +match[key]; if (!isNaN(val)) { stateSums[key] += val; stateCounts[key] += 1; if (f.properties.county?.trim() === countyName.trim()) { countySums[key] += val; countyCounts[key] += 1; } } }); }); const data = demographicKeys.flatMap((key) => [ { factor: labels[key], level: "County", value: countyCounts[key] > 0 ? countySums[key] / countyCounts[key] : 0 }, { factor: labels[key], level: "California", value: stateCounts[key] > 0 ? stateSums[key] / stateCounts[key] : 0 } ]); // --- D3 Setup --- const width = 600, height = 300, margin = { top: 30, right: 30, bottom: 40, left: 50 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const factors = [...new Set(data.map((d) => d.factor))]; const levels = ["County", "California"]; const x0 = d3 .scaleBand() .domain(factors) .range([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() .domain(levels) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const color = d3 .scaleOrdinal() .domain(levels) .range(["#778A35", "#D1E2C4"]); // Bars svg .append("g") .selectAll("g") .data(factors) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("rect") .data((factor) => data.filter((d) => d.factor === factor)) .join("rect") .attr("x", (d) => x1(d.level)) .attr("y", (d) => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", (d) => y(0) - y(d.value)) .attr("fill", (d) => color(d.level)); // Value Labels svg .append("g") .selectAll("g") .data(factors) .join("g") .attr("transform", (d) => `translate(${x0(d)},0)`) .selectAll("text") .data((factor) => data.filter((d) => d.factor === factor)) .join("text") .attr("x", (d) => x1(d.level) + x1.bandwidth() / 2) .attr("y", (d) => y(d.value) - 5) .attr("text-anchor", "middle") .style("font-size", "10px") .text((d) => d.value.toFixed(1) + "%"); // Y-Axis svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat((d) => d + "%")) .selectAll("text") .style("font-size", "12px"); // X-Axis svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)); // Title svg .append("text") .attr("x", width / 2 - 100) .attr("y", margin.top - 10) .attr("text-anchor", "middle") .attr("font-size", "16px") .style("font-weight", "bold") .text(`Demographic Characteristics in ${countyName}`); // Legend const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margin.top})`); levels.forEach((level, i) => { legend .append("rect") .attr("x", 30) .attr("y", i * 20 - 30) .attr("width", 15) .attr("height", 15) .attr("fill", color(level)); legend .append("text") .attr("x", 50) .attr("y", i * 20 - 20) .text(level === "County" ? countyName : "California") .style("font-size", "12px"); }); return svg.node(); } 35:T10a6,function svgAll( d3, caTracts, colorScales, drawRaceBarChart, drawPollutionBarChart, demographicsChart ) { const width = 500, height = 1000; const projection = d3 .geoAlbers() .fitSize([width - 60, height - 60], caTracts); const path = d3.geoPath(projection); const svg = d3.create("svg").attr("width", width).attr("height", height); const g = svg.append("g"); let clickTimeout; const countyPaths = g .append("g") .attr("cursor", "pointer") .selectAll("path") .data(caTracts.features) .join("path") .attr("fill", (d) => isNaN(d.properties.pollution_pct) ? "#ccc" : colorScales(d.properties.pollution_pct) ) .attr("d", path) .on("click", (event, d) => { clickTimeout = setTimeout(() => { const county = d.properties.county; const geoid = d.properties.geoid; if (county) { d3.select("#raceChart").html(""); d3.select("#pollutionChart").html(""); d3.select("#demographicsChart").html(""); d3.select("#raceChart").node().appendChild(drawRaceBarChart(geoid)); d3.select("#pollutionChart") .node() .appendChild(drawPollutionBarChart(geoid)); d3.select("#demographicsChart") .node() .appendChild(drawDemographicsBarChart(geoid)); } }, 250); }); countyPaths.on("dbclick", (event, d) => { clearTimeout(clickTimeout); clicked(event, d); }); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("background", "white") .style("padding", "6px 10px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("font-size", "12px") .style("box-shadow", "0 2px 5px rgba(0,0,0,0.2)") .style("opacity", 0); // countyPaths.append("title").text((d) => { // const county = d.properties.county; // const pollPct = d.properties.pollution_pct; // return `${county ?? "Unknown"}: ${pollPct != null ? pollPct + "%" : "N/A"}`; // }); // try other hover-over countyPaths .on("mouseover", (event, d) => { const county = d.properties.county; const pollraw = d.properties.pollution_pct; const pollPct = pollraw != null ? +pollraw : null; // if (county == null && pollPct == null) return; // Skip showing tooltip tooltip.style("opacity", 1).html(` ${county ?? "Unknown County"}
Pollution: ${pollPct != null ? pollPct.toFixed(1) + "%" : "N/A"}`); }) .on("mousemove", (event) => { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px"); }) .on("mouseout", () => { tooltip.style("opacity", 0); }); svg .append("text") .attr("x", width / 2 - 200) .attr("y", 25) .style("font-size", "16px") .style("font-weight", "bold") .text("Geographical Visualization of Pollution Burden Percentile"); const zoom = d3.zoom().scaleExtent([1, 4]).on("zoom", zoomed); function reset() { svg.transition().duration(800).call(zoom.transform, d3.zoomIdentity); // clear loaded charts d3.select("#raceChart").html(""); d3.select("#pollutionChart").html(""); d3.select("#demographicsChart").html(""); } svg.call(zoom); d3.select("#resetZoomBtn").on("click", reset); // adding functions that allows both clicking and zooming in behaviors function clicked(event, d) { const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); svg .transition() .duration(800) .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()) ); } function zoomed(event) { const { transform } = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } d3.select("#resetZoomBtn").on("click", reset); return { node: svg.node(), reset }; }36:[{"id":"afb86ca7b1487c6bf6e63875b9f48613e9109cd333e6ded52825999c6a2568ca0b42a3a1d395b4610e16c7e838d0b8220bdc0ca3fd749fa838c041acfd8f282b","href":"https://static.observableusercontent.com/files/afb86ca7b1487c6bf6e63875b9f48613e9109cd333e6ded52825999c6a2568ca0b42a3a1d395b4610e16c7e838d0b8220bdc0ca3fd749fa838c041acfd8f282b","name":"asthma_included.csv","type":"text/csv","lastModified":1754175581549.491,"size":5125279}] 2d:{"title":"Clean version of California Map","cells":[{"id":0,"value":"# Clean version of California Map","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"viewof panel = {\n const container = html`\n

\n\n

`;\n\n const { node, reset } = svgAll(\n d3,\n caTracts,\n colorScales,\n drawRaceBarChart,\n drawPollutionBarChart,\n drawDemographicsBarChart\n );\n\n container.querySelector(\"#mapContainer\").appendChild(node);\n\n d3.select(container).select(\"#resetZoomBtn\").on(\"click\", reset);\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"## Cleaning Data","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = await FileAttachment(\"asthma_included.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"data.columns","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"caTracts = await d3.json(\"https://raw.githubusercontent.com/arcee123/GIS_GEOJSON_CENSUS_TRACTS/master/06.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"tractMap = new Map (\n data.map((d) => [String(d[\"Census Tract\"]).padStart(11, \"0\"), d])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"caTracts.features.forEach((f) => {\n const geoid = f.properties.GEOID;\n const match = tractMap.get(geoid);\n if (match) {\n const county = match[\"California County\"]?.trim();\n const pollution = d3.format(\".2f\")(+match[\"Pollution Burden Pctl\"]);\n const asthma_edv = d3.format(\".2f\")(+match[\"Age_Adjusted_Rate_of_Asthma_ED_V\"]);\n f.properties.geoid = geoid\n f.properties.pollution_pct = isNaN(pollution) ? null:pollution\n f.properties.county = county ? county.trim():null;\n f.properties.asthma_rates = isNaN(asthma_edv) ? null:asthma_edv;\n \n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"colorScales = d3.scaleSequential(d3.interpolateReds).domain([0, 100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"drawRaceBarChart(\"06019001202\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"drawPollutionBarChart(\"06019001202\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"drawDemographicsBarChart(\"06019001202\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}