Picnic Focus Visualizations

Marks

Chlorophyll Map

• Displays tall tree counts across Vancouver neighborhoods.
• The geospatial layout provides geographic context, helping users quickly identify areas with high concentrations of mature vegetation.
• Color intensity (greens scheme) encodes tall tree counts, emphasizing neighborhoods with the highest densities of tall trees.
• This choice leverages the Gestalt principle of similarity, grouping neighborhoods with comparable tall tree densities through consistent color gradients.

Bar Chart

• Shows the distribution of trees by height range within the selected neighborhood.
• Bar lengths encode tree counts for each height range, enabling detailed analysis of tree height composition.
• Sorting height ranges by count supports tasks like characterizing distribution and finding extrema.

Channels

Chlorophyll Map

• Position : Geographic boundaries represent neighborhoods, offering spatial context for tall tree distributions.
• Color : Encodes tall tree counts using a gradient (greens scheme), making it easy to spot areas with high tall tree densities.
  • The use of a single color gradient aligns with the principle of data-ink ratio, maximizing the proportion of ink used to display data while minimizing distractions.
• Opacity : Highlights the selected neighborhood in full opacity while dimming others, focusing user attention on the chosen area.
  • This technique reduces visual clutter and enhances figure-ground differentiation.
• Tooltip : Provides additional details like total tree count, tall tree count, and rank, enhancing interpretability without overloading the visualization.

Bar Chart

• Position :
  • Y-axis represents height ranges, organizing data into discrete categories.
  • X-axis indicates tree count, showing magnitude.
• Length : Bar lengths encode the number of trees in each height range, simplifying comparisons.
• Color : Uses a consistent greens scheme to align with the map, reinforcing the focus on tall trees.
• Tooltip : Displays exact values for tree counts and height ranges, improving clarity.

Interaction and UI Widgets

Height Slider:

• Filters trees based on a minimum height threshold (e.g., "At Least Height: 40ft"). This ensures the visualization focuses on tall trees, aligning with the goal of identifying mature vegetation suitable for picnic environments. This supports filtering tasks by allowing users to refine their analysis dynamically.

Neighborhood Dropdown:

• Allows users to select a specific neighborhood, dynamically updating both the map and bar chart. Enables focused analysis by neighborhood, ensuring the visualization adapts to the user's chosen area. This supports retrieve value and filter tasks.

Linked Filtering:

• Synchronizes the map and bar chart. Selecting a neighborhood updates both visualizations. Creates a cohesive exploration experience, reducing cognitive load and enhancing usability. This aligns with best practices for interaction idioms, such as linked highlighting.

Conditional Highlighting:

• Highlights the selected neighborhood in full opacity while dimming others. This improves focus and reduces visual clutter, adhering to the Gestalt principle of figure-ground differentiation.

Tooltip Enhancements:

• Tooltips provide precise numerical values for tall tree counts, height ranges, and ranks. This enhances interpretability without cluttering the visualization, supporting retrieve value and compute derived value tasks.

Tasks Supported

• Retrieve Value : Tooltips allow users to extract specific details, such as tall tree counts, neighborhood names, and height range distributions.
• Filter : Users can filter data by neighborhood (via dropdown) and by tree height (via slider).
• Compute Derived Value : Aggregated metrics like total tree count and tall tree count per neighborhood are computed and displayed.
• Find Extremum : The map highlights neighborhoods with the highest tall tree densities, while the bar chart identifies dominant height ranges.
• Sort : Neighborhoods are implicitly ranked by tall tree counts (via color intensity on the map), and height ranges are sorted by tree count in the bar chart.
• Determine Range : The map's color scale visualizes the span of tall tree counts across neighborhoods.
• Characterize Distribution : The combination of the map and bar chart allows users to analyze the spread of tall trees spatially and compositionally.

Why These Choices Were Effective

• Comprehensive Analysis :
  • The map provides an overview of spatial patterns, highlighting areas with dense tall trees.
  • The bar chart complements the map by offering detailed insights into tree height composition at the neighborhood level.
  • Together, they provide a holistic view of Vancouver's tree ecosystem, addressing both spatial and compositional aspects.
• Dynamic Exploration :
  • The dropdown menu and height slider allow users to explore the data dynamically, refining their analysis based on neighborhood and tree size.
  • Linked filtering ensures consistency between the map and bar chart, maintaining a seamless exploration experience.
• Enhanced Interpretability :
  • Conditional highlighting and tooltips improve clarity, making it easier for users to interpret the data and make informed decisions about identifying neighborhoods with the highest density of large trees for comfortable picnic spots.

Marks

Chlorophyll Map

• Displays the diversity of tree genera across Vancouver neighborhoods.
• The geospatial layout provides geographic context, enabling users to quickly identify areas with high biodiversity.
• Color intensity (blues scheme) encodes unique tree genera counts, making it easy to spot neighborhoods with the highest ecological richness.

