3e:null 3f:["$","title",null,{"children":"Final Project | Simon Fraser University | Observable"}] 45:T5b0,VegaLite({ data: {values: laPM25Data}, hconcat: [ { transform: [ {filter: {field: "traffic", gte:range[0]}}, {filter: {field: "traffic", lte:range[1]}}, ], mark: {type: "point"}, selection: { brush: {type: "interval"}, pts: {type: "single", on: "mouseover"}, }, width: 350, height: 350, encoding: { x: {field: "pm25", type: "quantitative",}, y: {field: "traffic", type: "quantitative"}, tooltip: {field: "pm25", type: "quantitative"}, color: { condition: { selection: "pts", field: "pm25", type: "quantitative" }, value: "gray", }, } }, { transform: [ {filter: {field: "traffic", gte:range[0]}}, {filter: {field: "traffic", lte:range[1]}}, {filter: {selection: "brush"}} ], mark: {type: "point"}, selection: { pts: {type: "single", on: "mouseover"}, }, width: 350, height: 350, encoding: { x: {field: "ces", type: "quantitative",}, y: {field: "traffic", type: "quantitative"}, tooltip: {field: "ces", type: "quantitative"}, color: { condition: { selection: "pts", field: "pm25", type: "quantitative" }, value: "gray", }, } }, ] })46:T439,The design choices in this visualization directly support the analytical questions by allowing clear exploration of the relationships between traffic, air pollution (PM2.5), and CalEnviroScore or CES. The first scatter plot, which maps PM2.5 levels against traffic density, is specifically designed to address the question of how traffic affects PM2.5 levels. The majority of the data points cluster between PM2.5 levels of approximately 10 to 12, highlighting a concentration of observations in this range. The second scatter plot answers the second research question listed above by displaying the relationship between traffic and CES scores. The plot allows users to explore whether communities with higher environmental vulnerability scores also experience heavier traffic. Keeping traffic on the y-axis in both plots makes comparing the two visuals more intuitive. Additionally, the color gradient applied to the second plot adds a third dimension by encoding PM2.5 levels, giving viewers the ability to assess all three dimensions of traffic, air pollution, and CES at once.47:Ta20,vegalite({ "data": { "values": updatedData }, "params": [ { "name": "districtFilter", "bind": { "input": "select", "options": ["All"].concat(updatedData.map(d => d.Dist).filter((v, i, a) => a.indexOf(v) === i)), "labels": ["All"] } }, { "name": "dayFilter", "bind": { "input": "select", "options": ["All"].concat(updatedData.map(d => d.Day).filter((v, i, a) => a.indexOf(v) === i)), "labels": ["All"] } } ], "hconcat": [ { "transform": [ { "filter": "districtFilter === 'All' || datum.Dist === districtFilter" }, { "joinaggregate": [ { "op": "sum", "field": "Total", "as": "FinalTotal" } ] }, { "calculate": "datum.Total/datum.FinalTotal * 100", "as": "Percentage" } ], "width": 400, "height": 400, "mark": { "type": "arc", "innerRadius": 100, "tooltip": {"content": "data"} }, "encoding": { "theta": {"field": "Percentage", "type": "quantitative"}, "order": {"field": "Dist", "type": "nominal", "sort": "descending"}, "color": {"field": "Dist", "type": "nominal", "title": "District"} }, "view": {"stroke": null}, "padding": 30, "title": { "text": "Traffic by District", "align": "center", "fontSize": 25, "offset": 30 } }, { "transform": [ { "filter": "dayFilter === 'All' || datum.Day === dayFilter" }, { "joinaggregate": [ { "op": "sum", "field": "DayTotal", "as": "DayFinalTotal" } ] }, { "calculate": "datum.DayTotal/datum.DayFinalTotal * 100", "as": "Percentage" } ], "width": 400, "height": 400, "mark": { "type": "arc", "innerRadius": 100, "tooltip": {"content": "data"} }, "encoding": { "theta": {"field": "Percentage", "type": "quantitative"}, "order": {"field": "Day", "type": "nominal", "sort": "descending"}, "color": {"field": "Day", "type": "nominal", "title": "Day"} }, "view": {"stroke": null}, "padding": 30, "title": { "text": "Traffic by Weekday", "align": "center", "fontSize": 25, "offset": 30 } } ] }) 48:T46c,To answer the first research question above the Traffic by District chart gives a visual breakdown of total traffic volumes across various LA districts. Each district is represented by a distinct color, and the size of each segment shows its relative contribution to overall traffic, making it immediately clear which districts experience heavier traffic loads. To answer the second question, “How does traffic vary by weekday?”, the Traffic by Weekday chart serves a similar function, but organizes the data by days of the week. The color-coded slices indicate which days have the highest or lowest traffic levels. From this, viewers can quickly identify trends, such as whether weekdays see more traffic than weekends or if certain days (e.g., Friday or Monday) are especially congested. The interactive dropdown filters for both district and day adds another layer of depth. The filters allow users to isolate particular neighborhoods or weekdays, allowing them to narrow their focused. For example, users can select a particular district and examine how traffic varies throughout the week in just that area, or vice versa.49: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; };4a:T9ff,### Design Choices: **- User interaction: Filtering →** Users can toggle the heatmap on/off and adjust the PM2.5 range using a slider, filtering the data displayed. **- Details on demand →** When hovering over a data point, a popup appears showing the precise PM2.5 value at that location. **- Multiple views →** The map integrates both a heatmap and a traffic layer, providing two perspectives on air pollution and traffic congestion. **- Using data from more than one source →** The visualization combines PM2.5 pollution data with Mapbox Traffic v1 data. **- Visualization idiom →** The heatmap effectively encodes pollution density using color gradients, while the circle markers allow for detailed inspection of individual data points. ### How Design Choices Support Analytical Questions → Our visualization was designed to explore where and how air pollution varies across Los Angeles. Each design element was chosen to directly support the analytical goals of the project. **Research Question 1:** _Where are the highest levels of air pollution in Los Angeles located?_ - Heatmap Encoding (Color Intensity - Red = Worse): The heatmap uses a gradient color scale, where darker reds indicate higher concentrations of PM2.5. This allows users to instantly identify pollution hotspots across the city with just a glance. - Circle Markers with Details on Demand: By hovering over individual data points, users can see the exact PM2.5 values, providing a more detailed understanding of localized air quality. This supports precise comparisons between areas. - Multiple Views with Traffic Integration: The map integrates Mapbox Traffic v1 as a separate visual layer, helping users visually connect high-traffic zones with high-pollution regions, supporting location-specific hypotheses. **Research Question 2:** _How does pollution intensity vary across different areas of the city?_ - User Interaction – Filtering and Slider: Users can adjust the PM2.5 range using a slider to filter out lower or higher pollution values. This interaction helps focus on specific pollution thresholds and compare patterns across different city zones. - Toggle Heatmap On/Off: This allows users to switch between raw data points and generalized pollution density, making it easier to analyze macro-level trends versus micro-level details. - Use of Multiple Data Sources: Combining PM2.5 data with traffic information helps users correlate patterns, adding depth to their analysis of pollution variation and potential causes across neighborhoods. 4b: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; } 4c:T74a,### Research Question Addressed: - What is the distribution of PM2.5 pollution levels across Los Angeles? ### Design Choices: **- User interaction: Filtering →** Users can click on a bar to single out a range and view its specific value. **- Details on demand →** When hovering over a bar, a popup appears showing the precise PM2.5 range and count at that bar. ### How Design Choices Support Analytical Question → **User Interaction – Filtering by Bar Click:** Clicking on a specific bar allows users to filter the map view to only display locations where PM2.5 concentrations fall within the selected range. This makes it easy to isolate and investigate specific pollution levels, supporting a targeted exploration of the data. **Details on Demand – Hover Tooltip:** Hovering over a bar displays a tooltip with the exact PM2.5 range and the number of instances (e.g., how many locations or readings fall in that range). This supports a precise understanding of the distribution without overwhelming the visual space. **Visual Encoding – Bar Height = Frequency:** The height of each bar encodes the frequency of measurements within that PM2.5 range, giving users a clear sense of which pollution levels are most common across the dataset. **Unimplemented Section of the Design→** We aimed to link the histogram and heatmap so users could click a bar in the histogram to filter the heatmap by a specific PM2.5 range, showing which areas correspond to that pollution level. Additionally, hovering over a bar was intended to highlight matching regions on the heatmap. However, due to issues with event handling and rendering, the full synchronization between the two visualizations was not achieved. The heatmap did not update dynamically with bar selection, and the range highlighting feature was partially developed but not fully implemented.4d:T4e2,VegaLite({ data: {values: laPM25Data}, hconcat: [ { mark: {type: "point"}, selection: { brush: {type: "interval"}, pts: {type: "single", on: "mouseover"}, }, width: 350, height: 350, encoding: { x: {field: "population", type: "quantitative",}, y: {field: "traffic", type: "quantitative"}, tooltip: {field: "population", type: "quantitative"}, color: { condition: { selection: "pts", field: "population", type: "quantitative" }, value: "gray", }, } }, { transform: [ {filter: {selection: "brush"}} ], mark: {type: "point"}, selection: { pts: {type: "single", on: "mouseover"}, }, width: 350, height: 350, encoding: { x: {field: "cardio", type: "quantitative",}, y: {field: "traffic", type: "quantitative"}, tooltip: {field: "cardio", type: "quantitative"}, color: { condition: { selection: "pts", field: "population", type: "quantitative" }, value: "gray", }, } }, ] })4e:T47e,The design choices in this visualization supports the two analytical questions by using a clear side-by-side scatter plot layout that allows for direct comparisons between traffic, population, and cardiovascular health. The first scatter plot addresses the first research question. Its setup of traffic on the y-axis and population on the x-axis allows users to observe whether areas with higher populations tend to have increased traffic levels. The visual clustering of points helps reveal whether any patterns or trends exist but in this case there seems to be no correlation. The second scatter plot answers the second question by plotting cardiovascular health scores (cardio) against traffic. With traffic again on the y-axis for consistency, users can easily observe how health outcomes vary across different levels of daily traffic. This repeated use of the y-axis makes comparisons between the 2 plots intuitive. Lastly, both plots use a color scale to represent population levels. This design choice also allows users to notice whether population density has a relationship with cardiovascular health or traffic in a more visual manner.4f:[{"id":"05897513d92524d7414ddee16daa8ba1237598eafcb78ca3411103b5ac8bf8e8412d6b4c330876de491e9b8796484addbe87649d1f1f127a8dd264cff42a4f23","href":"https://static.observableusercontent.com/files/05897513d92524d7414ddee16daa8ba1237598eafcb78ca3411103b5ac8bf8e8412d6b4c330876de491e9b8796484addbe87649d1f1f127a8dd264cff42a4f23","name":"calenviroscreen40resultsdatadictionary_F_2021.csv","type":"text/csv","lastModified":1744141731266.573,"size":2953084},{"id":"2998d7c14d34eb56783866eeb4fe21b5719e41c7a37c7d22fac2ffd9546b67bc7a5cdc74e09097a4bad0391e110a326ba870bfec20c02fd4909447dde7fe8aa8","href":"https://static.observableusercontent.com/files/2998d7c14d34eb56783866eeb4fe21b5719e41c7a37c7d22fac2ffd9546b67bc7a5cdc74e09097a4bad0391e110a326ba870bfec20c02fd4909447dde7fe8aa8","name":"LADOT_Traffic_Counts_Summary.csv","type":"text/csv","lastModified":1744143042235.549,"size":432879}] 43:{"id":"2ba93eb69a1c626a","slug":null,"title":"Final Project","thumbnail":"a1171e3e07e6eb852887ff90e494479f632661f4678d443d1e40d4b4067aaaef","access_level":"public","create_time":"$D2025-04-08T16:19:10.004Z","update_time":"$D2025-04-09T05:37:05.109Z","view_time":null,"first_public_time":"$D2025-04-08T19:57:54.659Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bd3cefe984a576b6","login":"simon-fraser-university12","name":"Simon Fraser University","avatar_url":"https://avatars-next.observableusercontent.com/286b6a365971a57b67984a392a183284538cb8242a2c46aff708320e383b282a","tier":"starter_2024","bio":"","following":false},"version":450,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"000081121bfb522b","login":"hasrat-buttar","name":"Hasrat Buttar","avatar_url":"https://avatars-next.observableusercontent.com/8a3fc0d117de00fc7a559afed5cd1043d7d50dbec1bea7bc3eb91af5acfef022","tier":null,"bio":"","following":false},{"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":"000081121bfb522b","login":"hasrat-buttar","name":"Hasrat Buttar","avatar_url":"https://avatars-next.observableusercontent.com/8a3fc0d117de00fc7a559afed5cd1043d7d50dbec1bea7bc3eb91af5acfef022","tier":null,"role":"editor"},{"type":"team","id":"bd3cefe984a576b6","login":"simon-fraser-university12","name":"Simon Fraser University","avatar_url":"https://avatars-next.observableusercontent.com/286b6a365971a57b67984a392a183284538cb8242a2c46aff708320e383b282a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Project","cells":[{"id":0,"value":"# Final Project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"_Hasrat Buttar (301554205) & Aasees Raina (301564244)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"____________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"## Problem","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"This project explores the correlation between daily **traffic volume and air pollution levels in Los Angeles**, California. Gasoline-powered vehicles remain one of the leading contributors to urban air pollution, emitting large amounts of pollutants like fine particulate matter (PM2.5). In a sprawling city like Los Angeles, famous for its car culture and congested roadways, this issue is particularly pronounced.\n\nThe goal of our project is to visualize and analyze patterns that **link traffic density with corresponding pollution levels** across different regions of Los Angeles. By using real-world datasets on vehicle traffic and air quality, we aim to reveal how human mobility impacts environmental health. We hope our findings can inform ongoing conversations around urban planning, sustainable transportation, and public health.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"## Scope","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"This project is designed to help people understand how vehicular traffic contributes to air pollution in urban environments, focusing specifically on Los Angeles. By visualizing the spatial and temporal relationships between traffic congestion and pollution levels, we hope to raise awareness and encourage data-driven decisions on issues such as transportation policy, infrastructure development, and climate change mitigation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"## User Groups","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"- **General Public:** Commuters who are concerned about their contribution to air pollution on a daily basis. \n- **Environmental Researchers & Activists:** People who want to understand pollution trends to advocate for change.\n- **Policy Makers:** Officials who need specified insights to better design policies and pollution control measures. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"These stakeholders are in a position to use the insights from our visualizations to better understand the impact of vehicle emissions and potentially explore interventions, such as promoting public transportation or redesigning traffic flow. In addition, we aim to make the data accessible and engaging for environmentally conscious citizens who wish to better understand their city’s environmental footprint.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"## Research Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"To guide our visualization and design choices, we have defined several key questions that our tool aims to address:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"- **How does the volume of daily traffic correlate with PM2.5 pollution levels (Particulate Matter that is 2.5 micrometers or smaller in diameter) in different neighborhoods of Los Angeles?**\n\n- **Where are the highest levels of pollution in Los Angeles located?**\n\n- **How does pollution intensity vary across different areas of the city?**\n\n- **How does traffic affect PM2.5 levels (Particulate Matter that is 2.5 micrometers or smaller in diameter)?**\n\n- **How does traffic affect the CalEnviroScore (CES - a measure used by the California Environmental Protection Agency to assess the environmental vulnerabilities of different communities across California)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"These questions not only shape our data selection and visualization strategies, but also reflect the real-world concerns of stakeholders aiming to build more livable, sustainable cities.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"Our project combines data from these sources:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"**Air Pollution Data (PM2.5):**\n- Sourced from the State of California OEHHA via their Maps & Data - OEHHA data. This dataset provided an array of data regarding traffic in the United States. This dataset provided us with daily average concentrations of PM2.5 (fine particulate matter) measured across various monitoring stations in Los Angeles County, which was crucial for our visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"**Traffic Data:**\n- We used traffic volume data from the MapBox Library . The 'Mapbox Traffic v1 | Tilesets | Mapbox Docs | Mapbox', is a Mapbox-provided vector tileset that can be used to display real-time traffic conditions on a map. This was used on our Heatmap visualization to portray traffic conditions in realtime. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"**Traffic Data 2:**\n\n- Data.gov: The U.S. government's open data portal, providing public access to datasets from various federal agencies across multiple domains, including science, health, and the environment. We sourced traffic data and temporal data in Los Angeles from this website. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"_____________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"# Visualization 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"### Importing and connecting Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"data = FileAttachment(\"calenviroscreen40resultsdatadictionary_F_2021.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"### Filtering data so that it only has records located in Los Angeles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"laData = data.filter(d => d[\"California County\"] === \"Los Angeles\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### Mapping only necessary dimensions into a new data array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"laPM25Data = laData.map (d => ({\n latitude: d.Latitude,\n longitude: d.Longitude,\n traffic: d.Traffic,\n trafficPerc: d[\"Traffic Pctl\"],\n approxLoc: d[\"Approximate Location\"],\n ces: d[\"CES 4.0 Percentile\"],\n CES: d[\"CES 4.0 Percentile Range\"],\n pm25: d[\"PM2.5\"],\n cardio: d[\"Cardiovascular Disease Pctl\"],\n population: d[\"Total Population\"]\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"### Importing d3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"### Importing VegaLite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"VegaLite = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### Importing libraries necessary for dynamic slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {slider, menu, checkbox} from \"@jheer/dom-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"### Dynamic slider that filters by traffic per square kilometer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"viewof range = rangeSlider({\n min: d3.min(laPM25Data, d => d.traffic),\n max: d3.max(laPM25Data, d => d.traffic),\n value: this ? this.value:[0,7000],\n title: \"Traffic\",\n description: 'filtering by traffic'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"## Visualization 1 Report Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"### Research Questions Explored - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"1) How does traffic affect pm2.5 levels (particles that are a major component of air pollution)?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"2) How does traffic affect the CalEnviroScore (CES - measure used by the California Environmental Protection Agency to assess the environmental vulnerabilities of different communities across California)?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"### User Interactions - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"- Users can filter data by adjusting the range of traffic displayed using the dynamic slider\n \n- Users can select points via brushing in View 1. The points that are selected will display in View 2 correspondingly. Both of these views are linked\n \n- For View 1, when a point is selected, it's pm2.5 is displayed in the tooltip.\nFor View 2, when a point is selected, it's CES score is displayed in the tooltip\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"### Design Choices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"The visualization idiom I chose for this visualizations was a scatter plot with color encoding. A scatter plot is an effective tool for visualizing relationships between continuous variables, making it ideal for examining the connection between traffic, air pollution levels (PM2.5), and CES (CalEnviroScore). This is beneficial because it allows us and users to identify patterns, trends, or outliers in the data. \n\nBy incorporating the interactive traffic filter, the visualization also becomes more dynamic by enabling users to focus on specific traffic levels in case they want further insight. \n\nThe color scale adds another dimension of insight as it gives more of a visual as to how the pm2.5 levels vary. This is especially useful in the second view as it gives the user the ability to link all 3 dimensions at the same time.\n\nLastly, the brush and link between the two views is helpful as it allows users to explore whether there is a relation between pm2.5 and CES levels by narrowing down specific records.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":363,"value":"### How do Design Choices Support Analytical Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"______________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"# Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"### Importing and connecting data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"file = FileAttachment(\"LADOT_Traffic_Counts_Summary.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"### Extracting data within file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"trafficFile = file.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"### Data is being formatted accordingly into an array using csvParse","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"trafficData = d3.csvParse(trafficFile, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"### Importing vegaLite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"vegalite = require(\"@observablehq/vega-lite\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"### Sum of each districts' total traffic is calculated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"sumCR = trafficData.reduce(function(sum,d){\n let total = ( d.Dist === \"CR\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"sumEV = trafficData.reduce(function(sum,d){\n let total = ( d.Dist === \"EV\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"sumHW = trafficData.reduce(function(sum,d){\n let total = ( d.Dist === \"HW\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"sumSR = trafficData.reduce(function(sum,d){\n let total = ( d.Dist === \"SR\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"sumWR = trafficData.reduce(function(sum,d){\n let total = ( d.Dist === \"WR\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"sumWV = trafficData.reduce(function(sum,d){\n let total = ( d.Dist === \"WV\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"### Sum of each weekdays' total traffic is calculated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"sumMon = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"MON\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"sumTue = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"TUE\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"sumWed = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"WED\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"sumThu = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"THU\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"sumFri = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"FRI\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"sumSat = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"SAT\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"sumSun = trafficData.reduce(function(sum,d){\n let total = ( d.Day === \"SUN\") ? d.Total: 0;\n return sum+ total;\n},0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"### newData array is made empty","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"newData = trafficData.map(function(d,i){\n if (d.Dist === \"CR\") return 0;\n if (d.Dist === \"EV\") return 0;\n if (d.Dist === \"HW\") return 0;\n if (d.Dist === \"SR\") return 0;\n if (d.Dist === \"WR\") return 0;\n if (d.Dist === \"WV\") return 0;\n}).filter(d => d != 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"### All of the sums of the Districts and Weekdays are added to the updatedData array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"updatedData = newData.concat({Dist: \"CR\", Total: sumCR},{Dist: \"EV\", Total: sumEV},{Dist: \"HW\", Total: sumHW}, {Dist: \"SR\", Total: sumSR}, {Dist: \"WR\", Total: sumWR}, {Dist: \"WV\", Total: sumWV}, {Day: \"Monday\", DayTotal: sumMon}, {Day: \"Tuesday\", DayTotal: sumTue}, {Day: \"Wednesday\", DayTotal: sumWed}, {Day: \"Thursday\", DayTotal: sumThu}, {Day: \"Friday\", DayTotal: sumFri}, {Day: \"Saturday\", DayTotal: sumSat}, {Day: \"Sunday\", DayTotal: sumSun})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"## **Important Message -** \nTo ensure the visualization appears, initially have the districtFilter and dayFilter on \"All\" and then filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"## Visualization 2 Report Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"### Research Questions Explored - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"1) How does traffic vary by neighbourhood in Los Angeles?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"2) How does traffic vary by weekday in Los Angeles?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"### User Interactions -","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"- Users can choose to focus on a specific day or district using the dropdown filtering option or view all days and districts at once.\n\n- When hovered upon a section, the traffic data of the corresponding district/weekday is shown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"### Design Choices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"The visualization idiom I chose is a donut chart. This idiom is effective for illustrating the proportions of traffic volume across different districts and different weekdays in Los Angeles. A donut chart allows users to quickly compare the sizes of the slices and determine which districts and days experience the highest levels of traffic making it effective.\n\nThe incorporation of color encoding also makes it easier for us to distinguish between districts, and the legend makes sure we can accurately comprehend it.\n\nThe dropdown filters also gives users more freedom to really narrow down their exploration to specific days and districts. For example, users can select a particular district and examine how traffic varies throughout the week in just that area, or vice versa.\n\nLastly, a tooltip is also present, allowing us and users to hover upon a slice and get exact data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"### How do Design Choices Support Analytical Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"### Unimplemented Aspects of Design","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"One thing I was unable to implement was the ability to choose multiple items from the dropdown. By having the option to choose multiple days or districts, users would be able to explore even more intricate aspects of traffic distribution. For instance, how is traffic on only Weekdays vs Weekends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"__________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"# Visualization 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"### Importing Mapbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"mapboxgl = require(\"mapbox-gl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"### Converting LaPM25Data to GeoJSON format","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":165,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"### Slider Filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"viewof pm25Range = Inputs.range([9, 16], {\n label: \"PM2.5 Amount\", \n step: 0.01, \n value: 16\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"### Toggle Filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"viewof heatmapToggleButton = Inputs.button(\"Toggle Heatmap\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"__________________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"_______________________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"# Visualization 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"### Extracting all PM2.5 values from geojsonPM25 into an array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"pm25Values = geojsonPM25.map(feature => feature.properties.pm25);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"### D3 histogram generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"histogram = d3.histogram()\n .domain([0, 16]) \n .thresholds(16);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"### Declaring bins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"bins = histogram(pm25Values);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"______________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"# Visualization 5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"#### This visualization was created to explore whether traffic had a correlation to population in that neighbourhood and whether it had an impact on the cardiovascular health of that community.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"### Research Question Explored - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"1) Is there a correlation between traffic in the community and population in the same area?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"2) Does traffic levels have an impact on the cardiovascular health on the population of the community?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"### User Interactions - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"- Users can select points via brushing in View 1. The points that are selected will display in View 2 correspondingly. Both of these views are linked\n \n- For View 1, when a point is selected, it's population total is displayed in the tooltip.\nFor View 2, when a point is selected, it's cardiovascular score is displayed in the tooltip.The higher the cardiovascular score, the better the cardiovascular health of that community and vice versa.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"### Design Choices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":438,"value":"The visualization idiom I chose for this visualizations was a scatter plot with color encoding. A scatter plot is an effective tool for visualizing relationships between continuous variables, making it ideal for examining the connection between traffic, population, and cardiovascular score of communities. This is beneficial because it allows us and users to identify patterns, trends, or outliers in the data. \n\nThe color scale adds another dimension of insight as it gives more of a visual as to how the population levels vary. This is especially useful in the second view as it gives the user the ability to link all 3 dimensions at the same time.\n\nLastly, the brush and link between the two views is helpful as it allows users to explore whether there is a relation between population, traffic and cardiovascular scores by narrowing down specific records.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"### How do Design Choices Support Analytical Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:"$43:body"