Demo Video
Visualization explanation
Overview
In our COSI116 Final Project, we present a comprehensive visualization suite to convey insights into safe drinking water accessibility. This suite consists of a choropleth map, a bar chart, and a line chart. Each visualization serves a unique purpose, contributing to a holistic understanding of the data.
Design Justifications
Choropleth Map
Purpose: Geographical representation of safe drinking water accessibility.
Design Choices:
- Color Scale: Blue shades represent varying percentages of safe water accessibility.
- Legend: Provides a clear reference for interpreting the color scale.
Bar Chart
Purpose: Comparative view of safe water proportions across regions.
Design Choices:
- Bar Colors: Distinct colors enhance visual identification.
- Interaction: Hovering over a bar highlights the corresponding region on the map.
Line Chart
Purpose: Focuses on the temporal aspect of safe water accessibility, showing trends over the years.
Design Choices:
- Line Dimensions: Different lines represent various locations.
- Interaction: Hovering over a line provides detailed information for a specific location and year.
UI Walk-through
Choropleth Map
- Color Legend: Interpret the map by referring to the color legend for safe water percentages.
- Hover Interaction: Hover over a region to see detailed information about safe water accessibility.
Bar Chart
- Regional Comparison: Easily compare safe water proportions across regions using distinct colors.
- Map Interaction: Hover over a bar to highlight the corresponding region on the choropleth map.
Line Chart
- Temporal Trends: Explore temporal trends in safe water accessibility.
- Location Comparison: Hover over lines to view detailed information for specific locations and years.
Data Analysis
Data Sources
The data for our COSI116 Final Project is sourced from reputable organizations to ensure accuracy and relevance to the problem statement.
- World Geo JSON Data: Provided by Johan Merge, it forms the basis for our choropleth map visualization.
- UN Stats Clean Water Accessibility: Offers comprehensive data on safe drinking water percentages across regions and years.
Data Types
The dataset includes the following key data types:
- Numeric Data: Safe water percentages are represented as numerical values, forming the basis for visualizations.
- Categorical Data: Regions and locations are represented as categorical data, facilitating geographical analysis.
- Temporal Data: Time-related information allows for the exploration of trends over the years.
Data Preprocessing
To ensure the dataset's suitability for visualization, we performed the following preprocessing steps:
- Data Cleaning: Removal of any irrelevant or incomplete entries to maintain data integrity.
- Data Integration: Combining data from different sources to create a unified dataset for visualization.
- Data Aggregation: Aggregating data at various levels (regional, temporal) for meaningful visualizations.
The processed data is then used in our choropleth map, bar chart, and line chart visualizations to effectively communicate insights into safe drinking water accessibility.
Task Analysis
Domain Tasks
The tasks in our domain involve the exploration and analysis of safe drinking water accessibility data. Key domain tasks include:
- Explore Safe Water Percentages: Users should be able to explore safe water percentages across different regions and years.
- Compare Regions: Enable users to compare safe water accessibility between various regions globally.
- Temporal Analysis: Users should conduct temporal analysis to understand how safe water percentages have changed over time.
- Insightful Hover: Users can gain insights by hovering over map regions, linking to related bar charts and line graphs.
Processes and Goals
The processes and goals of our visualization project are aligned with providing a comprehensive understanding of safe drinking water accessibility. These include:
- Data Processing: Aggregating and processing data to derive meaningful insights.
- Visualization: Creating interactive maps, bar charts, and line graphs to represent the data visually.
- User Interaction: Facilitating user interaction for dynamic exploration and analysis.
- Insight Generation: Aiding users in generating insights through visual exploration.
Abstract Tasks
Abstract tasks are designed to achieve specific objectives within the visualization project. These include:
- Hover Interaction: Implementing interactive hover features for map regions and related visualizations.
- Dynamic Updates: Ensuring dynamic updates in the bar chart and line graph based on user interactions.
- Comparative Analysis: Enabling users to compare safe water percentages visually.
- Temporal Exploration: Allowing users to explore temporal patterns in safe water accessibility.
Design Process
Our visualization journey involved iterative improvements guided by principles of information visualization. We carefully considered visual encodings, marks, and channels to enhance user understanding of safe drinking water accessibility data.
Initial Sketches
Our initial sketches focused on exploring different visual encodings to represent safe water percentages across regions and years. We experimented with various mark types and channels to find the most effective way to communicate the data.
Visual Encodings
Through iterative design, we opted for a choropleth map as the primary visual encoding. The use of color gradients on map regions serves as an effective channel to represent variations in safe water percentages. We carefully selected color schemes to ensure intuitive interpretation, with blue hues representing higher percentages.
Marks and Channels
Marks in our visualization include map polygons, bars in the bar chart, and lines in the temporal line graph. Each mark is strategically chosen to convey specific data attributes. For instance, the length of bars in the bar chart serves as a channel to represent the proportion of safe water, while the position of the line on the y-axis in the line graph depicts the percentage over time.
Iterative Improvements
Feedback from usability testing played a crucial role in our iterative design process. Users' interactions guided adjustments in color choices, mark sizes, and overall layout. The goal was to create a visually appealing and intuitive visualization that effectively communicates the story within the data.
Interactive Features
To enhance user engagement, we introduced interactive features such as hover effects. Hovering over map regions dynamically updates related bar chart and line graph elements, facilitating comparative analysis. These interactive channels provide users with a more immersive and exploratory experience.
Conclusion
Our project aimed to provide a comprehensive visualization of safe drinking water accessibility data, allowing users to explore patterns and trends across regions and years. Through the implementation of interactive visualizations, we sought to create an engaging and informative user experience.
Completed Work
The project successfully implemented a choropleth map, bar chart, and line graph to represent safe water percentages. Interactive features, such as brushing and dynamic updates, enhance user interaction and exploration. The integration of visual encodings, marks, and channels aligns with principles of information visualization, resulting in a visually appealing and effective representation of the data.
Areas for Improvement
While the project has achieved its primary objectives, there are areas for improvement. User feedback highlighted potential enhancements in color choices, tooltips, and additional contextual information. Improving the responsiveness and performance of the visualizations, especially with larger datasets, is another consideration for future iterations.
Future Work
Future work could focus on expanding the dataset to include more granular information, mainly seeing the names of areas on the map but then also things such as water source types or regional policies impacting water accessibility. Further refinement of the user interface and additional visual analytics features could contribute to a more robust and user-friendly tool. Collaboration with domain experts and stakeholders would also ensure the visualization aligns with real-world implications and policy discussions.
Acknowledgments
Insipiration Taken From:
- D3: Data-Driven Documents by Mike Bostock.
- World Geo JSON Data by Johan Merge.
- Animated U.S. Border Map by Beert Spaan.
- Clean Water Accessibility by UN Stats.
- Creating Line Chart by Mike Bostock.
- Creating Bar Chart by Per Harald Borgen.
- D3 Brushing by Philippe Rivière.
- Interactive HTML Table by Jonah Williams.
- Arrow Function Expressions by Mdn Web Docs.
- SVG by Mdn Web Docs.