Substainability Focus Visualizations

Mark

Heatmap: Used to compare tree diameters across different height ranges and species. The color intensity effectively illustrates variations in diameter at various heights, making patterns and outliers easily identifiable.

Bar Chart: Used to show the average tree diameter for the top 20 species. The height of each bar allows for straightforward comparisons of tree species regarding diameter, making it easy to rank them.

Channels

Heatmap

• Position: X-axis represents different tree species and Y-axis denotes height ranges.
• Color: A sequential color scale using the scheme red, yellow, and blue is employed. Colors represent varying values of average diameter: red indicates smaller diameters, yellow signifies intermediate sizes, and blue represents larger diameters.
• Opacity: Based on the selections made (species that are selected or hovered over), if the average diameter exceeds the threshold set via the slider, the opacity of the corresponding rectangles is set to 1 (highlighted). Non-selected boxes are dimmed to an opacity of 0.3.
• Tooltip: Each tooltip provides additional information, including the total tree count, species, height range, and average diameter, enhancing the interpretability of the heatmap.

Bar Chart

• Position: X-axis represents tree species and Y-axis indicates their average diameter, promoting an intuitive understanding of size differences.
• Length: The height of the bars represents the average diameter for each tree species, arranged in ascending order. This sorting simplifies the identification of species with the largest and smallest diameters.
• Opacity: When a species is selected, its bar is fully visible (opacity set to 1). For all other species, the bar's opacity is dimmed to 0.3.
• Tooltip: The tooltip provides details such as tree species and average diameter, enhancing the interpretability of the data.

Interaction and UI Widgets

• Diameter Slider: This slider allows users to filter heatmap cells by setting a minimum average diameter (avg_diameter) for the tree species they wish to explore.
• Reset Button: This button resets the diameter filter to its default state (minimum diameter set to 0). When activated, it restores visibility for all species in the visualizations.
• Bidirectional Linking: Users can click on a specific species in either the heatmap or bar chart to select it. Once selected, the species is highlighted in both plots, allowing users to focus on a specific tree species and observe its distribution across both visualizations simultaneously.
• Conditional Highlighting: The selected tree species is highlighted in full opacity, while other species are dimmed. This feature enhances focus and reduces visual clutter.
• Tooltip Enhancements: Tooltips provide precise numerical values for tree counts, height ranges, and average diameter, improving interpretability while maintaining a clean visualization.

Tasks Supported by the Visualization

• Retrieve Value: Tooltips allow users to extract specific details about the tree species, including their average diameter, tree count, height range, and species name.
• Characterize Distribution: Analyze the distribution of tree diameters across different species and height ranges to understand how these factors compare among the various species.
• Filter: Users can filter the data based on criteria such as minimum average diameter (using a slider) and specific species selections (via click).
• Compute Derived Value: Aggregated metrics, such as average diameter and tree count per species and height range, are computed and displayed, providing insights into the characteristics of tree populations.
• Find Extremum: Identify species with the largest and smallest average diameters, and examine which height ranges correspond to these extreme values.
• Determine Range: Identify the range of tree diameters within each species and height category.
• Find Anomalies: Detect any species that exhibit unexpectedly high or low diameters at specific heights.
• Sort: Rank tree species by average diameter in ascending order.

Why These Choices Were Effective

• Data Processing:
  • Aggregating the data by species and height combination helps summarize the relationship between species, their height ranges, and average diameters. This method allows for easy comparison across different species, helping users understand how height and diameter vary for each type.
  • The filter that shows only the top 20 families ensures that the visualization emphasizes the most significant species in terms of their presence in Vancouver’s public spaces. This approach prevents users from being overwhelmed by less-representative species and instead highlights those that the public interacts with most frequently.
• Comprehensive Analysis:
  • The heatmap provides a spatial overview of how height ranges and average diameters are distributed across tree species. This enables users to visually identify trends, such as which species tend to be taller or have larger diameters.
  • The bar chart complements the heatmap by offering a detailed view of the average diameter per species, sorted by species name. This visualization clarifies how diameters differ among species, offering insight into which species are larger or smaller and allowing users to dive deeper into individual species for more details.
• Dynamic Exploration:
  • Species Selection: Users can explore specific species in more detail through click interactions. This feature allows them to see how the diameter and height of a selected species compare to others.
  • The Average Diameter Slider enhances users' ability to focus on specific subsets of the data, particularly regarding tree diameters.
  • Conditional Highlighting: This feature improves focus on selected species or height ranges, reducing cognitive load and making it easier to visually assess how specific trees or species compare in terms of size characteristics.
