3e:null 3f:["$","title",null,{"children":"Stinky reports | @Santhosh Aloori | Observable"}] 45:T4c3,{ const total = records.length; const southCount = records.filter(d => d.southWind).length; const southPct = ((southCount / total) * 100).toFixed(0); const peakCount = records.filter(d => d.year === 2020).length; const avgSev = (records.reduce((s, d) => s + d.severity, 0) / total).toFixed(1); const items = [ { label: "Total reports", value: total.toLocaleString(), sub: "since May 2019" }, { label: "South-wind share", value: southPct + "%", sub: southCount.toLocaleString() + " reports" }, { label: "Peak year", value: "2020", sub: peakCount.toLocaleString() + " reports" }, { label: "Avg severity", value: avgSev + " / 5", sub: "pretty bad" } ]; return html`

${items.map(m => html`

${m.label}

${m.value}

${m.sub}

`)}

`; }46:T4b8,{ const stopWords = new Set([ "very","always","like","just","this","that","with","from","have","been", "even","more","some","when","than","into","also","does","smells","smell", "today","still","again","really","would","could","much","area","came", "come","coming","outside","house","home","morning","night","windows", "strong","back","around","time","know","need","seems","about","there", "their","they","being","same","over","what","your","last","were","after" ]); const wordCounts = {}; records.forEach(d => { const desc = (d.description || "").toLowerCase(); (desc.match(/[a-z]{4,}/g) || []).forEach(w => { if (!stopWords.has(w)) wordCounts[w] = (wordCounts[w] || 0) + 1; }); }); const topWords = Object.entries(wordCounts) .sort((a, b) => b[1] - a[1]) .slice(0, 15) .map(([word, count]) => ({ word, count })); return Plot.plot({ height: 340, marginLeft: 90, x: { label: "Times mentioned in reports" }, y: { label: null }, marks: [ Plot.barX(topWords, { y: "word", x: "count", fill: "#4e79a7", sort: { y: "-x" }, tip: true }), Plot.ruleX([0]) ] }); }47:T503,{ const total = records.length; const petroCount = records.filter(d => d.smellType === "petrochemical").length; const zipPct = ((records.filter(d => d.zipcode === "04106").length / total) * 100).toFixed(0); return html`

The bottom line

South Portland's air quality problem is not a mystery. ${petroCount.toLocaleString()} of the ${total.toLocaleString()} reports explicitly describe petrochemical odors. The pattern is consistent: south winds carry fumes from oil tank farms and industrial sites into residential neighborhoods, hitting hardest on warm summer mornings. Residents in ZIP code 04106 bear ${zipPct}% of all complaints. The data doesn't just suggest a problem — it points directly at the source.

Data: SmellMyCity app · Analysis by Santhosh Aloori · CS7290

`; }48:T16b4,--- ## Data visualization cheatsheet ### Plan **Why am I making this visualization?** Starting with EDA to figure out what's going on in the smell data, then turning it into something that communicates the main findings. Basically exploring first, then telling the story once I found one. **Who am I making it for?** Class assignment, but ideally it should make sense to anyone — residents who deal with these smells, or even someone at city hall wondering if the complaints are legit. **What are the constraints?** It's an Observable notebook so it lives on the web. Interactive — you can hover for tooltips. No print or projector worries. I have color available and I'm using red to highlight south-wind stuff and blue for the rest. **What software can I use?** Observable with Plot and D3. Data comes from a CSV. **What story does it tell?** South Portland has a smell problem and it's not random. The oil tanks and industrial stuff sit south of where people live, so when wind comes from the south it pushes those petrochemical fumes right into neighborhoods. It's worst on summer mornings. Most of the complaints come from one zip code (04106) and the word "petroleum" shows up in descriptions over 600 times. People know exactly what they're smelling. *Caption:* "Smell reports in South Portland are driven by petrochemical fumes carried on south winds, peaking in summer and late morning." **Where are the bodies?** - Each row is one smell report from the SmellMyCity app. Severity is self-reported 1–5. Wind direction comes from NOAA and it's the prevailing direction for that day, not necessarily the exact moment someone filed a report. Locations are slightly randomized to protect privacy. - The app was set up through GPCOG and Northeastern's Roux Institute. So the data exists because someone decided to build this tool — it wouldn't exist otherwise. - The people most affected are residents near the tank farms in South Portland, especially families with kids at nearby schools. - Who's missing? Anyone without a smartphone or who doesn't know the app exists. We also can't tell if 10 people filed 100 reports or 100 people filed 100 reports — it's all anonymous. Winter is probably underreported because people are inside with windows shut, not because it stops smelling. --- ### Identify **What are my data types?** Quantitative: datetime, severity (1–5, technically ordinal but I'm treating it as numeric), lat/long, gust speed, bearing Qualitative ordered: compass direction (N, NE, E, etc.) Qualitative unordered: description (free text), zipcode, smell type (I derived this from keywords), wind group (south vs other) **What is the function of each graphic?** - Timeline → how reports are distributed over time - Wind direction bars → comparing counts across directions - Severity by direction → comparing + showing composition within each direction - Top words → ranking which terms come up most - Smell type by wind (faceted) → seeing if south wind changes what people smell - Hour of day → when during the day reports happen - Monthly bars → seasonal pattern **What plot types work?** Bar charts for the categorical stuff. Histograms for time-based distributions. Stacked bars for severity breakdown. I used a faceted chart to split south wind vs other — considered a heatmap for hour × month but it felt like overkill for what I was trying to show. --- ### Encode **Marks and channels:** Mostly using rectangular bars (rect marks). Position on x or y axis encodes the category or time bin. Length encodes count. Color does two jobs depending on the chart — sometimes it's just showing south wind vs other (red/blue), sometimes it's a 5-color scale for severity. The faceted chart uses row position to separate wind groups. Not doing anything fancy with size or shape — bars and position do most of the heavy lifting here. --- ### Add information **Does the caption describe the how and what?** Each chart has a paragraph above it explaining what to look at and why it matters. The conclusion at the bottom pulls the numbers together. I tried to make it so you could read just the text and still get the point even without the charts. **Are the labels clear?** I think so. Axes say things like "Number of reports" instead of variable names. Wind uses normal compass letters. Severity has a color legend. There are tooltips if you hover. --- ### Revise **Is the plot expressive?** I think the encodings match the data types — time on a position axis, categories as bars, composition as stacked bars. Nothing is encoded in a weird way. **Is the plot effective?** The main point — south wind = more petrochemical complaints — comes through pretty clearly. Sorting bars by count helps. The red/blue color makes the south wind thing jump out. **Is there any chartjunk?** No 3D, no weird gradients, no background images. Gridlines are light. I kept it minimal. **Are comparisons easy?** Bars share the same baseline so you can compare lengths directly. The faceted chart puts south wind and other wind right next to each other which makes the difference obvious. **Are the data faithfully represented?** Axes start at zero, nothing is truncated. I noted the limitations — the wind data is daily not hourly, locations are fuzzed, and it's self-selected app users not a random sample. It's not perfect data but I'm not hiding that. **Does the graphic tell a meaningful data story?** Yeah — it builds up piece by piece. First you see when reports happen (timeline), then where the wind comes from (direction chart), then what it smells like (word chart), then you see those things connected (faceted chart). The conclusion puts a number on it. It's not just "here are some charts," there's an actual argument being made.49:[{"id":"dc2d1af9291d0d4e60c1484ba145a5b7517658331b8883ed8eb02ac18cc76f231d0d7abc19aa6327e0ce6e39b6cefc4e3c92018ec69454e4a57eae3c4261c4c5","href":"https://static.observableusercontent.com/files/dc2d1af9291d0d4e60c1484ba145a5b7517658331b8883ed8eb02ac18cc76f231d0d7abc19aa6327e0ce6e39b6cefc4e3c92018ec69454e4a57eae3c4261c4c5","name":"stinky-reports.csv","type":"text/csv","lastModified":1790564586054,"size":505519}] 43:{"id":"89ecffb74b233720","slug":"stinky-reports","title":"Stinky reports","thumbnail":"9d8de904675c961945ff8bbeb794ef3879515f5c0d63a1be32c6760119226bd8","access_level":"public","create_time":"$D2026-09-28T03:03:18.143Z","update_time":"$D2026-09-28T03:31:21.832Z","view_time":null,"first_public_time":"$D2026-09-28T03:31:26.497Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5ccac367236036b7","login":"santhosh-1413","name":"@Santhosh Aloori","avatar_url":"https://avatars-next.observableusercontent.com/6af8b32a04ef690fe3adcd1fb8d78f9fb871740dcd5a8b0c84e111bba2c8f21b","tier":"free_2026","bio":""},"version":70,"publish_version":70,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7a73df16c571037","login":"santhosh-1413","name":"@Santhosh Aloori","avatar_url":"https://avatars-next.observableusercontent.com/6af8b32a04ef690fe3adcd1fb8d78f9fb871740dcd5a8b0c84e111bba2c8f21b","tier":null,"bio":""}],"members":[{"type":"team","id":"5ccac367236036b7","login":"santhosh-1413","name":"@Santhosh Aloori","avatar_url":"https://avatars-next.observableusercontent.com/6af8b32a04ef690fe3adcd1fb8d78f9fb871740dcd5a8b0c84e111bba2c8f21b","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Stinky reports","cells":[{"id":1,"value":"# Stinky reports\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"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":3,"value":"records = data.map(d => {\n const dt = new Date(d.datetime);\n const hour = dt.getUTCHours();\n const desc = (d.description || \"\").toLowerCase();\n\n let smellType = \"other\";\n if (/petroleum|oil|tank|fuel|gasoline|diesel|propane|kerosene/.test(desc)) smellType = \"petrochemical\";\n else if (/asphalt|rubber|tire|exhaust|pavement/.test(desc)) smellType = \"transportation\";\n else if (/sewage|trash|garbage|waste|dump/.test(desc)) smellType = \"waste\";\n else if (/rotten|sulfur|egg|chemical|burning|smoke|fume/.test(desc)) smellType = \"chemical / sulfur\";\n else if (desc.length > 0) smellType = \"other described\";\n\n const compass = d.compass || \"Unknown\";\n const southWind = [\"S\", \"SW\", \"SE\"].includes(compass);\n\n return {\n ...d,\n date: dt,\n year: dt.getUTCFullYear(),\n month: dt.getUTCMonth(),\n hour,\n severity: +d.value,\n compass,\n bearing: +d.bearing,\n gust: +d.gust,\n smellType,\n southWind,\n windGroup: southWind ? \"South winds (S, SW, SE)\" : \"Other winds\"\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"# Something stinks in South Portland\n\n${records.length.toLocaleString()} smell reports from the SmellMyCity app (2019–2026) tell a clear story: petrochemical odors dominate, south winds carry the worst of it, and summer mornings are peak stink.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Chapter 1: When did it get bad?\n\nSmell reports surged in **2020**: the year residents organized and the app gained traction. The pattern is seasonal: complaints spike every summer when warm air traps and spreads industrial fumes, then drop in winter when cold air and closed windows keep odors at bay.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Plot.plot({\n height: 200,\n marginLeft: 40,\n x: { label: null },\n y: { label: \"Reports\", grid: true },\n marks: [\n Plot.rectY(records, Plot.binX({ y: \"count\" }, { x: \"date\", fill: \"#4e79a7\", interval: \"month\", tip: true })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Chapter 2: Follow the wind\n\nSouth Portland's oil tank farms and industrial facilities sit to the **south** of residential neighborhoods. When the wind blows from the south, it carries petrochemical vapors straight into homes, schools, and parks.\n\n**South winds (S, SW, SE) account for ${((records.filter(d => d.southWind).length / records.length) * 100).toFixed(0)}% of all reports** — and the single direction \"S\" alone generated ${records.filter(d => d.compass === \"S\").length.toLocaleString()} complaints, more than any other wind direction.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"{\n const southDirs = new Set([\"S\", \"SW\", \"SE\"]);\n const byDir = d3.rollups(records, v => v.length, d => d.compass)\n .map(([dir, count]) => ({ dir, count, isSouth: southDirs.has(dir) }));\n\n return Plot.plot({\n height: 260,\n marginLeft: 50,\n x: { label: \"Number of reports\" },\n y: { label: null },\n marks: [\n Plot.barX(byDir, {\n y: \"dir\",\n x: \"count\",\n fill: d => d.isSouth ? \"#e15759\" : \"#4e79a7\",\n sort: { y: \"-x\" },\n tip: true\n }),\n Plot.ruleX([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"

