31:T617,map = { // create map container let mapContainer = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield mapContainer; // create leaflet map with attributions let map = L.map(mapContainer).setView([41.85, -87.68], 10); // Chicago origins let osmLayer = L.tileLayer( // 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png') 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors, © CartoDB', detectRetina: false, maxZoom: 18, minZoom: 10, noWrap: false, subdomains: 'abc' }).addTo(map); // red dot marker const marker = { radius: 6, fillColor: "#ff4e3b", color: "#ff0000", weight: 1, opacity: 1, fillOpacity: 0.8 }; // map markers const pointToLayer = function (feature, latlng) { return L.circleMarker(latlng, marker); } // add markers let geoLayer = L.geoJson(geoData, { pointToLayer: pointToLayer, onEachFeature: function (feature, layer) { const data = feature.properties; const html = ``; layer.bindPopup(html); layer.bindTooltip(`${data.address}
${data.count.toLocaleString()} violations`, {sticky: true}); } }); map.addLayer(geoLayer); // map.fitBounds(markers.getBounds()); }32:[] 2f:{"title":"Chicago Speed Camera Violations","cells":[{"id":0,"value":"md`# Chicago Speed Camera Violations\n\nThere are **${cameras.length}** speed cameras installed on the busy streets of Chicago for drivers and pedestrians safety. They are also a [growing source of revenue](https://www.illinoispolicy.org/chicagos-speed-cameras-ticket-8x-faster-after-limit-drops-to-6-mph/) for the [Chicago Department of Transporation](https://www.chicago.gov/city/en/depts/cdot.html).\n\nSee [Automated Speed Enforcement Frequently Asked Questions](https://www.chicago.gov/city/en/depts/cdot/supp_info/children_s_safetyzoneporgramautomaticspeedenforcement/automated_speed_enforcementfrequentlyaskedquestions.html) on how speed limits are enforced with these cameras and automated tickets are issued.\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation)/[Speed Camera Violations](https://data.cityofchicago.org/Transportation/Speed-Camera-Violations/hhkd-xvj4)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"markerStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof year = Inputs.select(years, {value: 2022, label: md`## Select Year:`, format: year => year})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`### Top 10 (Busy) Chicago Speed Cameras in ${year}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"top10CamerasPlot = Plot.plot({\n height: top10Cameras.length * 40,\n marginLeft: 150,\n x: {\n tickFormat: \"%\",\n domain: [0, 1],\n grid: true\n },\n marks: [\n Plot.frame(),\n Plot.barX(top10Cameras, {\n x: \"percent\", \n y: \"address\", \n fill: \"#ff4e3b\", \n title: d => `${d.count.toLocaleString()} violations`\n }),\n Plot.text(top10Cameras, {\n x: \"percent\", \n y: \"address\", \n text: d => Math.floor(d.percent * 100) + \"%\", \n dx: 10 \n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"*tip:* mouse over camera location bar to see the total number of speed violations recorded by that camera in ${year}.","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"md`### Recorded Speed Violations by Day in ${year}\n\n**Total:** ${totalViolations.toLocaleString()}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"dayPlot = Plot.plot({\n height: 180,\n x: {\n axis: null,\n padding: 0,\n },\n y: {\n padding: 0,\n tickFormat: Plot.formatWeekday(\"en\", \"narrow\"),\n tickSize: 0\n },\n fy: {\n reverse: true\n },\n facet: {\n data: violationsByDate,\n y: d => d.date.getUTCFullYear()\n },\n marks: [\n Plot.cell(violationsByDate, {\n x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),\n y: d => d.date.getUTCDay(),\n fill: 'count',\n title: d => `${d.date.toLocaleDateString()}: ${d.count.toLocaleString()} violations`,\n inset: 0.5\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"*tip*: mouse over day plot cell to view the total number of speed violations recorded that day.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"md`## Data\n\n### All Recorded Speed Violations in ${year}\n\n**Total:** ${totalViolations.toLocaleString()}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof tableView = Inputs.table(data, {\n columns: columns,\n sort: 'violations',\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`### Recorded Speed Violations by Camera\n\nThere are **${cameras.length}** speed cameras installed in Chicago area.\n\n#### Total Recorded Speed Violations per Camera Address in ${year}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof violationsSummaryView = Inputs.table(violationsByCamera, {\n sort: 'count',\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof camera = Inputs.select(cameraNames, {label: md`### Select Speed Camera Location:`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"### Speed Violations Recorded at ${camera} in ${year}\n\n**Total:** ${totalViolationsForCamera.toLocaleString()}","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"viewof violationsByCameraView = Inputs.table(data.filter(d => d.address == camera), {\n columns: columns,\n sort: 'violation_date',\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`## Data Queries and Filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"years = [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022]","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"columns = [\n 'address',\n 'camera_id',\n 'violations',\n 'violation_date',\n 'latitude',\n 'longitude'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"dataUrl = 'https://data.cityofchicago.org/resource/hhkd-xvj4.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"query = `?$limit=50000&$where=violation_date between '${year}-01-01T00:00:00' and '${year}-12-31T23:59:59'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = await fetch(dataUrl + query).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"dataTable = aq.from(data)\n .derive({\n date: d => op.parse_date(d.violation_date)\n })\n .orderby('camera_id')","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"violationsByDate = dataTable.groupby('date')\n .rollup({\n count: d => op.sum(d.violations)\n })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"violationsByCamera = dataTable.groupby('address')\n .rollup({\n count: d => op.sum(d.violations)\n })\n .join(cameraTable)\n .orderby(aq.desc('count'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"violationsByCameraRate = violationsByCamera\n .select('address', 'count')\n .derive({\n percent: d => d.count / op.sum(d.count) \n })\n .orderby(aq.desc('percent'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"top10Cameras = violationsByCameraRate.objects().slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"totalViolations = violationsByCamera.rollup({\n count: d => op.sum(d.count)\n }).objects()[0].count","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"totalViolationsForCamera = aq.from(data.filter(d => d.address == camera))\n .rollup({\n count: d => op.sum(d.violations)\n }).objects()[0].count","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"cameraNames = violationsByCamera.array('address')","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"geoData = getGeoDataPoints(violationsByCamera.objects())","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`### Speed Camera Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"cameraLocationDataUrl = 'https://data.cityofchicago.org/resource/4i42-qv3h.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"cameraLocations = await fetch(cameraLocationDataUrl).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"cameras = cameraLocations.map(camera => {\n camera.address = camera.address.toUpperCase().replace('(SPEED CAMERA)', '').trim();\n return camera;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"cameraTable = aq.from(cameras)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"import { getGeoDataPoints } from '@randomfractals/geo-data-utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"leafletStyles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"L = require('leaflet@1.7.1')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}