31:T621,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.intersection}
${data.count.toLocaleString()} violations`, {sticky: true}); } }); map.addLayer(geoLayer); // map.fitBounds(markers.getBounds()); }32:[] 2f:{"title":"Chicago Red Light Camera Violations","cells":[{"id":0,"value":"md`# Chicago Red Light Camera Violations\n\nThere are **${cameras.length}** red light cameras installed on instersections of Chicago streets for drivers and pedestrians safety.\n\nSee [Red Light Camera Enforcement FAQ](https://www.chicago.gov/city/en/depts/cdot/supp_info/red-light_cameraenforcement.html) for more info.\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation)/[Red Light Camera Violations](https://data.cityofchicago.org/Transportation/Red-Light-Camera-Violations/spqx-js37)\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 Red Light Cameras`","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: \"intersection\", \n fill: \"#ff4e3b\", \n title: d => `${d.count.toLocaleString()} violations`\n }),\n Plot.text(top10Cameras, {\n x: \"percent\", \n y: \"intersection\", \n text: d => Math.floor(d.percent * 100) + \"%\", \n dx: 10 \n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"*tip:* mouse over camera location bar to see the total number of red light violations recorded by that camera in ${year}.","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"md`### Recorded Chicago Red Light Camera Violations by Day`","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":363,"value":"*tip*: mouse over day plot cell to view the total number of red light violations recorded that day.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"md`## Data\n\n### All Recorded Red Light Violations in ${year}\nTotal: **${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 Red Light Violations by Camera\n\nThere are **${cameras.length}** red light cameras installed on Chicago street intersections.\n\n#### Total Recorded Red Light Violations per Intersection with Camera in ${year}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof violationSummaryView = 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 Intersection Camera:`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"### Red Light Violations Recorded by ${camera} Intersection Camera in ${year}\n\nTotal: **${totalViolationsForCamera.toLocaleString()}**","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"viewof violationsByCameraView = Inputs.table(data.filter(d => d.intersection == 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 'intersection',\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/spqx-js37.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"query = `?$limit=100000&$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('intersection')\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('intersection', 'count')\n .derive({ percent: d => d.count / op.sum(d.count) })\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":373,"value":"totalViolations = violationsByCamera.rollup({\n count: d => op.sum(d.count)\n }).objects()[0].count","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"totalViolationsForCamera = aq.from(data.filter(d => d.intersection == camera))\n .rollup({\n count: d => op.sum(d.violations)\n }).objects()[0].count","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"cameraNames = violationsByCamera.array('intersection')","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"geoData = getGeoDataPoints(violationsByCamera.objects())","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`### Red Light Camera Location Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"cameraLocationDataUrl = 'https://data.cityofchicago.org/resource/thvf-6diy.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.intersection = camera.intersection.toUpperCase().replace('-', ' AND ');\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":328,"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"}