Bar Chart

• Shows the top 10 tree families by distinct genera count for the selected neighborhood.
• Bar lengths represent the number of distinct genera per family, enabling comparisons and highlighting the most biodiverse families.

Scatterplot

• Plots the tree distribution across neighborhoods, showing spatial patterns of tree family density.
• The scatterplot provides a visual representation of how trees are spread geographically, with each point representing a neighborhood's tree family distribution.

Channels

Chlorophyll Map

• Position : Geographic boundaries represent neighborhoods, offering spatial context for biodiversity distribution.
• Color : Encodes unique tree genera counts using a gradient (blues scheme), emphasizing areas with high biodiversity.
• Highlighting : Highlights the selected neighborhood in yellow, drawing attention to the area under analysis.
• Tooltip : Provides additional details like neighborhood name, unique genera count, and rank, enhancing interpretability.

Bar Chart

• Position :
  • Y-axis lists tree families, sorted in descending order of distinct genera count, emphasizing the most biodiverse families.
  • X-axis represents the number of distinct genera, showing magnitude.
• Length : Bar lengths encode the number of distinct genera, simplifying comparisons between families.
• Tooltip : Displays exact values for genera counts and family names, improving clarity.

Scatterplot

• Position:
  • The X-axis represents the longitude, and the Y-axis represents the latitude of each tree.
• Color:
  • Colors represent the tree family. The color will change dynamically to display only the hovered tree family's color when interacting with the bar chart.

Interaction and UI Widgets

Mouse-Based Neighborhood and Tree Family Selection (Bi-directional Interaction):

• Clicking on a neighborhood on the map filters the bar chart to show tree families in that area.
• Hovering over a bar in the chart highlights the distribution of that tree family on the map.
• The interaction is bidirectional because:
• Selecting a neighborhood on the map updates both the map and the bar chart, keeping them in sync.
• Hovering over a bar in the chart updates the map with the corresponding tree family's distribution in the selected neighborhood.
• This supports linked highlighting and retrieving specific values from both visualizations.

Conditional Highlighting

• Highlights the selected neighborhood in yellow while dimming others.
• Improves focus and reduces cognitive load, adhering to the Gestalt principle of figure-ground differentiation.

Linked Filtering

• Ensures the map and bar chart remain synchronized.
• Clicking on a neighborhood updates both visualizations, creating a cohesive exploration experience.

Tooltip Enhancements

• Tooltips provide precise numerical values for unique genera counts, ranks, and family-specific details.
• Enhances interpretability without cluttering the visualization, supporting retrieve value and compute derived value tasks.

Tasks Supported

• Retrieve Value : Tooltips allow users to extract specific details, such as unique genera counts, neighborhood names, and biodiversity ranks.
• Filter : Users can filter data by neighborhood (via mouse-based selection).
• Find Extremum : The map highlights neighborhoods with the highest biodiversity, while the bar chart identifies the most biodiverse tree families.
• Sort : Neighborhoods are implicitly ranked by biodiversity (via color intensity on the map), and tree families are explicitly sorted by genera count in the bar chart.
• Characterize Distribution : The combination of the map and bar chart allows users to analyze the spread of biodiversity spatially and compositionally.

Why These Choices Were Effective

Data Processing :

• Aggregating unique genera counts per neighborhood and identifying the top 10 tree families ensures the visualization is concise and focused on significant contributors to biodiversity.
• Filtering the dataset avoids overwhelming users with less relevant data while still providing meaningful insights into biodiversity patterns.

Comprehensive Analysis :

• The map provides an overview of spatial patterns, highlighting areas with high or low biodiversity.
• The bar chart complements the map by offering detailed insights into the composition of biodiversity, breaking down data by tree families.
• Together, they provide a holistic view of Vancouver's urban tree ecosystem, balancing broad overviews with granular analyses.

Dynamic Exploration :

• Mouse-based neighborhood selection and linked filtering enable seamless exploration, allowing users to transition from spatial patterns to family-level breakdowns.
• Conditional highlighting improves focus, reducing cognitive load and enhancing interpretability.

Enhanced Interpretability :

• Tooltips and conditional highlighting make the visualization accessible to a wide audience, supporting informed decision-making about neighborhoods with diverse picnic environments.

Marks

Geospatial Scatterplot

• Displays the spatial distribution of trees in the selected neighborhood, color-coded by pollen presence (Yes/No).
• Provides a geographic overview, enabling users to identify areas with high concentrations of pollen-producing or non-pollen-producing trees.
• Aligns with the Gestalt principle of proximity, grouping nearby trees visually based on their location.

Bar Chart 1

• Shows the top 10 streets by tree count in the selected neighborhood, broken down by pollen presence.
• Bar lengths encode tree counts, simplifying comparisons between streets.
• Color differentiation highlights the proportion of pollen-producing vs. non-pollen-producing trees on each street, supporting tasks like characterizing distribution.

