2d:null 2e:["$","title",null,{"children":"WBEZ: Census 2020 Data In Graphics For Chicago And Illinois | Charmaine Runes | Observable"}] 33:T84c,viewof popChangeChart = { const outerContainer = html`

${style()}

` const mapContainer = html`

` const legendContainer = html`

` const hed = html`

Illinois has nearly 700,000 fewer white residents in 2020 than a decade earlier.

` const subhed = html`

Total population by race/ethnicity and year

` const popChangeChartSVG = buildGroupedBarChart(il_race_data, 'year', 'millions') const popChangeChartContainer = html`

${popChangeChartSVG}

` const sourceLang = "WBEZ analysis of 2020 Census (P.L. 94-171) Redistricting Data Summary Files (U.S. Census Bureau) and 2010 Census Summary File 1." const notesLang = "Figures for White, Black, Asian, Other and Two or more races are for individuals who are not Latino. The 'Other' category includes counts for individuals who identified as American Indian and Alaska Native (AIAN), Native Hawaiian and Pacific Islander (NHPI) or some other race. In Illinois, the number of AIAN-identifying residents fell from 18,849 in 2010 to 16,561 in 2020. The number of NHPI-identifying residents decreased from 2,977 in 2010 to 2,959 in 2020. Residents identifying as a member of some other race increased from 16,008 in 2010 to 45,080 in 2020." const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ.

` mapContainer.appendChild(popChangeChartContainer); legendContainer.appendChild(viewof keyYear); outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.append(legendContainer) outerContainer.appendChild(popChangeChartContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }34:T5f0,viewof popLossMap = { const outerContainer = html`

${style()}

` const mapContainer = html`

` const hed = html`

The steepest population losses in Chicago were felt on the city's South Side.

` const subhed = html`

Percent change in population from 2010 to 2020, by community area

` const popLossMapSVG = drawChiMap(chicago_ca_data, chicago_ca, '%Chg Pop', false, true) const popLossMapContainer = html`

${popLossMapSVG}

Source: ${sourceLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ.

` mapContainer.appendChild(popLossMapContainer) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(mapContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(creditText); return outerContainer; }35:Te48,viewof smallMultiples = { const outerContainer = html`

${style()}

` const mapContainer = html`

` const hed = html`

Thirty Chicago community areas experienced demographic swings between 2010 and 2020.

` const subhed = html`

Community areas in Chicago by demographic swing

` const asianLatinoMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Asian', 'Latino', 'royalpurple') const asianLatinoMapContainer = html`

↑ Asian, ↓ Latino

${asianLatinoMapSVG}

` const asianWhiteMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Asian', 'White', 'royalpurple') const asianWhiteMapContainer = html`

↑ Asian, ↓ White

${asianWhiteMapSVG}

` const latinoBlackMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Latino', 'Black', 'royalpurple') const latinoBlackMapContainer = html`

↑ Latino, ↓ Black

${latinoBlackMapSVG}

` const latinoWhiteMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Latino', 'White', 'royalpurple') const latinoWhiteMapContainer = html`

↑ Latino, ↓ White

${latinoWhiteMapSVG}

` const whiteLatinoMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'White', 'Latino', 'royalpurple') const whiteLatinoMapContainer = html`

↑ White, ↓ Latino

${whiteLatinoMapSVG}

` const whiteBlackMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'White', 'Black', 'royalpurple') const whiteBlackMapContainer = html`

↑ White, ↓ Black

${whiteBlackMapSVG}

` const sourceLang = `WBEZ analysis of 2020 Census (P.L. 94-171) Redistricting Data Summary Files data and 2010 Census Summary File 1 data compiled by the Chicago Metropolitan Agency For Planning.` const notesLang = "The maps reflect community areas where one racial or ethnic group increased by at least 1,000 residents between 2010 and 2020 while another group decreased by at least 1,000 residents during the same period. Figures for White, Black and Asian are for individuals who are not Latino." const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ.

` mapContainer.appendChild(latinoWhiteMapContainer) mapContainer.appendChild(latinoBlackMapContainer) mapContainer.appendChild(whiteLatinoMapContainer) mapContainer.appendChild(whiteBlackMapContainer) mapContainer.appendChild(asianWhiteMapContainer) mapContainer.appendChild(asianLatinoMapContainer) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(mapContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }36:T6bc,viewof diverseSuburbsChart = { const outerContainer = html`

${style()}

` const chartContainer = html`

` const legendContainer = html`

` const hed = html`

The suburbs are more diverse, with declining white populations and large increases in Latino and Asian populations.

` const subhed = html`

Percent change in population by race/ethnicity and county

` const diverseBarSVG = buildGroupedBarChart(suburb_diversity_data, 'race', 'percent') const diverseBarContainer = html`

${diverseBarSVG}

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ.

` chartContainer.appendChild(diverseBarContainer) legendContainer.appendChild(viewof keySimplified) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(legendContainer) outerContainer.appendChild(html`
`) outerContainer.appendChild(chartContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }37:Tb01,viewof smallMultiplesMuni = { const outerContainer = html`

${style()}

` const mapContainer = html`

` const hed = html`

Several suburbs also saw demographic swings, with growing numbers of people of color and decreasing numbers of white residents.

` const subhed = html`

Municipalities in the six-county Chicago region by demographic swing

` const latinoWhiteMapSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Latino', 'White', 'royalpurple') const latinoWhiteMapContainer = html`

↑ Latino, ↓ White

${latinoWhiteMapSVG}

` const latinoBlackMapSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Latino', 'Black', 'royalpurple') const latinoBlackMapContainer = html`

↑ Latino, ↓ Black

${latinoBlackMapSVG}

` const blackWhiteMapSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Black', 'White', 'royalpurple') const blackWhiteMapContainer = html`

↑ Black, ↓ White

${blackWhiteMapSVG}

` const asianWhiteMapSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Asian', 'White', 'royalpurple') const asianWhiteMapContainer = html`

↑ Asian, ↓ White

${asianWhiteMapSVG}

` const sourceLang = "WBEZ analysis of 2020 Census (P.L. 94-171) Redistricting Data Summary Files (U.S. Census Bureau) and 2010 Census Summary File 1." const notesLang = "The maps reflect suburban municipalities where one racial or ethnic group increased by at least 1,000 residents between 2010 and 2020 while another group decreased by at least 1,000 residents during the same period. Figures for White, Black and Asian are for individuals who are not Latino." const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ.

` mapContainer.appendChild(latinoWhiteMapContainer) mapContainer.appendChild(latinoBlackMapContainer) mapContainer.appendChild(blackWhiteMapContainer) mapContainer.appendChild(asianWhiteMapContainer) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(mapContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }38:T76d,viewof kidsChart = { const outerContainer = html`

${style()}

` const chartContainer = html`

` const legendContainer = html`

` const hed = html`

More than 80% of Chicago's children are children of color.

` const subhed = html`

Percent of population by race/ethnicity and age group

` const kidsChartSVG = drawStackedBarChart(kids_data) const kidsChartContainer = html`

${kidsChartSVG}

` const sourceLang = "WBEZ analysis of 2020 Census (P.L. 94-171) Redistricting Data Summary Files (U.S. Census Bureau)." const notesLang = "NHPI reflects individuals identifying as Native Hawaiian and Pacific Islander, AIAN reflects individuals identifying as American Indian and Alaska Native, Other reflects individuals identifying as a member of some other race, and TOM reflects individuals identifying as a member of two or more races. Figures for White, Black, Asian, NHPI, AIAN, Other and TOM are for individuals who are not Latino." const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ.

` chartContainer.appendChild(kidsChartContainer) legendContainer.appendChild(viewof key) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(legendContainer) outerContainer.appendChild(html`
`) outerContainer.appendChild(chartContainer) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }39:T6ef,function buildSwingMap(geography, data, high, low, color) { let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("class", "topo") let topo = getTopoJSON(geography) if (geography == chicago_ca) { var feature = 'community' } else if (geography == metro_municipality) { var feature = 'NAMELSAD' } let reference = new Map(data.map(key => [key[feature], [key.swing_high, key.swing_low]])) // Background if (geography == metro_municipality) { svg.append("g") .selectAll("path") .data(getTopoJSON(metro_county).features) .join("path") .attr("d", createGeoPath(geography)) .attr("fill", wbezColors.get('lightgray')) .style("stroke", wbezColors.get('white')) .style("stroke-width", 1) } // Highlight svg.append("g") .selectAll("path") .data(topo.features) .join("path") .attr("d", createGeoPath(geography)) .attr("fill", d => { if (reference.get(d.properties[feature])) { if (reference.get(d.properties[feature])[0].includes(high) && reference.get(d.properties[feature])[1].includes(low)) { return wbezColors.get(color) } else { return wbezColors.get('lightgray') } } else { return wbezColors.get('mediumgray') } }) .style("stroke", wbezColors.get('white')) .style("stroke-width", .5) .append("title") .text(d => { if (reference.get(d.properties[feature])) { return `${d.properties[feature]} Swing high: ${reference.get(d.properties[feature])[0]} Swing low: ${reference.get(d.properties[feature])[1]}` } else { return `${d.properties[feature]}: N/A` }}) return svg.node() }3a:Td03,function buildMultiLineChart(data, highlightedCategory) { let margin = { top: 0, right: 0, bottom: 30, left: 0 }; let filteredData = data.filter(d => d.variable != "Total") let x = d3.scaleLinear() .domain([2010, 2020]) .range([margin.left + (width / 12), width - margin.right - (width / 12)]) let y = d3.scaleLinear() .domain([0, d3.max(data.map(d => d.value))]) .range([height - margin.bottom, margin.top]) let yAxisSettings = d3.axisLeft(y) .tickSize(5) .tickFormat(d3.format(',')) let xAxisSettings = d3.axisBottom(x) .ticks(10) .tickSize(0) .tickPadding(10) .tickValues([2010, 2020]) .tickFormat(d3.format("")) let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("class", "topo") let bg = svg.append("rect") .attr("x", margin.left) .attr("y", 0) .attr("width", width) .attr("height", height) .style("fill", "rgba(0,0,0,0)") let xAxisTicks = svg.append("g") .attr("class", "x-axis") .call(xAxisSettings) .attr("transform", `translate(0,${height - margin.bottom})`) let yAxisTicks = svg.append("g") .attr("class", "y-axis") .call(yAxisSettings) .attr("transform", `translate(${margin.left},0)`) let line = d3.line() .defined(d => !isNaN(d.value)) .x(function (d) { return x(d.year) }) .y(function (d) { return y(d.value) }) let groupedData = d3.group(filteredData, d => d.variable); //let toKeep = Array.from(groupedData.keys()); //let chartData = d3.group(data.filter(d => d.value.notnull()), d => d.county) let line_path = svg.append("g") .selectAll(".line") .data(groupedData) .join("path") .attr("class", d => "line " + d[0]) .attr("d", d => line(d[1])) .style("stroke", d => { if (d[0] == highlightedCategory) { return wbezColors.get('red') } else { return wbezColors.get('lightgray') } }) .style("stroke-width", d => { if (d[0] == highlightedCategory) { return "3px" } else { return "1px" } }) .style("stroke-opacity", 1) .style("fill", "none") let xAxis = svg.append("line") .attr("x1", margin.left) .attr("x2", width + margin.left) .attr("y1", y(0)) .attr("y2", y(0)) .style("stroke", wbezColors.get('lightgray')) .style("stroke-width", "2px") let yAxis = svg.append("line") .attr("x1", x(0)) .attr("x2", x(0)) .attr("y1", height - margin.bottom) .attr("y2", margin.top) .style("stroke", wbezColors.get('lightgray')) .style("stroke-width", "2px") .style("stroke-opacity", "0.5") // Y axis label: let yaxis_title = svg.append("text") .attr("text-anchor", "start") .attr("class", "axis-title") .attr("transform", "rotate(0)") .attr("y", -margin.left + 20) .attr("x", -margin.top + 50) .style("font-size", "14px") .style("fill", wbezColors.get('mediumgray')) .text("Population") // X axis label: let xaxis_title = svg.append("text") .attr("text-anchor", "middle") .attr("class", "axis-title") .attr("x", width * 0.5) .attr("y", height + margin.top) .style("font-size", "14px") .style("fill", wbezColors.get('mediumgray')) .text("Year") return svg.node() }3b:Tccf,function buildGroupedBarChart(data, legendGroup, yFormat) { let margin = ({top: 10, right: 10, bottom: 20, left: 40}) let height = 400; // so they aren't absurdly large let groupKey = data.columns[0] let keys = data.columns.slice(1) if (yFormat == 'millions') { var format = "~s" } else if (yFormat == 'percent') { var format = '.0%' } let x0 = d3.scaleBand() .domain(data.map(d => d[groupKey])) //.rangeRound([margin.left, width - margin.right]) .range([margin.left, width - margin.right]) .paddingInner(0.1) let x1 = d3.scaleBand() .domain(keys) .rangeRound([0, x0.bandwidth()]) .padding(0.05) let y = d3.scaleLinear() .domain([d3.min(data, d => d3.min(keys, key => d[key])), d3.max(data, d => d3.max(keys, key => d[key]))]) .rangeRound([height - margin.bottom - margin.top, margin.top]) if (legendGroup == 'race') { var color = d3.scaleOrdinal() .domain(["Asian", "Latino", "Black", "White"]) .range([wbezColors.get('black'), wbezColors.get('royalpurple'), wbezColors.get('mediumgray'), wbezColors.get('lightgray')]) } else if (legendGroup == 'year') { var color = d3.scaleOrdinal() .domain([2010, 2020]) .range([wbezColors.get('lightgray'), wbezColors.get('royalpurple')]) } let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .attr("class", "x-axis") .call(d3.axisBottom(x0).tickSize(0).tickPadding(5)) .call(g => g.select(".domain").remove()) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .attr("class", "y-axis") .call(d3.axisLeft(y) .tickFormat(d3.format(format)) .tickSize(-width)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick 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(data.y)) //const svg = d3.select(DOM.svg()) let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${x0(d[groupKey])},0)`) .selectAll("rect") .data(d => keys.map(key => ({key, value: d[key]}))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => { if (d.value > 0) { return y(d.value) } else if (d.value < 0) { return y(0) } }) .attr("width", x1.bandwidth()) .attr("height", d => { if (d.value > 0) { return y(0) - y(d.value) } else if (d.value < 0) { return y(d.value) - y(0) } }) .attr("fill", d => color(d.key)); let baseline = svg.append("line") .attr("x1", margin.left) .attr("x2", width + margin.left) .attr("y1", y(0)) .attr("y2", y(0)) .style("stroke", wbezColors.get('black')) .style("stroke-width", "2px") return svg.node(); }3c:T626,function drawStackedBarChart(data) { let height = 300; let formatPercent = d3.format(".1%") let series = d3.stack() .keys(data.columns.slice(0)) .offset(d3.stackOffsetExpand) (data) .map(d => (d.forEach(v => { v.key = d.key }), d)); let margin = ({top: 10, right: 10, bottom: 20, left: 60}); let x = d3.scaleLinear() .range([margin.left, width - margin.right]); let y = d3.scaleBand() .domain(data.map(d => d.Age)) .range([margin.top, height - margin.bottom]) .padding(0.08); let xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .attr("class", "x-axis") .call(d3.axisTop(x).ticks(width / 100, "%")) .call(g => g.selectAll(".domain").remove()); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .attr("class", "x-axis") .call(d3.axisLeft(y).tickSize(0)) .call(g => g.selectAll(".domain").remove()); let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg.append("g") .selectAll("g") .data(series) .enter().append("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.Age)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .append("title") .text(d => `${d.key}: ${formatPercent(d[1] - d[0])}`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }3d:T68f,function drawChiMap(data, geography, indicator, reverseRamp=false, diverging=true) { let filteredData = data.filter(d => d.variable == indicator) let topo = getTopoJSON(geography) let features = getFeaturesToFilter(geography, topo) // if counties, county names; if community areas, community area names; etc. let reference = buildReference(features, filteredData, geography) let domainValues = Object.values(reference) let colorRamp = buildColorRamp(domainValues, reverseRamp, diverging) //let format = context_vars.get(indicator).tickFormat // Whether to format as % or $ let format = '.0%' 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 => colorRamp(reference[d.properties.community])) .style("stroke", wbezColors.get('white')) .style("stroke-width", .5) .append("title") .text(d => { if (reference[d.properties.community]) { return `${d.properties.community}: ${d3.format(format)(reference[d.properties.community])}` } else { return `${d.properties.community}: N/A` }}) // Legend svg.append("g") .attr("transform", "translate(0, 500)") .attr("class", "legend") .append(() => legend({ color: colorRamp, //title: context_vars.get(indicator).name, title: 'Percent change in population', tickFormat: format })); return svg.node(); }3e:[{"id":"3d2c71893937882504f30b9fffa9a75b088b37792215665110dd555b8e000bc84393cb7c9bfbddcc5520e9bae84761f7baa92534e4cc4e12001524d240825359","href":"https://static.observableusercontent.com/files/3d2c71893937882504f30b9fffa9a75b088b37792215665110dd555b8e000bc84393cb7c9bfbddcc5520e9bae84761f7baa92534e4cc4e12001524d240825359","name":"tl_2020_17_place.json","type":"application/json","lastModified":1629128429941.535,"size":5032560},{"id":"ba53e2bc62dd57c258f5b47c040a1bd60e645dbe310f11f3ecb0ad1776462eecb60f5843dfe65a85e1f384f7b8284b0908aacc00dbac93241e8dfeda3251c5e7","href":"https://static.observableusercontent.com/files/ba53e2bc62dd57c258f5b47c040a1bd60e645dbe310f11f3ecb0ad1776462eecb60f5843dfe65a85e1f384f7b8284b0908aacc00dbac93241e8dfeda3251c5e7","name":"tl_2020_17_tract.json","type":"application/json","lastModified":1629128797544.68,"size":1559646},{"id":"567ae7f86108034b730ba655419af6b788769a2f50c8c4fc577a437184dd0b71c2e928a4fbe712b34ef1ff4c1c4971d375161b0fcbe4f15a42a6d4054a6eed9e","href":"https://static.observableusercontent.com/files/567ae7f86108034b730ba655419af6b788769a2f50c8c4fc577a437184dd0b71c2e928a4fbe712b34ef1ff4c1c4971d375161b0fcbe4f15a42a6d4054a6eed9e","name":"metro.json","type":"application/json","lastModified":1629131757226.574,"size":1152661},{"id":"12c47ff6bf5b309aa2fac24a10233bed254089174adea19cfd121bf8b9de0272194adbe180e10ed40069f7da91543f6b53a99ca07e2014008e80a884e066a8d2","href":"https://static.observableusercontent.com/files/12c47ff6bf5b309aa2fac24a10233bed254089174adea19cfd121bf8b9de0272194adbe180e10ed40069f7da91543f6b53a99ca07e2014008e80a884e066a8d2","name":"IL_BNDY_County_Py (1).json","type":"application/json","lastModified":1629127513100.286,"size":391358},{"id":"1be8a0379bbdf1f078e914d674686f614dedb9d94cebfe70300b327013a215fb18df6d609d2216a637dde19c3553a7f1a40aad4ba4313a6b89df49b761ebf785","href":"https://static.observableusercontent.com/files/1be8a0379bbdf1f078e914d674686f614dedb9d94cebfe70300b327013a215fb18df6d609d2216a637dde19c3553a7f1a40aad4ba4313a6b89df49b761ebf785","name":"Boundaries - Community Areas (current).json","type":"application/json","lastModified":1629126960315.109,"size":331439},{"id":"9daf888e90b8ecefed8a8fe20fa7f81c7e05d30fa6e6aa7d1eb539bbde44dc545a3db96638b3b942b07b28a45c0388011ededcf074a6f08c66e408d7ee1fb11d","href":"https://static.observableusercontent.com/files/9daf888e90b8ecefed8a8fe20fa7f81c7e05d30fa6e6aa7d1eb539bbde44dc545a3db96638b3b942b07b28a45c0388011ededcf074a6f08c66e408d7ee1fb11d","name":"tl_2020_17_place (1).json","type":"application/json","lastModified":1629393780799.279,"size":2082604}] 31:{"id":"fdd6f80f96826fb4","slug":"wbez-2020-census","title":"WBEZ: Census 2020 Data In Graphics For Chicago And Illinois","thumbnail":"b0aa88e910b4667452ed66df453afed978dd28a3e8231de418a54d494583a657","access_level":"public","create_time":"$D2021-08-13T21:53:04.077Z","update_time":"$D2021-09-30T19:15:43.136Z","view_time":null,"first_public_time":"$D2021-08-16T21:13:45.878Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"451a0400736e977f","login":"charmainerunes","name":"Charmaine Runes","avatar_url":"https://avatars-next.observableusercontent.com/9069f31bf56352d79ae388ec3b816e456cd89dd50070abd328688221122c5ac8","tier":"starter_2024"},"version":1335,"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":0,"collection":null,"type":"notebook","body":{"title":"WBEZ: Census 2020 Data In Graphics For Chicago And Illinois","cells":[{"id":0,"value":"md`# WBEZ: Census 2020 Data In Graphics For Chicago And Illinois`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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":1332,"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', '#5f2b7b'],\n ['royalblue', '#263c80'],\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"il_race_data = Object.assign(await d3.csv(il_race_pop_url, d3.autoType), {y: \"Total population (millions)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"chicago_ca_data = await d3.csv(chicago_ca_data_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"chicago_swing_data = await d3.csv(chicago_swing_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"muni_swing_data = await d3.csv(muni_swing_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"suburb_diversity_data = Object.assign(await d3.csv(suburban_diversity_url, ({County, Asian, Latino, Black, White}) => ({\n County: County,\n Asian: +Asian,\n Latino: +Latino,\n Black: +Black,\n White: +White\n })), {y: \"Percent population change\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"kids_data = await d3.csv(kids_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"chicago_ca = FileAttachment(\"Boundaries - Community Areas (current).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"cook_tracts = FileAttachment(\"tl_2020_17_tract.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"metro_county = FileAttachment(\"metro.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"metro_municipality = FileAttachment(\"tl_2020_17_place (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"il_county = FileAttachment(\"IL_BNDY_County_Py (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"md`## SVGs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"popChangeChartSVG = buildGroupedBarChart(il_race_data, 'year', 'millions')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"popLossMapSVG = drawChiMap(chicago_ca_data, chicago_ca, '%Chg Pop', false, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"asianLatinoMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Asian', 'Latino', 'royalpurple')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"asianWhiteMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Asian', 'White', 'royalpurple')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1302,"value":"latinoBlackMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Latino', 'Black', 'royalpurple') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"latinoWhiteMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'Latino', 'White', 'royalpurple') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"whiteLatinoMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'White', 'Latino', 'royalpurple') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"whiteBlackMapSVG = buildSwingMap(chicago_ca, chicago_swing_data, 'White', 'Black', 'royalpurple') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"diverseBarSVG = buildGroupedBarChart(suburb_diversity_data, 'race', 'percent')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"latinoWhiteMetroSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Latino', 'White', 'royalpurple') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"latinoBlackMetroSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Latino', 'Black', 'royalpurple') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"blackWhiteMetroSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Black', 'White', 'royalpurple')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"asianWhiteMetroSVG = buildSwingMap(metro_municipality, muni_swing_data, 'Asian', 'White', 'royalpurple')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"kidsChartSVG = drawStackedBarChart(kids_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"vizCredit = \"Charmaine Runes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"il_race_pop_url= \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTq4GVYiltSdyWu4mLx_niGVMv41GBLo9hTzlBjANC5q36YFj0k67jkjKP72MyheihIa-dXrzwJazaW/pub?gid=1413497123&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"chicago_ca_data_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTq4GVYiltSdyWu4mLx_niGVMv41GBLo9hTzlBjANC5q36YFj0k67jkjKP72MyheihIa-dXrzwJazaW/pub?gid=767984022&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"chicago_swing_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTq4GVYiltSdyWu4mLx_niGVMv41GBLo9hTzlBjANC5q36YFj0k67jkjKP72MyheihIa-dXrzwJazaW/pub?gid=663828036&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"muni_swing_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTq4GVYiltSdyWu4mLx_niGVMv41GBLo9hTzlBjANC5q36YFj0k67jkjKP72MyheihIa-dXrzwJazaW/pub?gid=746317668&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"suburban_diversity_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTq4GVYiltSdyWu4mLx_niGVMv41GBLo9hTzlBjANC5q36YFj0k67jkjKP72MyheihIa-dXrzwJazaW/pub?gid=29529222&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"kids_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTq4GVYiltSdyWu4mLx_niGVMv41GBLo9hTzlBjANC5q36YFj0k67jkjKP72MyheihIa-dXrzwJazaW/pub?gid=1792383429&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"color = d3.scaleOrdinal()\n .domain([\"White\", \"Latino\", \"Black\", \"Asian\", \"NHPI\", \"AIAN\", \"Other\", \"TOM\"])\n .range([wbezColors.get('lightgray'), wbezColors.get('royalpurple'), wbezColors.get('marigold'), wbezColors.get('teal'), wbezColors.get('black'), wbezColors.get('peacock'), wbezColors.get('mediumgray'), wbezColors.get('royalblue')])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"colorSimplified = d3.scaleOrdinal()\n .domain([\"Asian\", \"Latino\", \"Black\", \"White\"])\n .range([wbezColors.get('black'), wbezColors.get('royalpurple'), wbezColors.get('mediumgray'), wbezColors.get('lightgray')])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"colorYear = d3.scaleOrdinal()\n .domain([\"2010\", \"2020\"])\n .range([wbezColors.get('lightgray'), wbezColors.get('royalpurple')])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"viewof keyYear = legend({title: \"Year\", color: colorYear, tickSize: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"viewof keySimplified = legend({title: \"Race/ethnicity\", color: colorSimplified, tickSize:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"viewof key = legend({title: \"Race/ethnicity\", color, tickSize: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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":74,"value":"function getTopoJSON(geo_file) {\n let features = [];\n if (geo_file == chicago_ca) {\n return topojson.feature(geo_file, geo_file.objects.communityareas);\n } else if (geo_file == cook_tracts) {\n return topojson.feature(geo_file, geo_file.objects.tracts);\n } else if (geo_file == il_county) {\n return topojson.feature(geo_file, geo_file.objects.counties); \n } else if (geo_file == metro_county) {\n return topojson.feature(geo_file, geo_file.objects.counties); \n } else if (geo_file == metro_municipality) {\n return topojson.feature(geo_file, geo_file.objects.municipalities); \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function createGeoPath(geoData) {\n return d3.geoPath().projection(projectionRef.get(geoData))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"projectionRef = new Map([\n [chicago_ca, d3.geoMercator()\n .fitSize([width, height * 0.85], getTopoJSON(chicago_ca))],\n [cook_tracts, d3.geoMercator()\n .fitSize([width, height * 0.85], getTopoJSON(cook_tracts))],\n [il_county, d3.geoMercator()\n .fitSize([width, height* 0.85], getTopoJSON(il_county))],\n [metro_municipality, d3.geoMercator()\n .fitSize([width, height* 0.85], getTopoJSON(metro_municipality))]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"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":1131,"value":"purples = ['#5f2b7b', '#7f5595', '#9f80b0', '#bfaaca', '#dfd5e5'].reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// For more info on scaleQuantize() vs scaleQuantile()\n// https://observablehq.com/@d3/quantile-quantize-and-threshold-scales\nfunction buildColorRamp(domainValues, reverse=false, diverging=false) {\n if (diverging) { // build manually\n return d3.scaleThreshold(\n [-0.065, -0.0279, 0, 0.029, 0.072], \n // ['#ed0000', '#f46666', '#fde6e6', '#dfd5e5', '#9f80b0', '#5f2b7b'] diverging reds and purples\n ['#5f2b7b', '#9f80b0', '#dfd5e5', wbezColors.get('lightgray'), '#a1a2a3',\nwbezColors.get('mediumgray')] // diverging purples and greys\n )\n }\n \n if (reverse) {\n return d3.scaleQuantile(d3.extent(domainValues), purples)\n } else {\n return d3.scaleQuantile(d3.extent(domainValues), purples.reverse())\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"function getFeaturesToFilter(geo_file, topo) {\n let features = [];\n \n if (geo_file == chicago_ca) {\n for (let i = 0; i < topo.features.length; i++) {\n features[i] = topo.features[i].properties.community;\n }\n \n } else if (geo_file == cook_tracts) {\n for (let i = 0; i < topo.features.length; i++) {\n features[i] = topo.features[i].properties.tracts;\n }\n \n } else if (geo_file == il_county) {\n for (let i = 0; i < topo.features.length; i++) {\n features[i] = topo.features[i].properties.COUNTY_NAM;\n }\n \n } else if (geo_file == metro_municipality) {\n for (let i = 0; i < topo.features.length; i++) {\n features[i] = topo.features[i].properties.municipalities;\n }\n }\n \n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"function buildReference(features, data, geo) {\n // Builds out a Map of feature and value e.g., {['60607': 0.76]}\n if (geo == chicago_ca) {\n return Object.assign({}, ...data.map((x) => { \n if (features.includes(x.com_area) | x.com_area == \"O'HARE\") {\n if (x.value && x.com_area != \"O'HARE\") {\n return ({[x.com_area]: x.value})\n } else if (x.value && x.com_area == \"O'HARE\") {\n return ({['OHARE']: x.value})\n } else {\n return ({[x.com_area]: null})\n }\n }\n }))\n \n } else if (geo == il_county) {\n return Object.assign({}, ...data.map((x) => { \n if (features.includes(x.county)) {\n if (x.value) {\n return ({[x.county]: x.value})\n } else {\n return ({[x.county]: null})\n }\n }\n }))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md` ## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"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":1277,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"