2e:null 2f:["$","title",null,{"children":"Census 2020: An Asian Ward in Chicago? | Charmaine Runes | Observable"}] 34:T89b,viewof maps = { const outerContainer = html`

${style()}

` const mapContainer = html`

` const hed = html`

Where advocates and organizers are fighting for a majority Asian ward

` const subhed = html`

The 6 Chicago census tracts with an Asian majority fall between multiple wards and community areas

` const wardMapSVG = drawMapClip(wards) const wardMapContainer = html`

Majority Asian areas are split between Wards 11 and 25...

${wardMapSVG}

` const locatorMapSVG = drawLocatorMap(cityBoundaries) const locatorMapContainer = html`

${locatorMapSVG}

` const caMapSVG = drawMapClip(communityAreas) const caMapContainer = html`

...and clustered in Armour Square and Bridgeport

${caMapSVG}

` const sourceLang = `WBEZ analysis of 2020 Census (P.L. 94-171) Redistricting Data Summary Files (U.S. Census Bureau).` const notesLang = `WBEZ identified majority Asian census tracts as those where residents identifying as Asian, who are not Latino, comprised more than 50% of the total population.` const sourceText = html`

Source: ${sourceLang}

` const notesText = html`

Notes: ${notesLang}

` const creditText = html`

Visualization: ${vizCredit}/WBEZ

` mapContainer.appendChild(wardMapContainer) mapContainer.appendChild(locatorMapContainer) mapContainer.appendChild(caMapContainer) outerContainer.appendChild(hed) outerContainer.appendChild(subhed) outerContainer.appendChild(mapContainer) outerContainer.appendChild(html`
`) outerContainer.appendChild(sourceText); outerContainer.appendChild(notesText); outerContainer.appendChild(creditText); return outerContainer; }35:Te3a,function drawMapClip(outlineGeo) { // Assumes that you always want to have a basemap that highlights // Asian majority census tracts. This function overlays boundaries // based on the value of outlineGeo and pulls out a zoom inset. let topo = getTopoJSON(tracts) let topoOutline = getTopoJSON(outlineGeo) if (outlineGeo == wards) { var outlineGeoData = topojson.mesh(outlineGeo, outlineGeo.objects.wards, (a, b) => a !== b) var highlightOutlines = ['11', '25'] var outlineData = topoOutline.features.filter(d => highlightOutlines.includes(d.properties.ward)) } else if (outlineGeo == communityAreas) { var outlineGeoData = topojson.mesh(outlineGeo, outlineGeo.objects.comarea, (a, b) => a !== b) var highlightOutlines = ['BRIDGEPORT', 'ARMOUR SQUARE'] var outlineData = topoOutline.features.filter(d => highlightOutlines.includes(d.properties.community)) } let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("class", "topo") let basemap = svg.append("g") .selectAll("path") .attr("id", "map") .data(topo.features) .join("path") .attr("d", createGeoPath(tracts)) .attr("class", d => "tract-" + d.properties.GEOID) .attr("fill", d => { if (d.properties['2020 Majority'] == 'Asian') { return '#bfaaca' // '#9f80b0' //wbezColors.get('royalpurple') } else { return wbezColors.get('lightgray') } }) //.style("stroke", wbezColors.get('white')) .style("stroke-width", 0) let outlines = svg.append("g")//svg.append("path") .selectAll("path") .data(topoOutline.features) .join("path") .attr("d", createGeoPath(outlineGeo)) .style("stroke", wbezColors.get('white')) .style("fill-opacity", 0) .style("stroke-width", "1") .attr("stroke-linejoin", "round") let highlight = svg.append("g")//svg.append("path") .selectAll("path") .data(outlineData) .join("path") .attr("d", createGeoPath(outlineGeo)) .style("stroke", wbezColors.get('royalpurple')) .style("fill-opacity", 0) .style("stroke-width", "2") .attr("stroke-linejoin", "round") // Add annotations if (outlineGeo == communityAreas) { var annotation1 = svg.append("text") .attr('class', 'annotation') .attr('x', 0.525 * width) .attr('y', 0.5 * height) .text('Armour Square') .style('fill', wbezColors.get('royalpurple')) .style('font-weight', 'bold') var annotation2 = svg.append("text") .attr('class', 'annotation') .attr('x', 0.315 * width) .attr('y', 0.76 * height) .text('Bridgeport') .style('fill', wbezColors.get('royalpurple')) .style('font-weight', 'bold') } else if (outlineGeo == wards) { var annotation1 = svg.append("text") .attr('class', 'annotation') .attr('x', 0.35 * width) .attr('y', 0.475 * height) .text('Ward 25') .style('fill', wbezColors.get('royalpurple')) .style('font-weight', 'bold') var annotation2 = svg.append("text") .attr('class', 'annotation') .attr('x', 0.43 * width) .attr('y', 0.74 * height) .text('Ward 11') .style('fill', wbezColors.get('royalpurple')) .style('font-weight', 'bold') } svg.append('rect') .attr('x', 10) .attr('y', 0) .attr('width', width * 0.95) .attr('height', height) .style('stroke', wbezColors.get('mediumgray')) .style('stroke-width', 1) .style('fill-opacity', 0) return svg.node(); }36:[{"id":"e201bae8a4ca13352f43888a215e990da704bad1ac02a75add0ce2861a3efd00dc686ccbe01bc796cb71337ee9dcac23577366a034da1419e55e4920db7740c0","href":"https://static.observableusercontent.com/files/e201bae8a4ca13352f43888a215e990da704bad1ac02a75add0ce2861a3efd00dc686ccbe01bc796cb71337ee9dcac23577366a034da1419e55e4920db7740c0","name":"Boundaries - Community Areas (current).json","type":"application/json","lastModified":1629989499253.8,"size":331432},{"id":"77cda27bac7efbf360dc9d8498a36b40cc0b86c4e835578e38fb8453273289a472dc4eb08581a1eac93fb4595befaa138131045bf19770e07f699e800b69ace5","href":"https://static.observableusercontent.com/files/77cda27bac7efbf360dc9d8498a36b40cc0b86c4e835578e38fb8453273289a472dc4eb08581a1eac93fb4595befaa138131045bf19770e07f699e800b69ace5","name":"Boundaries - Wards (2015-).json","type":"application/json","lastModified":1629989397804.946,"size":354863},{"id":"f2741559bd63a6279bc9c5b131485dfcd91789df78c82037efe71194eddfc07b3afc6e876c40413901d22c9d5fde06057825fed15e57fe02de09d4acfaf707e5","href":"https://static.observableusercontent.com/files/f2741559bd63a6279bc9c5b131485dfcd91789df78c82037efe71194eddfc07b3afc6e876c40413901d22c9d5fde06057825fed15e57fe02de09d4acfaf707e5","name":"tl_2020_17_tract.json","type":"application/json","lastModified":1630005493207.634,"size":945630},{"id":"765a3ff53559e085993d288979a73f2dd1b7ed30eccfe82a94c64fb17f869f6152c517bcfc95268422713db3e47c22678a842330cd3ab6c196ea51c4303828db","href":"https://static.observableusercontent.com/files/765a3ff53559e085993d288979a73f2dd1b7ed30eccfe82a94c64fb17f869f6152c517bcfc95268422713db3e47c22678a842330cd3ab6c196ea51c4303828db","name":"city-boundaries-topo.json","type":"application/json","lastModified":1630097310239.553,"size":164538}] 32:{"id":"525206bf729f361f","slug":"census-2020-creating-an-asian-ward-in-chicago","title":"Census 2020: An Asian Ward in Chicago?","thumbnail":"4cba92887e4c9c4d776c11a0d8486d0e3d4c89ba11e69d8d46a4eef1c212d204","access_level":"public","create_time":"$D2021-08-26T13:50:27.773Z","update_time":"$D2021-09-07T20:49:55.846Z","view_time":null,"first_public_time":"$D2021-08-26T22:18:40.841Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"451a0400736e977f","login":"charmainerunes","name":"Charmaine Runes","avatar_url":"https://avatars-next.observableusercontent.com/9069f31bf56352d79ae388ec3b816e456cd89dd50070abd328688221122c5ac8","tier":"starter_2024"},"version":583,"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":"Census 2020: An Asian Ward in Chicago?","cells":[{"id":0,"value":"md`# Census 2020: An Asian Ward in Chicago?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"dataUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRlQXONqbts2jkcSZz808icHuPTVWnb2Wyl-QLXC1aeENDNvEqcPEnc4iv9llyTgVD5P9BbFvWBwFAw/pub?gid=1239242404&single=true&output=csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"data = d3.csv(dataUrl, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"tracts = FileAttachment(\"tl_2020_17_tract.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"wards = FileAttachment(\"Boundaries - Wards (2015-).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"cityBoundaries = FileAttachment(\"city-boundaries-topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"communityAreas = FileAttachment(\"Boundaries - Community Areas (current).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"vizCredit = 'Charmaine Runes'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"function drawLocatorMap(boundaries) {\n let topo = getTopoJSON(boundaries)\n \n let svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height * 2])\n \n let basemap = svg.append(\"g\")\n .selectAll(\"path\")\n .data(topo.features)\n .join(\"path\")\n .attr(\"d\", createGeoPath(boundaries))\n .attr(\"fill\", wbezColors.get('lightgray'))\n \n let highlight = svg.append(\"rect\")\n .attr(\"x\", width * 0.42)\n .attr(\"y\", height * 0.45)\n .attr(\"width\", width * 0.1)\n .attr(\"height\", height * 0.13)\n .style(\"fill-opacity\", 0)\n .style(\"stroke\", wbezColors.get('royalpurple'))\n .style(\"stroke-width\", 2)\n \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"rotate = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"basescale = width * 90","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"projection = d3.geoMercator()\n .scale(basescale * 0.6)\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":468,"value":"projectionZoom = d3.geoMercator()\n .scale(basescale * 2)\n .center([-87.6340, 41.8507])\n .translate([width / 2, height / 2])\n .rotate([rotate,0])\n .precision(0.1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function createGeoPath(geography) {\n if (geography == cityBoundaries) {\n return d3.geoPath().projection(projection)\n } else {\n return d3.geoPath().projection(projectionZoom)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function getTopoJSON(geo_file) {\n if (geo_file == tracts) {\n return topojson.feature(geo_file, geo_file.objects.tracts)\n } else if (geo_file == communityAreas) {\n return topojson.feature(geo_file, geo_file.objects.comarea)\n } else if (geo_file == wards) {\n return topojson.feature(geo_file, geo_file.objects.wards)\n } else if (geo_file == cityBoundaries) {\n return topojson.feature(geo_file, geo_file.objects.city)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"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":16,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","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"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"