24:null 25:["$","title",null,{"children":"Chicago Community Areas Leaflet | Taras Novak | Observable"}] 2a:[] 28:{"id":"96785811993b45f6","slug":"chicago-community-areas-leaflet","title":"Chicago Community Areas Leaflet","thumbnail":"6302830ecc9f9793cec679ab31a6d5f2e5e36158ae112cdf0583a2d3b4be0cc6","access_level":"public","create_time":"$D2018-08-22T13:37:29.327Z","update_time":"$D2018-08-23T13:38:44.940Z","view_time":null,"first_public_time":"$D2018-08-22T13:46:08.355Z","fork":{"id":"fe14c39662a972fa","slug":"chicago-community-areas","title":"Chicago Community Areas Vega","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"stars":0,"starred":false,"owner":{"type":"team","id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":"starter_2024"},"version":277,"publish_version":277,"role":null,"authored":false,"authors":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null}],"members":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"48962df96f0c8ee6","slug":"random-bits","title":"Random Bits","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"type":"notebook","body":{"title":"Chicago Community Areas Leaflet","cells":[{"id":0,"value":"md`# Chicago Community Areas Leaflet\n\nChicago is divided into 77 community areas and 9 sides as defined by the Social Science Research Committee at the University of Chicago back in 2012:\n\nhttps://en.wikipedia.org/wiki/Community_areas_in_Chicago\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"md `## Mapping Chicago Communites with [LeafletJS](https://leafletjs.com/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"map = {\n // create map container and leaflet map\n const mapContainer = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`});\n yield mapContainer;\n const map = createMap(mapContainer);\n\n // data mapping patch\n communities['lake view'] = communities['lakeview'];\n communities['ohare'] = communities[\"o'hare\"];\n \n // create communities map layer\n // todo: color by sides\n const communitiesLayer = L.geoJson(geoData, {\n weight: 2,\n color: '#000',\n onEachFeature: function (feature, layer) {\n const communityName = feature.properties.community.toLowerCase();\n const community = communities[communityName];\n const html = ``;\n layer.bindPopup(html);\n layer.bindTooltip(html, {sticky: true});\n }\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"L = require('leaflet@1.3.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"leafletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"sideColors = d3[`scheme${'Pastel1'}`]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"function createMap(mapContainer) {\n // create Stamen leaflet toner map with attributions\n const map = L.map(mapContainer).setView([41.85, -87.68], 10); // Chicago origins\n const mapTiles = '//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png';\n const osmCPLink = 'OpenStreetMap';\n const mapCPLink = 'Stamen Design';\n const tileLayer = L.tileLayer(mapTiles, {\n attribution: `${osmCPLink} | ${mapCPLink}`,\n detectRetina: false,\n maxZoom: 18,\n minZoom: 10,\n noWrap: false,\n subdomains: 'abc'\n }).addTo(map);\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"md `## Chicago Communities Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"geoJsonUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-community-areas.geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-community-areas.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"geoData = d3.json(geoJsonUrl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"communityData = d3.csv(dataUrl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"sides = {\n // group communities by side\n const sides = {}\n communityData.slice(1) // skip 1st null row\n .map(community => {\n if (!sides[community.Side]) {\n sides[community.Side] = [];\n }\n sides[community.Side].push(community);\n });\n return sides;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"communities = {\n // create communities info map\n const communities = {}\n communityData.slice(1) // skip 1st null row\n .map(community => communities[community.CommunityName.toLowerCase()] = community); \n return communities;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2a","stdlib":"1","titling":"auto"}} 29:"$28:body"

${community.CommunityName}, ${community.Side}