2d:null 2e:["$","title",null,{"children":"Montgomery County, Maryland Traffic Violations, 2016 | the-vern | Observable"}] 33:T51d, //Creates a DIV to display a heat layer viewof selection = { const target = html`

`; yield target; // Give the container dimensions. //Sets view of DIV let lat = 39.122043 let lon = -77.171383; let center = ol.proj.transform([lon, lat], 'EPSG:4326','EPSG:3857'); let view = new ol.View({ center: center, zoom: 10.5 }); //Create openlayer basemap const map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), //Adds Montgomery County boundary to DIV new ol.layer.Vector({ source: new ol.source.Vector({ url: "https://gist.githubusercontent.com/thee-vern/bf0849a1891a40797c17a675760a7bc8/raw/711019e0a45a867cc09e91ee8731107322cd4a9e/MOCO_police_districts.geojson", format: new ol.format.GeoJSON() }) }), //Add heat layer to DIV heat ], target, view }); target.value = []; // Initial empty selection. const select = new ol.interaction.Select(); select.on("select", event => { target.value = select.getFeatures().getArray(); target.dispatchEvent(new CustomEvent("input")); } ) map.addInteraction(select); invalidation.then(() => map.dispose()); return map; }34:Tb57,//Filtered traffic layer that will be displayed on the heat map. traffic_filtered = { //Variables will be used for the conditional statements //Season let valueInt = parseInt(r1); let date1 = (new Date(2016,11,1)).getTime(); let date2 = (new Date(2016,11,31)).getTime(); let date3 = (new Date(2016,0,1)).getTime(); let date4 = (new Date(2016,1,31)).getTime(); let date5 = (new Date(2016,+r1,1)).getTime(); let date6 = (new Date(2016,valueInt+2,31)).getTime(); let tp = d3.timeParse("%m/%d/%Y"); //Time let valueIntT = parseInt(r2); let time1 = (new Date(0,0,0,23,0,0)).getHours(); let time2 = (new Date(0,0,0,0,0,0)).getHours(); let time3 = (new Date(0,0,0,5,0,0)).getHours(); let time4 = (new Date(0,0,0,+r2,0,0)).getHours(); let time5 = (new Date(0,0,0,valueIntT+6,0,0)).getHours(); let hp = d3.timeParse("%H:%M:%S"); let gender = r3; //1st Conditional: If season is winter and time is late evening if ((r1 == 11) && (r2 == 23)) { let filtered_features = traffic_features.features.filter(function (d) { let a = tp(d.properties.DateOfStop).getTime(); let b = hp(d.properties.TimeOfStop).getHours(); let c = (d.properties.Gender); return ((a>=date1 && a<=date2) || (a>=date3 && a<=date4)) && (b >= time1 || (b >=time2 && b=date5 && a<=date6) && (b >= time1 || (b >=time2 && b=date1 && a<=date2) || (a>=date3 && a<=date4)) && (b>=time4 && b=date5 && a<=date6) && (b>=time4 && b `; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }36:[] 31:{"id":"cf7c4da9bfc578a4","slug":"hello-openlayers-heatmap","title":"Montgomery County, Maryland Traffic Violations, 2016","thumbnail":"c7146f8b3ae07ee0b9f18bb9ababf35f8bffa9efec57b24b04dea26844cf70a8","access_level":"public","create_time":"$D2019-03-07T23:28:08.681Z","update_time":"$D2021-07-06T13:29:55.516Z","view_time":null,"first_public_time":"$D2019-03-07T23:47:16.013Z","has_unpublished_edits":null,"fork":{"id":"3602bce2df7c0519","slug":"openlayers-heatmap","title":"Hello, OpenLayers Heatmap!","owner":{"id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9753f9262b86fca","login":"the-vern","name":"","avatar_url":"https://avatars-next.observableusercontent.com/931836b0108e6e8918e1623b4877d1dd14d6ad802ed2e3a92e86a7a632931dcb","tier":"starter_2024","bio":""},"version":1475,"publish_version":1475,"role":null,"authored":false,"authors":[{"type":"individual","id":"e087a3c814eb3757","login":"the-vern","name":"","avatar_url":"https://avatars-next.observableusercontent.com/931836b0108e6e8918e1623b4877d1dd14d6ad802ed2e3a92e86a7a632931dcb","tier":null,"bio":""}],"members":[{"type":"individual","id":"e087a3c814eb3757","login":"the-vern","name":"","avatar_url":"https://avatars-next.observableusercontent.com/931836b0108e6e8918e1623b4877d1dd14d6ad802ed2e3a92e86a7a632931dcb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Montgomery County, Maryland Traffic Violations, 2016","cells":[{"id":0,"value":"md`# Montgomery County, Maryland Traffic Violations, 2016\n\nAdapted from the [Earthquakes Heatmap example](https://openlayers.org/en/latest/examples/heatmap-earthquakes.html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"md`Story: Which combination of variables creates the greatest risk of traffic violations AKA getting pulled over the most? \n\nPurpose: You know what they say, \"Men get pulled over the most\" or the \"Spring Fever\" effect (everyone is outside more and acting a bit more reckless). There have always been sayings that indicate who or when one would most likely be pulled over or get in to some kind of trouble. This Observable Notebook will be utilized to determine which combination of variables will yield the most traffic violations issued. The user will be able to select which season, time of day, and gender they want to display on the heat map with the radio buttons below. \n\nSo, is it true that men get pulled over the most? Do people tend to get pulled over the most during the spring season?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"viewof r1 = radio({\n title: 'Seasonal',\n description: 'Please select the season you wish to view.',\n options: [\n { label: 'Spring', value: 2 },\n { label: 'Summer', value: 5 },\n { label: 'Fall', value: 8 },\n { label: 'Winter', value: 11 }\n ],\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"viewof r2 = radio({\n title: 'Time of Day',\n description: 'Please select the time of day you wish to view.',\n options: [\n { label: 'Morning', value: 5 },\n { label: 'Afternoon', value: 11 },\n { label: 'Evening', value: 17 },\n { label: 'Late Evening', value: 23 }\n ],\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"viewof r3 = radio({\n title: 'Gender',\n description: 'Please select the gender you wish to view.',\n options: [\n { label: 'Male', value: \"M\" },\n { label: 'Female', value: \"F\" }\n ],\n value: \"M\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"md` Observations:\nInterestingly or perhaps not interestingly, the combination of male, evening time of day, and spring season yields the most traffic violations being issued which lines up with the old wise-man tales mentioned in the introduction. Females seem to get pulled over less, sometimes the number of traffic violations issued are nearly half compared to males. \n\nHow can this application be improved?\nMultiple years should be used to gain a better perspective on the analysis. Using only one year will not give you the big picture and may actually mislead the analysis. A study using at least three years is ideal. You only have one month of January to look at rather than three from different years. Only one year was using for this particular application due to size constraints with Observable and Github Gists.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"selection.map(f => f.getId())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"//create heat map on top of openlayer basemap; will use the traffic filtered layer\nheat = {\n // Specify the original and final projections\n let options = { \n dataProjection: 'EPSG:4326', // \"EPSG:4326\" = default data projection = WGS84 (Latitute & Longitude)\n featureProjection: 'EPSG:3857', // Specify the map projection or it will be returned in the dataProjection\n };\n\n \n //Create heat layer using points from geojson\n var vector = new ol.layer.Heatmap({\n source: new ol.source.Vector({ \n //call json point feature here\n features: (new ol.format.GeoJSON()).readFeatures(traffic_filtered, options)\n }),\n //Initial settings for blur and radius\n blur: 10, // viewof blur.value, // parseInt(blur.value, 10)\n radius: 2 // viewof radius.value // parseInt(radius.value, 10)\n });\n\n return vector;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"//Call csv separately from the Github Gist\ncsv = d3.csv(\"https://gist.githubusercontent.com/thee-vern/df124c490f9e45c2814f9905b094d01a/raw/4b7a577d64a0836dc603e98fdc2f0798502a3176/traffic_violations_2016_edit.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"//Create json point feature object with properties\n//Attributes with spaces in the name need to be formated as c[\"Name with space\"]\ntraffic = csv\n.map (c => {\n return {\n type: \"Feature\",\n geometry: {type: \"Point\", coordinates: [+c.Longitude, +c.Latitude] },\n properties: { DateOfStop: c.DateOfStop, TimeOfStop: c.TimeOfStop, SubAgency: c.SubAgency, Location: c.Location, ViolationType: c.ViolationT, Gender: c.Gender }\n \n \n//Shows how to deal with Attributes that have spaces\n//{ DateOfStop: parser(c[\"Date Of Stop\"]), TimeOfStop: c[\"Time Of Stop\"], SubAgency: c.SubAgency, Location: c.Location, ViolationType: c[\"Violation Type\"], Gender: c.Gender }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"//Final Array FeatureCollection that will be used for filtering\ntraffic_features = ({ type: \"FeatureCollection\", features: traffic })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"//districts\ndistricts = {\n let response = await fetch('https://gist.githubusercontent.com/thee-vern/bf0849a1891a40797c17a675760a7bc8/raw/711019e0a45a867cc09e91ee8731107322cd4a9e/MOCO_police_districts.geojson');\n let json = await response.json();\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"md `# Utilities\n\nThese utilities are used to create an openlayers layer; d3 is used to display data from documents (CSV files) to life like you would using an API url; input and radio creates the ability for the user to select a radio button option. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"//call openlayer - basemap\nol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://openlayers.org/en/v5.2.0/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"function radio(config = {}) {\n let {value: formValue, title, description, submit, options} = config;\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"radio\", title, description, submit, \n getValue: input => {\n const checked = Array.prototype.find.call(input, radio => radio.checked);\n return checked ? checked.value : undefined;\n }, \n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`# Data Sources\n\nMontgomery County Traffic Violation data: https://data.montgomerycountymd.gov/Public-Safety/Traffic-Violations-API/y8ms-hri9`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"md` The 2016 Traffic Violation points were derived and exported from the Montgomery County Opendata site. The original dataset consists of traffic violations incidents from 2013 to present. This dataset has a wide range of descriptive attributes related to the individual being pulled over. No senstive information about the individual is listed. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"md` Montgomery County District Shapefile: https://www.montgomerycountymd.gov/gis/data.html`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"md` # Data Preparation / Processing\nThe Montgomery County Traffic Violation data was export from the Montgomery County Opendata in to Excel CSV format. Due to size constraints with Observable and Github gists all attributes besides DateOfStop, TimeOfStop, SubAgency, Location, Latitude, Longitude, ViolationType, and Gender were deleted from the CSV. The CSV was upload as a GeoJSON gist to Github. The gist URL was used to import the traffic violations to the observable notebook. The import step is completed with the cell that has the variable 'csv'.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"