31:[] 2f:{"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"},{"id":12,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md `## Mapping Chicago Communites with [LeafletJS](https://leafletjs.com/)`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":150,"value":"L = require('leaflet@1.3.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"leafletCSS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"sideColors = d3[`scheme${'Pastel1'}`]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":43,"value":"md `## Chicago Communities Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"geoJsonUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-community-areas.geojson'","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-community-areas.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"geoData = d3.json(geoJsonUrl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"communityData = d3.csv(dataUrl)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}

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