• Enhanced Interpretability:
  • Tooltips provide users with direct access to key information such as species name, height range, average diameter, and tree count. This clarity ensures that users understand the data points they are interacting with.
  • The opacity changes on hover or selection help guide the user’s attention to the most relevant data, improving the clarity of comparisons between species.

Mark

Scatter Plots: Used to represent tree diameters at different latitudes for various height categories. Each point represents an aggregated average, making spatial trends clear.

Histogram: Used to display the diameter of trees within each selected height category and latitude bin. This allows for easy comparison of species distribution across different tree sizes.

Channels

Scatter Plot

• Position: X-axis represents different height categories (small, medium, large). Y-axis encodes the binned latitude as a quantitative value along the y-axis. Latitude is binned into small intervals (step = 0.01) to smooth the distribution.
• Size: The size of the circles represents the number of trees in a given height and latitude bin, with a specific scale for tree count.
• Color: The color of the circles is determined by whether the point is selected (via dot selection). Selected dots are colored red, while unselected dots are green, highlighting the interactive selection.
• Tooltip: Provides additional information on hover, including latitude, height category, average diameter, and tree count.

Histogram

• Position: X-axis represents the binned tree diameter values (maximum of 50 bins). Y-axis represents the tree count in each diameter bin.
• Tooltip: Provides additional information on hover, including the height category, tree count, and binned latitude.

Interaction and UI Widgets

• Tree Count Slider: The tree count slider dynamically filters the scatter plot, highlighting only trees with a count greater than or equal to the selected threshold value.
• Diameter Slider: The diameter slider filters the histogram to display only those trees with a diameter greater than or equal to the selected value.
• Dot Selection: The dot selection enables the user to select a specific group of trees by clicking on a scatter plot point. The selected trees' height and latitude values are then used to filter the distribution of diameter.
• Linked Filtering:
  • As the threshold slider value changes, the scatter plot updates in real-time to reflect the data points that meet the tree count criteria. This allows users to focus on areas with higher tree counts.
  • As the diameter slider value changes, the histogram updates in real-time to reflect the data points that meet the minimum diameter criteria.
  • Once a point is selected in the scatter plot, the histogram updates to display only data that corresponds to the selected height category and latitude bin.
• Conditional Highlighting: When a point is selected, its color changes from green (default) to purple, visually indicating the selection. The histogram then updates to display the diameters of trees corresponding to the selected height and latitude bins.
• Tooltip Enhancements: Tooltips provide precise numerical values for tree counts, average diameter, and latitude bin improving interpretability while maintaining a clean visualization.

Tasks Supported by the Visualization

• Characterize Distribution: Users can explore how tree diameter distribution varies across different height and latitude categories using the histogram. The scatter plot illustrates the distribution of tree counts for each height and latitude bin.
• Retrieve Value: Tooltips enable users to extract specific details about tree species, including average diameter, tree count, and height range across different latitudes.
• Filter:
  • Adjusting the diameter slider filters the bar chart to display only trees with diameters greater than or equal to the selected value, allowing users to focus on specific tree sizes.
  • By selecting a specific point on the scatter plot, users can filter the bar chart to show only the tree diameter distribution for the chosen height and latitude group.
• Find Extremum: Users can interact with the scatter plot to visually identify the latitude bins and heights that correspond to the largest and smallest tree counts.
• Determine Range: Identify the range of tree diameters within each tree species and height category. The histogram displays the range of diameters using bars for the diameter bins. The diameter slider allows users to further filter this range, showing only the trees that fall within the selected diameter thresholds.
• Correlate: Users can identify patterns or trends in tree data distribution, such as whether trees in certain height categories are concentrated in specific latitudes or whether diameter distributions differ significantly across groups.

Why These Choices Were Effective

• Comprehensive Analysis:
  • The scatter plot, when used in combination with the latitude binning, directly answers the question of how the spatial distribution (latitude) influences the physical traits (height and diameter) of tree species. Users can quickly observe trends such as which species tend to be taller or have larger diameters at specific latitudes.
  • The bar chart complements this analysis by providing a more focused view of the diameter distribution for specific height categories and species. Users can compare the average diameters and see how species vary in size across different latitudes.
• Dynamic Exploration:
  • Tree Count Slider: The slider allows users to set a threshold for the minimum tree count. As users adjust the slider, the chart updates in real-time to show only the points where the tree count meets or exceeds the specified threshold.
  • Diameter Slider: The Diameter Slider provides a way to filter data based on the diameter of the trees. It lets users focus on a specific range of tree sizes.
  • Dot Selection: Dot Selection allows users to click on specific dots in the scatter plot, which represent trees in a particular height and latitude range. It provides a mechanism for selecting and filtering data interactively.
  • Conditional Highlighting: Conditional Highlighting helps users visually distinguish between selected and unselected data points based on their interactions. This increases the visibility of the elements the user is focusing on and improves the overall clarity of the visualization.
