3e:null 3f:["$","title",null,{"children":"Assignment 4 - Multiple Views | RainaAaseesProjectDataSelection | Observable"}] 45:Tdb5,viewof mapboxMap = { let container = html`

`; mapboxgl.accessToken = "pk.eyJ1IjoiYWFzZWVzMjgiLCJhIjoiY204Nnd1dHU3MDEwZTJsb2drNjR0MWQyZiJ9.Rl6Gx1LRIZOMc3_RIzPpVA"; let map = new mapboxgl.Map({ container: container, style: "mapbox://styles/mapbox/streets-v11", center: [-118.2437, 33.9922], zoom: 8, maxZoom: 15, minZoom: 8, maxBounds: [[-119.3, 33.2], [-117.3, 34.5]] }); let heatmapVisible = true; // Default Heatmap is ON map.on("load", () => { // Traffic Layer map.addLayer({ id: "traffic", type: "line", source: { type: "vector", url: "mapbox://mapbox.mapbox-traffic-v1" }, "source-layer": "traffic", paint: { "line-width": ["interpolate", ["linear"], ["zoom"], 3, 1, 8, 4], "line-color": [ "match", ["get", "congestion"], "low", "#00FF00", "moderate", "#FFA500", "heavy", "#FF0000", "severe", "#8B0000", "#000000" ], "line-opacity": 0.8 } }); // Heatmap Layer map.addSource("heatmap-source", { type: "geojson", data: { "type": "FeatureCollection", "features": geojsonPM25.filter(d => d.properties.pm25 <= pm25Range) } }); map.addLayer({ id: "weather-heatmap", type: "heatmap", source: "heatmap-source", paint: { "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 10, 1, 15, 3], "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 10, 7, 18, 12], "heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(0, 0, 255, 0)", 0.1, "rgb(0, 255, 255)", 0.3, "rgb(0, 255, 0)", 0.5, "rgb(255, 255, 0)", 1, "rgb(255, 0, 0)" ] } }); // Adding a circle Layer for Hover Popups map.addLayer({ id: "pm25-points", type: "circle", source: "heatmap-source", paint: { "circle-radius": 5, "circle-color": "black", "circle-opacity": 0.0 // Hidden - only for hover events } }); // Creating a Popup that follows the cursor let popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false, offset: [133, -555] }); map.on("mousemove", "pm25-points", (e) => { map.getCanvas().style.cursor = "pointer"; let coordinates = e.lngLat; let pm25Value = e.features[0].properties.pm25; popup.setLngLat(coordinates) .setHTML(`

PM2.5: ${pm25Value.toFixed(2)} µg/m³

`) .addTo(map); }); map.on("mouseleave", "pm25-points", () => { map.getCanvas().style.cursor = ""; popup.remove(); }); // Toggling Heatmap viewof heatmapToggleButton.onclick = () => { heatmapVisible = !heatmapVisible; map.setLayoutProperty("weather-heatmap", "visibility", heatmapVisible ? "visible": "none"); }; // Updating Heatmap when PM2.5 slider changes viewof pm25Range.oninput = () => { map.getSource("heatmap-source").setData({ "type": "FeatureCollection", "features": geojsonPM25.filter(d => d.properties.pm25 <= pm25Range.value) }); }; }); return container; };46:T9d4,viewof pm25Histogram = { let binsWithTitles = bins.map((bin, i) => ({ x: bin.x0, x1: bin.x1, y: bin.length, index: i, title: `Range: ${bin.x0} - ${bin.x1}\nCount: ${bin.length}` })); let chart = Plot.plot({ width: 600, height: 300, marks: [ Plot.rectY(binsWithTitles, { x: "x", x1: "x1", y: "y", fill: "steelblue", stroke: "black", strokeWidth: 0.5, title: "title" }), Plot.ruleY([0]) ], x: { label: "PM2.5 Value Range", tickFormat: (d) => `${Math.floor(d)}-${Math.ceil(d)}` }, y: { label: "Count of Data Points" } }); let wrapper = html`

`; wrapper.appendChild(chart); // Add CSS for selected bar and label const style = html``; wrapper.appendChild(style); // Click behavior for histogram bars const bars = wrapper.querySelectorAll("rect"); bars.forEach((bar, i) => { bar.style.cursor = "pointer"; bar.addEventListener("click", (e) => { // Remove "selected" from all bars bars.forEach(b => b.classList.remove("selected")); bar.classList.add("selected"); // Remove old popup const existing = wrapper.querySelector(".popup-label"); if (existing) existing.remove(); // Create new popup const popup = document.createElement("div"); popup.className = "popup-label"; popup.innerHTML = `Range: ${binsWithTitles[i].x}–${binsWithTitles[i].x1}
Count: ${binsWithTitles[i].y}`; wrapper.appendChild(popup); // Position popup above bar const rect = bar.getBoundingClientRect(); const wrapperRect = wrapper.getBoundingClientRect(); popup.style.left = `${rect.left + rect.width / 2 - wrapperRect.left}px`; popup.style.top = `${rect.top - wrapperRect.top - 8}px`; // Filter geojsonPM25 based on selected range const selectedRange = binsWithTitles[i]; const filteredGeoJson = geojsonPM25.filter(d => d.properties.pm25 >= selectedRange.x && d.properties.pm25 <= selectedRange.x1 ); }); }); return wrapper; } 47:[{"id":"ce6ecc73636ed522e3b31a239964ea1e2ec79ccc98ff190e30d5858860cc2547c860dbab6db62526b1752c198beb85af256f0a0f9bb9a29964296045b96a21bb","href":"https://static.observableusercontent.com/files/ce6ecc73636ed522e3b31a239964ea1e2ec79ccc98ff190e30d5858860cc2547c860dbab6db62526b1752c198beb85af256f0a0f9bb9a29964296045b96a21bb","name":"calenviroscreen40resultsdatadictionary_F_2021.csv","type":"text/csv","lastModified":1743462884463.117,"size":2953086}] 43:{"id":"22e8709525073817","slug":null,"title":"Assignment 4 - Multiple Views","thumbnail":"ee793e219c0144e7040613208339802d9536d6b7cf49cbf1134ffcba3a6129a8","access_level":"public","create_time":"$D2025-03-31T22:54:28.807Z","update_time":"$D2025-04-08T21:53:49.310Z","view_time":null,"first_public_time":"$D2025-04-01T06:26:20.276Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a86a8af704bf86c4","login":"simon-fraser-university6","name":"RainaAaseesProjectDataSelection","avatar_url":"https://avatars-next.observableusercontent.com/fa5aa4132807d02d13add4196d68d9102a662528362204a3ee7f497d778f5178","tier":"starter_2024","bio":"","following":false},"version":496,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b03a980a60dde5a","login":"akr22","name":"Akr22","avatar_url":"https://avatars-next.observableusercontent.com/7fb9887f54444b692b6784015042a5cbf9cef724d40112b55bc01e5899f3feba","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9b03a980a60dde5a","login":"akr22","name":"Akr22","avatar_url":"https://avatars-next.observableusercontent.com/7fb9887f54444b692b6784015042a5cbf9cef724d40112b55bc01e5899f3feba","tier":null,"role":"editor"},{"type":"team","id":"a86a8af704bf86c4","login":"simon-fraser-university6","name":"RainaAaseesProjectDataSelection","avatar_url":"https://avatars-next.observableusercontent.com/fa5aa4132807d02d13add4196d68d9102a662528362204a3ee7f497d778f5178","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 4 - Multiple Views","cells":[{"id":335,"value":"# Assignment 4 - Multiple Views\n**Aasees Raina (301564244)** \n_Partner: Hasrat Buttar (301554205)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"Vegalite = require('vega-embed@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"d3 = require (\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mapboxgl = require(\"mapbox-gl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"### Connecting Pollution API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"calenviroscreen40resultsdatadictionary_F_2021.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":351,"value":"### Filtering LA Data\n- separating the Data that is located in Los Angeles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"laData = data.filter(d => d[\"California County\"] === \"Los Angeles\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"- further separating the LA data for the features i need, Longitude, Latitude and PM2.5 Values (Particulate Matter 2.5 levels, refers to the size of the particles, which are 2.5 micrometers in diameter or less)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"laPM25Data = laData.map(d => ({\n latitude: d.Latitude,\n longitude: d.Longitude,\n pm25: d[\"PM2.5\"]\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"- The data was converted to GeoJSON format which is JavaScript's Object Notation (JSON) for encoding geographic data structures. This was done for later use when combining Pollution and Traffic visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"geojsonPM25 = laPM25Data\n .map(d => ({\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [d.longitude, d.latitude]\n },\n properties: {\n pm25: d.pm25\n }\n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"### Slider Filter\n- This code creates an interactive range slider for selecting PM2.5 values between 9 and 16. The selected value (pm25Range) updates in real-time and can be used to filter the heatmap or control other visual elements dynamically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"viewof pm25Range = Inputs.range([9, 16], {\n label: \"PM2.5 Amount\", \n step: 0.01, \n value: 16\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"### Toggle Filter\n- This code creates a button labeled \"Toggle Heatmap\" that allows users to show or hide the heatmap layer when clicked. The `heatmapToggleButton` value updates based on user interaction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"viewof heatmapToggleButton = Inputs.button(\"Toggle Heatmap\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"## Visualizations\n\n### Heatmap\n\n**- User interaction: Filtering →** Users can toggle the heatmap on/off and adjust the PM2.5 range using a slider, filtering the data displayed.\n\n**- Details on demand →** When hovering over a data point, a popup appears showing the precise PM2.5 value at that location.\n\n**- Multiple views →** The map integrates both a heatmap and a traffic layer, providing two perspectives on air pollution and traffic congestion.\n\n**- Using data from more than one source →** The visualization combines PM2.5 pollution data with Mapbox Traffic v1 data.\n\n**- Visualization idiom →** The heatmap effectively encodes pollution density using color gradients, while the circle markers allow for detailed inspection of individual data points.\n\n**Answering research questions Answered →** \n1. Where are the highest levels of air pollution in Los Angeles located?\n2. How does pollution intensity vary across different areas of the city?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"### Histogram\n- Extracting all PM2.5 values from geojsonPM25 into an array for visualization and analysis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"pm25Values = geojsonPM25.map(feature => feature.properties.pm25);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"This creates a D3 histogram generator that:\n\n- Defines a domain from 0 to 16 (PM2.5 value range).\n- Sets 16 bins, meaning PM2.5 values will be grouped into 16 equal intervals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"histogram = d3.histogram()\n .domain([0, 16]) \n .thresholds(16);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"- This code generates a histogram by applying the `d3.histogram()` function to the `pm25Values` array. It divides the data into bins based on the PM2.5 value range (from 0 to 16) and calculates the count of data points within each bin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"bins = histogram(pm25Values);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"This code creates a histogram of PM2.5 values, showing the distribution of data points across specified value ranges. This visualization allows users to explore air quality data by interacting directly with the histogram. Each bar represents a range of PM2.5 concentrations. When a bar is clicked:\n\n- **The selected bar highlights in orange.**\n- **A popup displays the range and count of data points.**\n\nResearch Question Addressed:\n- **What is the distribution of PM2.5 pollution levels across Los Angeles?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"