\n South winds \n Other directions\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Chapter 3: Which winds bring the worst smells?\n\nEast and northeast winds produce the highest percentage of severe reports (severity 4–5). These winds blow across the Fore River industrial corridor. South winds bring the *most* reports by volume, but easterlies bring the *nastiest*.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"{\n const dirOrder = [\"N\", \"NE\", \"E\", \"SE\", \"S\", \"SW\", \"W\", \"NW\"];\n const filtered = records.filter(d => dirOrder.includes(d.compass));\n\n return Plot.plot({\n height: 260,\n marginLeft: 50,\n color: {\n domain: [1, 2, 3, 4, 5],\n range: [\"#76b7b2\", \"#59a14f\", \"#edc949\", \"#f28e2b\", \"#e15759\"],\n legend: true,\n label: \"Severity\"\n },\n x: { label: \"Number of reports\" },\n y: { label: null, domain: dirOrder },\n marks: [\n Plot.barX(filtered, Plot.groupY({ x: \"count\" }, {\n y: \"compass\",\n fill: \"severity\",\n tip: true,\n order: \"severity\"\n })),\n Plot.ruleX([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## Chapter 4: What does it smell like?\n\nWhen residents describe the smell, one word dominates everything else: **petroleum**. \"Oil\", \"tanks\", \"fumes\", \"asphalt\", and \"gasoline\" follow close behind. These aren't mystery odors — people know exactly where they're coming from.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Chapter 5: South wind = petrochemical wind\n\nSplitting reports by wind direction and smell type makes the connection undeniable. On south-wind days, petrochemical complaints surge — the oil terminals and tank farms sit directly upwind. On other-wind days, the smell types spread out more evenly, but petroleum still leads.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"{\n const described = records.filter(d => d.smellType !== \"other\");\n\n return Plot.plot({\n height: 280,\n marginLeft: 120,\n facet: { data: described, y: \"windGroup\" },\n fy: { label: null },\n x: { label: \"Number of reports\" },\n y: { label: null },\n color: { legend: true },\n marks: [\n Plot.barX(described, Plot.groupY({ x: \"count\" }, {\n y: \"smellType\",\n fill: \"smellType\",\n sort: { y: \"-x\" },\n tip: true\n })),\n Plot.ruleX([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Chapter 6: The morning stink\n\nReports peak sharply around **11 AM** — when people step outside, open windows, or walk kids to school. A second bump appears late at night (9–11 PM), when temperature inversions trap fumes close to the ground. The worst combination? A summer morning with a south wind.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Plot.plot({\n height: 220,\n marginLeft: 40,\n x: { label: \"Hour of day (UTC)\", domain: d3.range(24) },\n y: { label: \"Reports\", grid: true },\n marks: [\n Plot.rectY(records, Plot.binX({ y: \"count\" }, {\n x: \"hour\",\n fill: \"#4e79a7\",\n thresholds: d3.range(25),\n tip: true\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":23,"value":"## Chapter 7: Summer is stink season\n\nReports follow a strong seasonal curve. **August** is the worst month, followed by June and September. Warm temperatures increase evaporation from petroleum storage tanks and asphalt operations, while summer atmospheric conditions trap pollutants near the surface.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n const monthNames = [\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"];\n const byMonth = d3.rollups(records, v => v.length, d => d.month)\n .map(([m, count]) => ({ month: monthNames[m], monthNum: m, count }))\n .sort((a, b) => a.monthNum - b.monthNum);\n\n return Plot.plot({\n height: 220,\n marginLeft: 40,\n x: { label: null, domain: monthNames },\n y: { label: \"Total reports (all years)\", grid: true },\n marks: [\n Plot.barY(byMonth, {\n x: \"month\",\n y: \"count\",\n fill: d => d.monthNum >= 5 && d.monthNum <= 8 ? \"#e15759\" : \"#4e79a7\",\n tip: true\n }),\n Plot.ruleY([0])\n ]\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":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 44:"$43:body"