3f:null 40:["$","title",null,{"children":"hw02-stinky | Sam Treadwell | Observable"}] 46:T1311,map = { const container = document.createElement("div"); container.style.width = "100%"; container.style.height = "600px"; container.style.position = "relative"; // Load MapLibre CSS if (!document.querySelector("#maplibre-css")) { const link = document.createElement("link"); link.id = "maplibre-css"; link.rel = "stylesheet"; link.href = "https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css"; document.head.appendChild(link); } // Convert reports to GeoJSON const reportsGeoJSON = { type: "FeatureCollection", features: dataWithPetroleum.map(d => ({ type: "Feature", geometry: { type: "Point", coordinates: [ +d.longitude, +d.latitude ] }, properties: { petroleumRelated: d.petroleumRelated, description: d.description ?? "", comments: d.comments ?? "", date: d.date ?? "", // Change this field name if your CSV uses a different name compass: d.compass ?? "" } })) }; // Create MapLibre map const map = new MapLibreMap({ container: container, style: "https://tiles.openfreemap.org/styles/liberty", center: [-70.2553, 43.6591], zoom: 11 }); map.on("load", () => { // Add report data map.addSource("reports", { type: "geojson", data: reportsGeoJSON }); // Add report points map.addLayer({ id: "reports", type: "circle", source: "reports", paint: { "circle-radius": 5, "circle-color": [ "case", ["==", ["get", "petroleumRelated"], true], "#d97706", "#888888" ], "circle-opacity": 0.65, "circle-stroke-color": "#ffffff", "circle-stroke-width": 1 } }); // Change cursor when hovering over reports map.on("mouseenter", "reports", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "reports", () => { map.getCanvas().style.cursor = ""; }); // Show popup when a report is clicked map.on("click", "reports", event => { const feature = event.features?.[0]; if (!feature) return; const properties = feature.properties; const type = properties.petroleumRelated === true || properties.petroleumRelated === "true" ? "Petroleum-related" : "Other"; const description = properties.description || "No description provided."; const comments = properties.comments || ""; const compass = properties.compass || "Not available"; const popupHTML = `

${type} odor report

Date: ${properties.date || "Unknown"}

Wind direction: ${compass}

Description:
${description}

${ comments ? `

Comments:
${comments}

` : "" }

`; new Popup({ closeButton: true, closeOnClick: true, maxWidth: "320px" }) .setLngLat(event.lngLat) .setHTML(popupHTML) .addTo(map); }); }); // LEGEND const legend = document.createElement("div"); legend.style.position = "absolute"; legend.style.top = "10px"; legend.style.right = "10px"; legend.style.background = "white"; legend.style.padding = "10px 12px"; legend.style.borderRadius = "4px"; legend.style.boxShadow = "0 1px 4px rgba(0,0,0,0.2)"; legend.style.fontFamily = "sans-serif"; legend.style.fontSize = "13px"; legend.style.zIndex = "1"; legend.innerHTML = ` Report Type

Petroleum-related

Other

`; container.appendChild(legend); return container; }47:[{"id":"dc2d1af9291d0d4e60c1484ba145a5b7517658331b8883ed8eb02ac18cc76f231d0d7abc19aa6327e0ce6e39b6cefc4e3c92018ec69454e4a57eae3c4261c4c5","href":"https://static.observableusercontent.com/files/dc2d1af9291d0d4e60c1484ba145a5b7517658331b8883ed8eb02ac18cc76f231d0d7abc19aa6327e0ce6e39b6cefc4e3c92018ec69454e4a57eae3c4261c4c5","name":"stinky-reports.csv","type":"text/csv","lastModified":1790173137648,"size":505519}] 44:{"id":"2e2cd264d2491e6d","slug":"hw02-stinky","title":"hw02-stinky","thumbnail":"30a049e56d04e4c6324df7ae94f42e830386f04726c8a6466d2f84285491584d","access_level":"public","create_time":"$D2026-09-23T14:09:19.076Z","update_time":"$D2026-09-26T20:24:15.567Z","view_time":null,"first_public_time":"$D2026-09-23T17:06:07.314Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7cf08cbc9920cb15","login":"sam-treadwell","name":"Sam Treadwell","avatar_url":"https://avatars-next.observableusercontent.com/c5c2149d33896d1836b02771f6b36298204721d5b02d63a4b91ad92357eb176a","tier":"starter_2024","bio":"","following":false},"version":265,"publish_version":265,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c96bbbba4791bda","login":"sam-treadwell","name":"Sam Treadwell","avatar_url":"https://avatars-next.observableusercontent.com/9472cc846b790f317fdbf5fec90e59ea84eac5d3acf894d6eb11d1133d857cf3","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"7cf08cbc9920cb15","login":"sam-treadwell","name":"Sam Treadwell","avatar_url":"https://avatars-next.observableusercontent.com/c5c2149d33896d1836b02771f6b36298204721d5b02d63a4b91ad92357eb176a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"hw02-stinky","cells":[{"id":1,"value":"# hw02-stinky","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"stinky-reports.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## 1. Petroleum-related vs. Other Reports\n\nBased on the **targeted keywords** found in the **description** and **comments** fields of the *stinky-reports.csv* data, I classified each report as either petroleum-related or other. The chart shows both the total number and percentage of reports in each category. A report is classified as petroleum-related when its description or comments contain at least one of the targeted keywords.\n\n**Targeted keywords:** “oil”, “oily”, “petroleum”, “petrol”, “petrochemical”, “petro”, “gasoline”, “diesel”, “fuel”, “crude”, “asphalt”, “asphalty”, “tar”","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n label: \"Number of reports\"\n },\n color: {\n domain: [\"Petroleum-related\", \"Other\"],\n range: [\"#d97706\", \"#888888\"]\n },\n marks: [\n Plot.barY(\n reportCategoryCounts,\n {\n x: \"category\",\n y: \"count\",\n fill: \"category\"\n }\n ),\n\n Plot.text(\n reportCategoryCounts,\n {\n x: \"category\",\n y: \"count\",\n text: d => `${d.count.toLocaleString()} (${d.percentage.toFixed(1)}%)`,\n dy: -10,\n fontWeight: \"bold\"\n }\n ),\n\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"reportCategoryCounts = [\"Petroleum-related\", \"Other\"].map(category => {\n const count = dataWithPetroleum.filter(\n d => d.petroleumRelated === (category === \"Petroleum-related\")\n ).length;\n\n return {\n category,\n count,\n percentage: (count / dataWithPetroleum.length) * 100\n };\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const petroleumKeywords = [\n \"oil\",\n \"oily\",\n \"petroleum\",\n \"petrol\",\n \"petrochemical\",\n \"petro\",\n \"gasoline\",\n \"diesel\",\n \"fuel\",\n \"crude\",\n \"asphalt\",\n \"asphalty\",\n \"tar\"\n];\n\nconst dataWithPetroleum = data.map(d => {\n const text = `${d.description ?? \"\"} ${d.comments ?? \"\"}`.toLowerCase();\n\n return {\n ...d,\n datetime: new Date(d.datetime),\n petroleumRelated: petroleumKeywords.some(keyword =>\n text.includes(keyword)\n )\n };\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## 2. Most Common Petroleum-Related Keywords\nTo better understand how residents described petroleum-related odors, I counted the number of reports containing each targeted keyword in the description and comments fields. **“Oil”** was the most frequently occurring targeted keyword, followed by **“petroleum”** and **“tar.”** This provides a closer look at the language residents used when reporting odors classified as petroleum-related.\n\n**Note:** These counts represent the number of reports containing each keyword, rather than the total number of times a word appears. Because the classification is based on keyword matching, some reports may contain multiple targeted keywords.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"Plot.plot({\n marginLeft: 110,\n x: {\n grid: true,\n label: \"Number of reports mentioning keyword\"\n },\n y: {\n label: null,\n domain: petroleumKeywordCounts.map(d => d.term)\n },\n marks: [\n Plot.barX(\n petroleumKeywordCounts,\n {\n x: \"count\",\n y: \"term\",\n sort: {y: \"-x\"},\n fill: \"#d97706\",\n tip: true\n }\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"petroleumKeywordCounts = petroleumKeywords\n .map(keyword => ({\n term: keyword,\n count: dataWithPetroleum.reduce((total, d) => {\n const text = `${d.description ?? \"\"} ${d.comments ?? \"\"}`.toLowerCase();\n\n return total + (text.includes(keyword) ? 1 : 0);\n }, 0)\n }))\n .sort((a, b) => b.count - a.count)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## 3. Petroleum-related Reports Over Time\n\nTo examine how petroleum-related odor reports changed over time, I grouped the reports by month using the **`datetime`** field and counted the number of reports classified as petroleum-related in each month. The resulting time series shows periods when petroleum-related reports were more or less frequent, making it possible to identify broader temporal patterns in the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"Petroleum-related reports\"\n },\n x: {\n label: \"Date\"\n },\n marks: [\n Plot.lineY(\n dataWithPetroleum.filter(d => d.petroleumRelated),\n Plot.binX(\n {y: \"count\"},\n {\n x: \"datetime\",\n interval: \"month\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## 4. Map of Petroleum-related Reports\n\nThe map shows the geographic distribution of odor reports across the South Portland area, with **petroleum-related reports shown in orange** and **other reports shown in gray**. Each point represents an individual report based on its latitude and longitude. Clicking a point reveals additional information about the report, including its date, description, comments, and prevailing wind direction.\n\nThe geographic pattern can help identify areas where reports are more concentrated, although the locations should not be interpreted as the exact locations of individual residents. The original project notes that report locations were shifted within a short radius to protect privacy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {\n Map as MapLibreMap,\n Popup\n} from \"npm:maplibre-gl\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## 5. Petroleum-related Reports by Wind Direction\n\nTo investigate how petroleum-related reports were distributed across prevailing wind directions, I calculated the percentage of petroleum-related reports associated with each wind direction.\n\nThe wind direction comes from the **`compass`** field in the dataset and represents the prevailing wind direction associated with the report. For each direction, the percentage represents the number of petroleum-related reports associated with that direction divided by the total number of petroleum-related reports with a recorded wind direction.\n\n**Percentage = reports for each wind direction ÷ total petroleum-related reports × 100**\n\nThis relationship can reveal patterns worth investigating further, but it does not establish that wind direction or a particular source caused the reported odors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Plot.plot({\n marginLeft: 50,\n x: {\n label: \"Petroleum-related reports (%)\",\n domain: [0, 50],\n grid: true,\n tickFormat: d => `${d}%`\n },\n y: {\n label: \"Wind direction\",\n domain: [\"N\", \"NE\", \"E\", \"SE\", \"S\", \"SW\", \"W\", \"NW\"]\n },\n marks: [\n Plot.barX(\n petroleumByWindDirection,\n {\n x: \"percentage\",\n y: \"direction\",\n sort: {y: \"-x\"},\n fill: \"#d97706\"\n }\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"petroleumByWindDirection = [\"N\", \"NE\", \"E\", \"SE\", \"S\", \"SW\", \"W\", \"NW\"]\n .map(direction => {\n const petroleumReports = dataWithPetroleum.filter(\n d => d.petroleumRelated\n );\n\n const directionReports = petroleumReports.filter(\n d => d.compass === direction\n );\n\n return {\n direction,\n percentage: (directionReports.length / petroleumReports.length) * 100\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 45:"$44:body"