Bar Chart 2

• Displays the total number of trees per neighbourhood, color-coded by pollen presence (orange = produces pollen, blue = does not produce pollen).
• Helps users identify which neighbourhoods have the most trees and how many produce pollen.
• Allows comparison across neighbourhoods to determine high-pollen areas.

Channels

Scatterplot

• Position :
  • X and Y coordinates represent the geographic locations of trees, offering spatial context.
  • This choice leverages the geospatial layout to help users understand where trees are located relative to one another.
• Color :
  • Encodes pollen presence using distinct colors (e.g., red for "Yes" and blue for "No"), making it easy to distinguish between pollen-producing and non-pollen-producing trees.
  • The use of contrasting colors ensures clarity and adheres to accessibility principles.
• Tooltip :
  • Provides additional details like tree location and pollen status, enhancing interpretability without cluttering the visualization.

Bar Chart

• Position :
  • Y-axis: Displays neighbourhoods (left chart) or streets (bottom-right chart), sorted by tree count.
  • X-axis : Represents tree count, showing magnitude.
• Length :
  • Bar lengths encode the number of trees, simplifying comparisons between streets.
• Color :
  • Differentiates between pollen-producing and non-pollen-producing trees within each street, highlighting compositional patterns.
  • This supports tasks like find extremum and sort.
• Tooltip :
  • Displays exact values for tree counts and pollen breakdowns, improving clarity.

Interaction and UI Widgets

Dropdown Menu (Neighborhood Selection)

• Allows users to select a specific neighborhood from a list, dynamically updating both the scatterplot and bar chart.
• Enables focused exploration by adapting the visualization to the user's chosen area.
• Supports filter tasks and enhances usability by allowing users to narrow their focus.

Pollen Radio Button (Has Pollen Selection)

• Lets users filter trees based on whether they produce pollen ("Yes" or "No").
• Allows users to focus on specific subsets of data, such as identifying high-pollen areas or planning allergy-friendly events.
• Aligns with the interaction idiom of filtering, enabling dynamic exploration.

Search Box (Street Name Selection)

• Enables users to search for trees located on a specific street.
• Helps users find tree distributions along particular roads, allowing for detailed location-based exploration.
• Supports retrieve value tasks by enabling users to extract specific details.

Linked Filtering

• Ensures both the scatterplot and bar chart update dynamically based on selections.
• Maintains consistency across visualizations, reducing confusion and maintaining focus.
• Aligns with best practices for interaction idioms, such as linked highlighting.

Tooltip Enhancements

• Tooltips provide precise numerical values and additional context, such as tree location and pollen status.
• Enhances interpretability without cluttering the visualization, supporting retrieve value and compute derived value tasks.

Tasks Supported

• Retrieve Value : Tooltips allow users to extract specific details, such as tree locations and pollen statuses.
• Filter : Users can filter data by neighborhood (via dropdown) and pollen presence (via radio buttons), enabling focused exploration.
• Find Extremum : The scatterplot highlights areas with high concentrations of pollen-producing trees, while the bar chart identifies neighbourhoods or streets with the most trees.
• Sort : Streets are explicitly sorted by tree count in the bar chart, emphasizing areas with the highest tree densities.
• Characterize Distribution : The combination of the scatterplot and bar charts allows users to analyze the spatial distribution of pollen-producing trees and compare tree densities across neighbourhoods and streets.

Why These Choices Were Effective

Comprehensive Analysis :

• The scatterplot provides a spatial overview of tree distribution, helping users identify areas with high pollen-producing tree concentrations.
• The bar chart complements the scatterplot by offering detailed insights into specific streets and neighbhourhood, breaking down data by pollen presence.
• Together, these visualizations provide a holistic view of Vancouver's urban tree ecosystem, balancing broad overviews with granular analyses.

Dynamic Exploration :

• Dropdown and radio button selections give users control over filtering data, enabling them to explore patterns of pollen presence in specific neighborhoods.
• Linked filtering ensures consistency across visualizations, reducing confusion and maintaining focus.

Enhanced Interpretability :

• Tooltips and clear color encoding improve clarity, making the visualization accessible to a wide audience.
• These features support informed decision-making about identifying high-pollen areas to avoid discomfort for allergy sufferers or plan allergy-friendly events.

Accessibility and Aesthetics :

• The use of distinct colors for pollen presence ensures accessibility for users with varying levels of color vision deficiency.
• The clean design minimizes cognitive overload, adhering to the principle of data-ink ratio.

Task Alignment :

• The visualization design directly supports user tasks such as retrieving specific values, filtering data, finding extrema, sorting, and characterizing distributions.
• Each interaction idiom (e.g., tooltips, dropdowns, radio buttons) is purposefully designed to address specific user goals.