29:null 2a:["$","title",null,{"children":"A5.2 Static Viz Iterations | Columbia Dataviz | Observable"}] 2f:T657,campuswithCallbooths = { const container = yield htl.html`

`; const map = L.map(container).setView([40.80794694447276, -73.96214143872722], 16); L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var phoneIcon = L.icon({ iconUrl: "https://cdn0.iconfinder.com/data/icons/map-locations-and-tourism/512/47-512.png", //iconUrl: FileAttachment("telephone.png").url(), iconSize: [21.12, 24.42], // size of the icon iconAnchor: [16, 37], // point of the icon which will correspond to marker's location popupAnchor: [-3, -30] // point from which the popup should open relative to the iconAnchor }); var gaurdIcon = L.icon({ iconUrl: "https://static.thenounproject.com/png/63811-200.png", //iconUrl: FileAttachment("telephone.png").url(), iconSize: [32, 37], // size of the icon iconAnchor: [16, 37], // point of the icon which will correspond to marker's location popupAnchor: [-3, -50] // point from which the popup should open relative to the iconAnchor }); L.geoJSON(columbia_university, { onEachFeature: function(feature, layer) { if (feature.properties && feature.properties.name) { layer.bindPopup(feature.properties.name); } } }).addTo(map); L.geoJSON(columbia_call_boxes, { onEachFeature: function(feature, layer) { L.marker([feature.geometry.coordinates[1],feature.geometry.coordinates[0]], {icon: phoneIcon}).addTo(map).bindTooltip('call box'); } }) const crimeLayer = L.layerGroup().addTo(map); $: if (options2) { crimeLayer.clearLayers(); // Clear previous layers // Filter Clery crime data const filteredCleryData = data.filter(d => options2.includes(d.filterCat)); let finalFilteredCleryData = filteredCleryData; // Presume no time filter needed initially // Filter Campus crime data let filteredCampusCrimes = campusCrimes.filter(d => options2.includes(d.filterCat)); let finalFilteredCampusCrimes = filteredCampusCrimes; // Presume no time filter needed initially // Apply time filter only if both startTime and endTime are set if (startTime != null && endTime != null) { finalFilteredCleryData = filteredCleryData.filter(d => { const crimeTime = getHourFromTimeString(d.TIME); return crimeTime >= startTime && crimeTime <= endTime; }); finalFilteredCampusCrimes = filteredCampusCrimes.filter(d => { const crimeTime = getHourFromTimeString(d.CMPLNT_FR_TM); return crimeTime >= startTime && crimeTime <= endTime; }); } finalFilteredCleryData.forEach(d => {if (!isNaN(d.LATITUDE) && !isNaN(d.LONGITUDE)) { const color = colorScheme(d.filterCat); const polygon = L.polygon([ [d.LATITUDE - 0.0001, d.LONGITUDE], [d.LATITUDE, d.LONGITUDE - 0.000077], [d.LATITUDE, d.LONGITUDE + 0.000077] ], { fillColor: color, color: color, weight: 1, opacity: 1, fillOpacity: 1 }).addTo(crimeLayer); L.circle([d.LATITUDE + 0.00001, d.LONGITUDE], { radius: 6.52, fillColor: color, color: color, weight: 1, opacity: 1, fillOpacity: 1 }).addTo(crimeLayer).bindPopup(`Description: ${d.DESCRIPTION}`).bindTooltip(`Clery Crime: ${d.CRIME}
Date: ${d.TIME.substring(0, d.TIME.indexOf(" "))}
Time: ${d.TIME.substring(d.TIME.indexOf(" "), d.TIME.length)}`); } }); finalFilteredCampusCrimes.forEach(d => {if (!isNaN(d.Latitude) && !isNaN(d.Longitude)) { const color = colorScheme(d.filterCat); L.rectangle([ [parseFloat(d.Latitude) - 0.0000385, parseFloat(d.Longitude) - 0.0000385], [parseFloat(d.Latitude) + 0.0000385, parseFloat(d.Longitude) + 0.0000385] ], { fillColor: color, color: color, weight: 1, opacity: 1, fillOpacity: 1 }).addTo(crimeLayer).bindTooltip(`NYPD Crime: ${d.OFNS_DESC}
Date: ${d.CMPLNT_FR_DT}
Time: ${d.CMPLNT_FR_TM}`); } }); } return container; } 32:[{"id":"629e73bf5ec6c0de1d4d2aaf2575b8ef935246a788c92920d397da0b1ed794d04b3c59e6b51cc1dd884916374e7a457c5976c21f7f1f4a65715804c495e19ce6","href":"https://static.observableusercontent.com/files/629e73bf5ec6c0de1d4d2aaf2575b8ef935246a788c92920d397da0b1ed794d04b3c59e6b51cc1dd884916374e7a457c5976c21f7f1f4a65715804c495e19ce6","name":"WorseRoute.csv","type":"text/csv","lastModified":1714062541819.437,"size":146},{"id":"3ab3dd0a612c87af9dd8a36bfd7c590b1fc50c271ded7c81e9da11db1fa19cb5d939573435a6c8f66c3733eeb24dac1d484b634db237b686cce815cc951b767f","href":"https://static.observableusercontent.com/files/3ab3dd0a612c87af9dd8a36bfd7c590b1fc50c271ded7c81e9da11db1fa19cb5d939573435a6c8f66c3733eeb24dac1d484b634db237b686cce815cc951b767f","name":"CleryNewCats.csv","type":"text/csv","lastModified":1714062541819.437,"size":37797},{"id":"7cbe43dc67252e480db085019cf0d7f2cecda9f45c6c63418a99cb9f6b47dd7baf2497e0b82b5e30a25b099704d67f6ad6468773dfde174166d904876198f308","href":"https://static.observableusercontent.com/files/7cbe43dc67252e480db085019cf0d7f2cecda9f45c6c63418a99cb9f6b47dd7baf2497e0b82b5e30a25b099704d67f6ad6468773dfde174166d904876198f308","name":"ManhattanCrimesCampusRegion@1.csv","type":"text/csv","lastModified":1714062541819.437,"size":3223079},{"id":"27865eedd812bf517a04ab57deb5bb4f136bea39fa87ff9d0fb01f52db1613bb4b3e06c0c7606fc31c06868d02fbc14bfc18a2e57850d7987e3a006b8bda1d60","href":"https://static.observableusercontent.com/files/27865eedd812bf517a04ab57deb5bb4f136bea39fa87ff9d0fb01f52db1613bb4b3e06c0c7606fc31c06868d02fbc14bfc18a2e57850d7987e3a006b8bda1d60","name":"Columbia_Call_Boxes.geojson","type":"application/geo+json","lastModified":1714062541819.437,"size":3135},{"id":"2cdc7ec2878b231f0d84dd8066fce4bc1be6f53a3cbc037c4d22caec778d4750fea67d6cb84afa06972015b00947814771747dddb718e0c02f7bc5abaf4679af","href":"https://static.observableusercontent.com/files/2cdc7ec2878b231f0d84dd8066fce4bc1be6f53a3cbc037c4d22caec778d4750fea67d6cb84afa06972015b00947814771747dddb718e0c02f7bc5abaf4679af","name":"ManhattanCrimes.csv","type":"text/csv","lastModified":1714062541819.437,"size":43665010},{"id":"27018f416aac334f2bc70d68af4645b9e23b476ef4f0d35352a3419c712b0a07fd2843ab73b1861081d7a35bfc44ea9ba38d80558961b1bcc9875d3fc63c14e4","href":"https://static.observableusercontent.com/files/27018f416aac334f2bc70d68af4645b9e23b476ef4f0d35352a3419c712b0a07fd2843ab73b1861081d7a35bfc44ea9ba38d80558961b1bcc9875d3fc63c14e4","name":"ManhattanCrimesSmall.csv","type":"text/csv","lastModified":1714062541819.437,"size":4061},{"id":"e520361ad6470f9904c4af0c04201315e4eda865c51201360d741a6ee1a5712a5f2ca60179faa7edbc64e932b759840d89107a05eca1343c3fb3125c27e5b7fe","href":"https://static.observableusercontent.com/files/e520361ad6470f9904c4af0c04201315e4eda865c51201360d741a6ee1a5712a5f2ca60179faa7edbc64e932b759840d89107a05eca1343c3fb3125c27e5b7fe","name":"RouteSample.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1714062541819.437,"size":4847},{"id":"cbf818774f65e8e010bed490c752ff41235519d1f221b6551266b1c2acb3883829248c7441b775c93c5737c0283d8f5349452a677bf28d0eccda38de0061ee83","href":"https://static.observableusercontent.com/files/cbf818774f65e8e010bed490c752ff41235519d1f221b6551266b1c2acb3883829248c7441b775c93c5737c0283d8f5349452a677bf28d0eccda38de0061ee83","name":"Columbia_University.geojson","type":"application/geo+json","lastModified":1714062541819.437,"size":43346}] 2d:{"id":"9e38e850aa1470e2","slug":null,"title":"A5.2 Static Viz Iterations","thumbnail":"4eb56823535db56746cf15a7d1477c96619c83e2dc679cb074a41f2f7c8f0601","access_level":"public","create_time":"$D2024-04-25T16:29:01.819Z","update_time":"$D2024-04-25T16:36:15.169Z","view_time":null,"first_public_time":"$D2024-04-25T16:29:01.819Z","fork":{"id":"466ecaaf9a8b7cb7","slug":null,"title":"A5.2 Static Viz","owner":{"id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz "}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":445,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"26a58962e10281b9","login":"olivia-bobrownicki","name":"Olivia Bobrownicki","avatar_url":"https://avatars-next.observableusercontent.com/02476afb9d19ecf501dc735c372acc5f0391c6e3dbcc710266244b053e858784","tier":null}],"members":[{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"editor"},{"type":"individual","id":"26a58962e10281b9","login":"olivia-bobrownicki","name":"Olivia Bobrownicki","avatar_url":"https://avatars-next.observableusercontent.com/02476afb9d19ecf501dc735c372acc5f0391c6e3dbcc710266244b053e858784","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A5.2 Static Viz Iterations","cells":[{"id":0,"value":"# A5.2
Static Viz Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":303,"value":"safetyQ = md`What does safety mean to you? (Select from the options below)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"viewof options3 = {\n const form = htl.html``;\n\n // This function updates the selections when either checkbox changes state.\n form.onchange = (event) => {\n selectedOptions = Array.from(form.querySelectorAll('input:checked')).map(el => el.value);\n };\n\n // Initialize selectedOptions with the current selections.\n let selectedOptions = Array.from(form.querySelectorAll('input:checked')).map(el => el.value);\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"text = md`What time range you are interested in?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"viewof startTime = Inputs.range([0, 23], { \n step: 1, // Adjusts in 1-hour increments\n value: 0, // Default value set to 0 which corresponds to '00:00'\n label: \"Start Time (hour):\",\n format: d => `${d}:00` // Display as '0:00' to '23:00'\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"viewof endTime = Inputs.range([0, 23], { \n step: 1, // Adjusts in 1-hour increments\n value: 23, // Default value set to 23 which corresponds to '23:00'\n label: \"End Time (hour):\",\n format: d => `${d}:00` // Display as '0:00' to '23:00'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"timeChoice = md`

Selected Start Time: ${startTime}:00, Selected End Time: ${endTime}:00

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"textTwo = md`What does danger mean to you? (Select the crime categories that you consider dangerous)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"viewof options2 = {\n let selectedOptions = [];\n const checkboxState = Inputs.checkbox(crimes);\n checkboxState.addEventListener(\"change\", (event) => {\n selectedOptions = Array.from(checkboxState.querySelectorAll('input:checked')).map(el => el.value);\n return selectedOptions; // Ensure the selected options are returned for reactivity\n });\n\n return checkboxState;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"legend = Swatches(d3.scaleOrdinal(crimes, adjustedColorList), {\n columns: \"175px\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"campus = {\n const container = yield htl.html`

`;\n const map = L.map(container).setView([40.80794694447276, -73.96214143872722], 16);\n\n L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n\n \n L.geoJSON(columbia_university, {\n onEachFeature: function(feature, layer) {\n if (feature.properties && feature.properties.name) {\n layer.bindPopup(feature.properties.name);\n }\n }\n }).addTo(map);\n\n\n\n return container;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"function normalizeCrimeType(crime) {\n if (crime === \"Attempted Robbery\") {\n return \"robbery\";\n } else if (crime === \"Motorcycle Theft\") {\n return \"motor vehicle theft\";\n } else if (crime === \"Burglary Pattern\") {\n return \"burglary\";\n } else {\n return crime; // Lowercase to match against the `options2` array\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"function getHourFromTimeString(timeString) {\n const [time, meridian] = timeString.split(' ');\n let [hours, minutes] = time.split(':');\n hours = parseInt(hours, 10) + (meridian && meridian.toLowerCase() === 'pm' && hours !== '12' ? 12 : 0);\n hours = hours % 24; // Correct for midnight being '12:00 AM'\n return hours;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"turf = require('https://npmcdn.com/@turf/turf/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":132,"value":"viewof options = {\n let selectedOptions = [];\n const checkboxState = Inputs.checkbox(crimes, { label: \"Filter\" });\n\n checkboxState.addEventListener(\"change\", (event) => {\n const selectedCheckbox = event.target;\n const option = selectedCheckbox.value;\n\n if (selectedCheckbox.checked) {\n if (selectedOptions.length > 4) {\n const lastSelectedOption = selectedOptions.pop();\n lastSelectedOption.checked = false;\n }\n selectedOptions.push(selectedCheckbox);\n } else {\n const index = selectedOptions.indexOf(selectedCheckbox);\n if (index !== -1) {\n selectedOptions.splice(index, 1);\n }\n }\n });\n\n return checkboxState;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"Swatches(d3.scaleOrdinal(crimes, adjustedColorList), {\n columns: \"150px\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"campusCrimes[1].CMPLNT_FR_TM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"workbook = FileAttachment(\"RouteSample.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"workbook.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"routeSample = workbook.sheet(0, {\n headers: false,\n // range: \"A1:J10\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"worseroute = await FileAttachment(\"WorseRoute.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"CleryNewCats.csv"},{"id":17,"value":"data = await FileAttachment(\"CleryNewCats.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"crimes = [\"Theft and Property Crimes\",\"Violent and Sex Crimes\",\"Fraud and Financial Crimes\",\"Drug and Substance-Related Crimes\",\"Miscellaneous Crimes\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"options","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"selectedData = data.map(function(element){\n const crime = element[\"CRIME\"];\n for (let i = 0; i index !== 1 && index !== 11);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"colorList = [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\", \"#d16f9b\", \"#6f6dc7\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"colorScheme = d3.scaleOrdinal(crimes, adjustedColorList);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"columbia_university.features = columbia_university.features.map(feature => {\n if (feature.geometry.type === \"Point\") {\n // Destructure the coordinates for easier access\n const [longitude, latitude] = feature.geometry.coordinates;\n // Define the size of the square, e.g., 0.0001 degrees which is roughly 11m\n const size = 0.0001;\n // Create a square polygon around the point\n feature.geometry = {\n type: \"Polygon\",\n // Define the square as an array of points (the last point should close the square by repeating the first point)\n coordinates: [[\n [longitude - size, latitude - size],\n [longitude - size, latitude + size],\n [longitude + size, latitude + size],\n [longitude + size, latitude - size],\n [longitude - size, latitude - size] // closing the polygon by repeating the first point\n ]]\n };\n // Keep the properties the same\n feature.properties = {...feature.properties};\n }\n return feature; // Return the updated feature\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"columbia_university = FileAttachment(\"Columbia_University.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"const timeInputContainer = document.createElement('div');\ntimeInputContainer.style.marginBottom = '10px'; // Add some space below the inputs\n\nconst startTimeInput = document.createElement('input');\nstartTimeInput.type = 'time';\nstartTimeInput.id = 'startTime';\nstartTimeInput.style.marginRight = '5px'; // Add some space between the inputs\n\nconst endTimeInput = document.createElement('input');\nendTimeInput.type = 'time';\nendTimeInput.id = 'endTime';\n\ntimeInputContainer.appendChild(startTimeInput);\ntimeInputContainer.appendChild(endTimeInput);\ncontainer.parentNode.insertBefore(timeInputContainer, container); // Insert the time inputs above the map container\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":250,"value":"columbia_call_boxes = FileAttachment(\"Columbia_Call_Boxes.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"smallCrimeData = FileAttachment(\"ManhattanCrimesSmall.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"cityCrimeData = FileAttachment(\"ManhattanCrimes.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"campusCrimes = FileAttachment(\"ManhattanCrimesCampusRegion@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"