2d:null 2e:["$","title",null,{"children":"K-12 Student Vaccinations in the Chicago Area | Charmaine Runes | Observable"}] 33:T563,viewof scatterplot = { const outerContainer = html`

${style()}

`; const x = 'med_hhinc'; const y = 'pct_fully_vax_12to17'; const geo = chicago; const hed = html`

The richer the ZIP code, the higher the vaccination rate for school-age children

` const subhed = html`

Percent 12-to-17-year-olds who are fully vaccinated, by ZIP

` const scatterplot = createScatterplot(x, y, geo); const sourceLang = `Public records requests from the Illinois Department of Public Health, as of ${dateDataUpdated}. Census Bureau (2019 American Community Survey 5-year file).` const notesLang = "ZIP codes with missing data (e.g., 60666 for O'Hare) are excluded from the scatterplot." const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ

` outerContainer.appendChild(hed); outerContainer.appendChild(subhed); outerContainer.appendChild(scatterplot); outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }34:T795,viewof maps = { const outerContainer = html`

${style()}

` const mapContainer = html`

` const hed = html`

What percent of school-age children are vaccinated in your ZIP code?

` const subhed = html`

Select a ZIP code within the six-county Chicago metropolitan area

` const highlightText = generateHighlighText(highlightZip, mapReference) const chicagoMapSVG = drawMap(mapData, chicago, highlightZip) const chicagoMapContainer = html`

Chicago

${chicagoMapSVG}

` const metroMapSVG = drawMap(mapData, metro, highlightZip) const metroMapContainer = html`

Six-county metropolitan area

${metroMapSVG}

` const sourceLang = `Public records requests from the Illinois Department of Public Health, as of ${dateDataUpdated}.` const notesLang = `As of ${dateDataUpdated}, the average vaccination rate of 12-to-17-year olds in the six-county Chicago metro area is 45%.` const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ

` mapContainer.appendChild(chicagoMapContainer) mapContainer.appendChild(metroMapContainer) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(viewof highlightZip) outerContainer.appendChild(highlightText) outerContainer.appendChild(mapContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }35:T75b,wideData = Object.assign(d3.csvParse(await FileAttachment("merged_vax_rates_wide.csv").text(), ({zip, pct_first_dose_0to17, pct_fully_vax_0to17, pct_first_dose_12to17, pct_fully_vax_12to17, pct_nhblack, pct_latinx, pct_broadband, pct_poverty, med_hhinc}) => ({zip, pct_first_dose_0to17: pct_first_dose_0to17, pct_fully_vax_0to17: pct_fully_vax_0to17, pct_first_dose_12to17: pct_first_dose_12to17, pct_fully_vax_12to17: pct_fully_vax_12to17, pct_nhblack: pct_nhblack, pct_latinx: pct_latinx, pct_broadband: pct_broadband, pct_poverty: pct_poverty, med_hhinc: med_hhinc})), {zip: "ZIP code", pct_first_dose_0to17: "↑ Percent 0-to-17-year-olds with at least first dose", pct_fully_vax_0to17: "↑ Percent 0-to-17-year-olds fully vaccinated", pct_first_dose_12to17: "↑ Percent 12-to-17-year-olds with at least first dose", pct_fully_vax_12to17: "↑ Percent 12-to-17-year-olds fully vaccinated", pct_nhblack: "Percent of population, non-Latinx Black →", pct_latinx: "Percent of population, Latinx (any race) →", pct_broadband: "Percent of population with broadband access →", pct_poverty: "Percent of population living below poverty →", med_hhinc: "Median household income →"})36:T7f6,function drawMap(data, geography) { let indicator = data[0].indicator // What variable to use for legend and tooltip let topo = getTopoJSON(geography) let zips = getZipsToFilter(topo) let reference = buildReference(zips, data) let domainValues = Object.values(reference) let color = buildColorRamp(domainValues) let format = context_vars.get(indicator).tickFormat // Whether to format as % or $ let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("class", "topo") // Choropleth svg.append("g") .selectAll("path") .data(topo.features) .join("path") .attr("d", createGeoPath(geography)) .attr("fill", d => color(reference[d.properties.zip])) .style("stroke", d => { if (d.properties.zip == highlightZip) { return wbezColors.get('red'); } else { return wbezColors.get('white'); } }) .style("stroke-width", d => { if (d.properties.zip == highlightZip) { return 3; } else { return .1; } }) .append("title") .text(d => { if (reference[d.properties.zip]) { return `${d.properties.zip}: ${d3.format(format)(reference[d.properties.zip])}` } else { return `${d.properties.zip}: N/A` }}) // County outlines if (geography == metro) { svg.append("path") .datum(topojson.mesh(geography, geography.objects.counties, (a, b) => a !== b)) .attr("stroke", "white") .style("fill-opacity", 0) .style("stroke-width", "3") .attr("stroke-linejoin", "round") .attr("d", createGeoPath(geography)); } // Legend svg.append("g") .attr("transform", "translate(10, 700)") .attr("class", "legend") .append(() => legend({ color, title: context_vars.get(indicator).name, tickFormat: format, width: 500, height: 50})); return svg.node(); }37:Te8d,function createScatterplot(xSelection, ySelection, geo) { // Geography filter let topo = getTopoJSON(geo) let zips = getZipsToFilter(topo) let filteredData = wideData.filter(d => zips.includes(d.zip) && d[xSelection] && d[ySelection]) // Sizing let height = 500 let margin = ({top: 25, right: 20, bottom: 35, left: 40}) let x = d3.scaleLinear() .domain(d3.extent(filteredData, d => +d[xSelection])).nice() .range([margin.left, width - margin.right]) let y = d3.scaleLinear() .domain(d3.extent(filteredData, d => +d[ySelection])).nice() .range([height - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .attr("class", "x-axis") .call(d3.axisBottom(x) .tickValues([25000, 50000, 75000, 100000, 125000, 150000]) .tickFormat(d3.format(context_vars.get(xSelection).tickFormat)) .tickSize(0)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("class", "axis-text") .attr("x", width) .attr("y", margin.bottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(wideData[xSelection])) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .attr("class", "y-axis") .call(d3.axisLeft(y) .tickFormat(d3.format(context_vars.get(ySelection).tickFormat)) .tickSize(-width)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.2) .attr("stroke-dasharray", "2,2")) .call(g => g.append("text") .attr("class", "axis-text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(wideData[ySelection])) let grid = g => g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom)) let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) // Axes svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Dots let dots = svg.append("g") .selectAll("circle") .data(filteredData) .enter() .append("circle") .attr("cx", d => x(d[xSelection])) .attr("cy", d => y(d[ySelection])) .attr("r", 5) .style("fill", d => { if (d.zip == '60613' | d.zip == '60621') { return wbezColors.get('red') } else { return wbezColors.get('lightgray') } }) .style("opacity", 0.75) .append("title") .text(d => `In ${d.zip}, ${d3.format('.0%')(d[ySelection])} of children are vaccinated.`); let highlightHighVax = '60613'; let highlightLowVax = '60621'; // Annotations // Use this to color LP and Englewood and percentages: https://stackoverflow.com/questions/49040959/how-to-color-specific-parts-of-text-div-in-d3 svg.append("text") .attr("class", "annotation") .attr("x", 410) .attr("y", 93) .text(`In Lincoln Park (${highlightHighVax}), 89% of eligible children are fully vaccinated.`) .style("fill", wbezColors.get('black')); svg.append("text") .attr("class", "annotation") .attr("x", 60) .attr("y", 440) .text(`In Englewood (${highlightLowVax}), 16% of eligible children are fully vaccinated.`) .style("fill", wbezColors.get('black')); return svg.node(); }38:T498,function generateHighlighText(zipToHighlight, reference) { if (zipToHighlight == null) { return html`

        As of ${dateDataUpdated}, ${d3.format('.0%')(0.4002384341076315)} of 12-to-17 year olds in Chicago are fully vaccinated.
    

` } else if (reference[zipToHighlight]) { return html`

        As of ${dateDataUpdated}, ${d3.format('.0%')(reference[zipToHighlight])} of 12-to-17 year olds in ${zipToHighlight} are fully vaccinated.
      

` } else { return html`

        As of ${dateDataUpdated}, data on percent of 12-to-17 year olds who are fully vaccinated in ${zipToHighlight} are unavailable.
      

` } }39:[{"id":"f55b7c0ebef8e9e6f97f64879202e429c41eb183007ad1a796f1978e23ce9b0df1867d45675f3cd5c723f3c61b7e1a99aeb2643b819086663d356e5e86c271aa","href":"https://static.observableusercontent.com/files/f55b7c0ebef8e9e6f97f64879202e429c41eb183007ad1a796f1978e23ce9b0df1867d45675f3cd5c723f3c61b7e1a99aeb2643b819086663d356e5e86c271aa","name":"cook_zctas_topo_unproj.json","type":"application/json","lastModified":1627912565832.25,"size":73464},{"id":"0753e5326ca82e4d729f8c81b8c0a182f20876ab8f8ba716586e49da23e0965afe964263dd3c3d345c3b97cb2da1fe47a76af26f5e946b64b087c4500cc9f1a6","href":"https://static.observableusercontent.com/files/0753e5326ca82e4d729f8c81b8c0a182f20876ab8f8ba716586e49da23e0965afe964263dd3c3d345c3b97cb2da1fe47a76af26f5e946b64b087c4500cc9f1a6","name":"il_zctas_topo_unproj (1).json","type":"application/json","lastModified":1627912565832.25,"size":867612},{"id":"640685dc9b9e139aa9c095defe2a9381128504597acfca647da7c0ba367ad93fda1315189bc2f90ecdf7ce72ace9176fd4553b1f92a2be8d4f108f63e08595ab","href":"https://static.observableusercontent.com/files/640685dc9b9e139aa9c095defe2a9381128504597acfca647da7c0ba367ad93fda1315189bc2f90ecdf7ce72ace9176fd4553b1f92a2be8d4f108f63e08595ab","name":"chicago_zip_topo_unproj (2).json","type":"application/json","lastModified":1627912565832.25,"size":214432},{"id":"7707423b3db9755c99425dd774ae56ca764aad8c1ba71173e7664ac7bad31e2a7f304929801d64cd3351d0699404f74df5de643aff9969064fea8f56a3a89e05","href":"https://static.observableusercontent.com/files/7707423b3db9755c99425dd774ae56ca764aad8c1ba71173e7664ac7bad31e2a7f304929801d64cd3351d0699404f74df5de643aff9969064fea8f56a3a89e05","name":"merged_vax_rates_wide@1.csv","type":"text/csv","lastModified":1627912565832.25,"size":197534},{"id":"4dfee3689d149c4129c36bc1ac37343a30310fb1409b0e65d165f364715f424ffec58820759ed4383db999344c88055080e1312efd4510d246eef7e3b7143c64","href":"https://static.observableusercontent.com/files/4dfee3689d149c4129c36bc1ac37343a30310fb1409b0e65d165f364715f424ffec58820759ed4383db999344c88055080e1312efd4510d246eef7e3b7143c64","name":"merged_vax_rates@2.csv","type":"text/csv","lastModified":1627912565832.25,"size":461369},{"id":"ec4b4d2c3660c276c51cf3ef73a99c292b44f44a315ec09ba8e24fa8fdf6a34226197c64ad2a3f2252942f7ca0389b0f93bcac8ce698b0a2f873ad8cc8054a9e","href":"https://static.observableusercontent.com/files/ec4b4d2c3660c276c51cf3ef73a99c292b44f44a315ec09ba8e24fa8fdf6a34226197c64ad2a3f2252942f7ca0389b0f93bcac8ce698b0a2f873ad8cc8054a9e","name":"merged_vax_rates_wide.csv","type":"text/csv","lastModified":1628628364435.13,"size":201749},{"id":"567ae7f86108034b730ba655419af6b788769a2f50c8c4fc577a437184dd0b71c2e928a4fbe712b34ef1ff4c1c4971d375161b0fcbe4f15a42a6d4054a6eed9e","href":"https://static.observableusercontent.com/files/567ae7f86108034b730ba655419af6b788769a2f50c8c4fc577a437184dd0b71c2e928a4fbe712b34ef1ff4c1c4971d375161b0fcbe4f15a42a6d4054a6eed9e","name":"metro-zctas-counties-topo-unproj@2.json","type":"application/json","lastModified":1628022402030.195,"size":1152661},{"id":"da6128414e7e468fb4de124bd1cf1dfbfd97376dbedc4028feb82f74131d1ff62b02f57a885f20d68b97746278686131eb6fe6701b634ec3de1114d67659503d","href":"https://static.observableusercontent.com/files/da6128414e7e468fb4de124bd1cf1dfbfd97376dbedc4028feb82f74131d1ff62b02f57a885f20d68b97746278686131eb6fe6701b634ec3de1114d67659503d","name":"merged_vax_rates.csv","type":"text/csv","lastModified":1628628374285.981,"size":465584}] 31:{"id":"362202545493cd50","slug":"k-12-student-vaccinations-in-illinois","title":"K-12 Student Vaccinations in the Chicago Area","thumbnail":"381505a33411d4f22d4a9a435084924cb84c06a1dc1508418aa670bdcc51509b","access_level":"public","create_time":"$D2021-08-02T13:56:05.832Z","update_time":"$D2021-09-07T20:59:30.444Z","view_time":null,"first_public_time":"$D2021-08-03T21:13:59.517Z","fork":{"id":"bfdd3c1e5f59535d","slug":"student-vaccination-project","title":"K-12 Student Vaccinations in Illinois","owner":{"id":"451a0400736e977f","login":"charmainerunes","name":"Charmaine Runes"}},"stars":1,"starred":false,"owner":{"type":"team","id":"451a0400736e977f","login":"charmainerunes","name":"Charmaine Runes","avatar_url":"https://avatars-next.observableusercontent.com/9069f31bf56352d79ae388ec3b816e456cd89dd50070abd328688221122c5ac8","tier":"starter_2024"},"version":2326,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ec3ddf39719bc08","login":"charmainerunes","name":"Charmaine Runes","avatar_url":"https://avatars-next.observableusercontent.com/9069f31bf56352d79ae388ec3b816e456cd89dd50070abd328688221122c5ac8","tier":null}],"members":[{"type":"individual","id":"0ec3ddf39719bc08","login":"charmainerunes","name":"Charmaine Runes","avatar_url":"https://avatars-next.observableusercontent.com/9069f31bf56352d79ae388ec3b816e456cd89dd50070abd328688221122c5ac8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c23372e857db412c","slug":"student-covid-19-vaccinations","title":"Student COVID-19 Vaccinations","owner":{"id":"451a0400736e977f","login":"charmainerunes","name":"Charmaine Runes"}},"type":"notebook","body":{"title":"K-12 Student Vaccinations in the Chicago Area","cells":[{"id":0,"value":"md`# K-12 Student Vaccinations in the Chicago Area`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2162,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2219,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"md `## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2274,"value":"import {style} from \"@charmainerunes/wbez-data-visuals-style-guide\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"mapData = d3.filter(data, d => d.indicator == 'pct_fully_vax_12to17')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"data = {\n const csv = await FileAttachment(\"merged_vax_rates.csv\").text();\n return d3.csvParse(csv, ({zip, indicator, value}) => ({\n zip: zip,\n indicator: indicator,\n value: value\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"chicago = FileAttachment(\"chicago_zip_topo_unproj (2).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"cook = FileAttachment(\"cook_zctas_topo_unproj.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"metro = FileAttachment(\"metro-zctas-counties-topo-unproj@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"illinois = FileAttachment(\"il_zctas_topo_unproj (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2322,"value":"vizCredit = 'Charmaine Runes'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1783,"value":"dateDataUpdated = \"August 9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"height = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"projection = d3.geoMercator()\n.scale(width * 90)\n.center([-87.6298, 41.8781])\n.translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"// I should probably abstract this...\nprojectionRef = new Map([\n [chicago, d3.geoMercator()\n .fitSize([width, height * 0.85], getTopoJSON(chicago))],\n [cook, d3.geoMercator()\n .fitSize([width, height * 0.85], getTopoJSON(cook))],\n [metro, d3.geoMercator()\n .fitSize([width, height * 0.85], getTopoJSON(metro))],\n [illinois, d3.geoMercator()\n .fitSize([width, height* 0.85], getTopoJSON(illinois))]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"function getZipsToFilter(topo) {\n let zips = []\n for (let i = 0; i < topo.features.length; i++) {\n zips[i] = topo.features[i].properties.zip;\n }\n return zips;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"// For more info on scaleQuantize() vs scaleQuantile()\n// https://observablehq.com/@d3/quantile-quantize-and-threshold-scales\n\nfunction buildColorRamp(domainValues) {\n return d3.scaleQuantile(d3.extent(domainValues), purples)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1849,"value":"// From https://imagecolorpicker.com/color-code/5f2b7\npurples = ['#5f2b7b', '#7f5595', '#9f80b0', '#bfaaca', '#dfd5e5'].reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"function handleNull(x, notPercent=false) {\n if (x && notPercent) {\n return d3.format('$,')(x)\n} else if (x) {\n return d3.format('.0%')(x)\n} else {\n return null\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function createGeoPath(geoData) {\n return d3.geoPath().projection(projectionRef.get(geoData))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"function getTopoJSON(geo_file) {\n return topojson.feature(geo_file, geo_file.objects.zips)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2029,"value":"function buildReference(zips, data) {\n // Builds out a Map of ZIp and value e.g., {['60607': 0.76]}\n \n return Object.assign({}, ...data.map((x) => { \n if (zips.includes(x.zip)) {\n if (x.value) {\n return ({[x.zip]: x.value})\n } else {\n return ({[x.zip]: null})\n }\n }\n }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"mapReference = buildReference(getZipsToFilter(getTopoJSON(metro)), mapData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"viewof highlightZip = Inputs.select([null].concat(getZipsToFilter(getTopoJSON(metro)).sort()), {unique: true})\n\n//autoSelect({\n// options: getZipsToFilter(getTopoJSON(chicago)).sort(), \n// placeholder: \"Look up your ZIP code...\"\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2132,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"six_county_area = new Map([\n ['17097', 'Lake County'], \n ['17031', 'Cook County'], \n ['17111', 'McHenry County'],\n ['17089', 'Kane County'],\n ['17043', 'DuPage County'],\n ['17197', 'Will County']\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"context_vars = new Map([\n ['pct_fully_vax_0to17', \n {name: 'Percent pop. under 18 with complete vaccine series', \n tickFormat: '.0%'}],\n ['pct_fully_vax_12to17', \n {name: 'Percent pop. between 12 and 17 with complete vaccine series', \n tickFormat: '.0%'}],\n ['pct_first_dose_0to17', \n {name: 'Percent pop. under 18 with at least a first dose', \n tickFormat: '.0%'}],\n ['pct_first_dose_12to17', \n {name: 'Percent pop. between 12 and 17 with at least a first dose', \n tickFormat: '.0%'}],\n ['pct_nhblack', \n {name: 'Percent pop. non-Latinx Black',\n tickFormat: '.0%'}],\n ['pct_latinx', \n {name: 'Percent pop. Latinx (any race)',\n tickFormat: '.0%'}],\n ['med_hhinc', \n {name: 'Median household income',\n tickFormat:'$,~s'}],\n ['pct_broadband', \n {name: 'Percent pop. with broadband access',\n tickFormat: '.0%'}],\n ['pct_poverty',\n {name: 'Percent pop. living below poverty line',\n tickFormat: '.0%'}]\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"wbezColors = new Map([\n ['red', '#ed0000'],\n ['white', '#ffffff'],\n ['black', '#000000'],\n ['mediumgray', '#636466'],\n ['lightgray', '#dcddde'],\n ['gold', '#ffd03d'],\n ['teal', '#24bcb7'],\n ['periwinkle', '#5151bd'],\n ['lightblue', '#1d9cd3'],\n ['cottoncandy', '#ffd7ff'],\n ['lime', '#adf45b'],\n ['lavender', '#99a8ff'],\n ['sky', '#88f7ff'],\n ['marigold', '#f79e1c'],\n ['peacock', '#016480'],\n ['royalpurple', '#f5f2b7b'],\n ['royalblue', '#263c80'],\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"import {autoSelect} from \"@observablehq/legacy-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"