• Enhanced Interpretability:
  • Tooltips provide users with direct access to key information such as tree count, height range and average diameter. This clarity ensures that users understand the data points they are interacting with.

Mark

Stacked Bar Chart: Used to compare tree height categories (small, medium, large) across different street sides. The stacked format allows for a direct proportional comparison across categories.

Histogram: Used to represent the frequency distribution of tree diameters for the selected street side and height category. The binning approach in the histogram effectively shows the distribution of tree sizes.

Channels

Stacked Bar Chart

• Position: X-axis represents different street sides. Y-axis represents relative proportions of different height ranges (small, medium, large).
• Color: The color of the bar is represented by different height ranges.
• Opacity: Encodes the opacity of each bar, which changes based on the selection of height size (height_selection) and street side (street_selection). Selected values are fully visible (opacity = 1), and others are dimmed (opacity = 0.3).
• Tooltip: Provides additional information on hover, including height category, diameter, street side, and tree count.

Bar Chart

• Position: X-axis represents the diameter of trees. This axis is divided into bins with a maximum of 30 bins. Y-axis represents the tree count in each diameter bin.
• Tooltip: Provides additional information on hover, including height category, diameter, street side, and tree count.

Interaction and UI Widgets

• Height Selection Radio Button: This widget allows the user to select a height range for the trees. The options "Small," "Medium," and "Large" correspond to the HEIGHT_SIZE variable, while the "Show All" option displays all tree heights, regardless of the size.
• Street Selection Radio Button: This widget allows the user to select a street side (or choose "Show All" to include all streets). The street sides are dynamically populated based on the dataset, and users can pick a specific street side for analysis.
• Linked Filtering:
  • The height selection filters both visualizations to display only data corresponding to the selected height category (or all height catogries if "Show All" is selected).
  • The street selection filters both visualizations to display only data corresponding to the selected street side (or all street sides if "Show All" is selected).
• Conditional Highlighting:
  • The height selection controls the opacity of the bars in the height_bar chart. Trees of the selected height range are fully visible, while trees outside the selection are dimmed.
  • The street selection filters both visualizations to display only data corresponding to the selected street side (or all street sides if "Show All" is selected).
• Tooltip Enhancements: Tooltips provide precise numerical values for tree counts, average diameter, and height range, improving interpretability while maintaining a clean visualization.

Tasks Supported by the Visualization

• Characterize Distribution: The height distribution allows users to see which sides of the street have a greater number of trees within specific height ranges.
• Filter: Filtering by tree diameter ensures that the visualization only displays relevant data, specifically trees with diameters under 60 cm. Users can also filter by street side for more precise information.
• Retrieve Value: Tooltips enable users to extract detailed information about the average diameter, tree count, and height range for different sides of the street.
• Compute Derived Value: Calculate the total number of trees for each street side and height category.
• Find Extremum: The stacked bars allow users to easily compare the relative proportions of different height categories on each side of the street.
• Determine Range: The histogram bins for each street side display the range of tree diameters within each selected height category. Users can visually assess the distribution of tree diameters for each side of the street by selecting different height categories using radio buttons.
• Find Anomalies: Identify any unusual diameter distribution patterns that may exist for specific combinations of street sides and height ranges.

Why These Choices Were Effective

• Comprehensive Analysis:
  • The stacked bar chart represents the count of trees in each height category (Small, Medium, Large) across various street sides (urban settings). This allows users to compare how different height categories are distributed across the urban settings.
  • The bar chart (histogram) visually shows the distribution of tree diameters across different settings. By binning the diameter data, users can observe the prevalence of certain tree sizes across urban locations.
• Dynamic Exploration:
  • Height Selection Radio Button: Users can filter by height categories (Small, Medium, Large) or choose "Show All" to view all trees regardless of height. This enables focused exploration of how different height ranges are distributed across various street sides.
  • Street Side Selection: Users can filter by specific urban settings (e.g., streets, parks, greenways), which allows them to explore how trees of different heights and diameters are placed in these settings.
  • Conditional Highlighting: Conditional Highlighting helps users visually distinguish between selected and unselected combinations based on their interactions. This increases the visibility of the elements the user is focusing on and improves the overall clarity of the visualization.
• Enhanced Interpretability:
  • Tooltips provide users with direct access to key information such as tree count, height range, street side, and average diameter. This clarity ensures that users understand the data points they are interacting with.