Treemap Visualization

Overview

This project is an interactive treemap visualization built using D3.js. It dynamically displays various metrics for countries grouped by regions, allowing users to explore data such as CO₂ emissions, population, GDP, and more. The visualization enables insights into hierarchical data with user-friendly interactivity.

Features

• Dynamic Metric Selection: A dropdown menu allows users to switch between metrics like CO₂ emissions, population, GDP, and others.
• Interactive Tooltip: Displays region, country, and the value of the selected metric with appropriate units on hover.
• Responsive Design: Adjusts to the size of the container for seamless integration into different layouts.
• Color-Coded Regions: Treemap uses a warm color gradient to represent the magnitude of values visually.
• Hierarchical View: Groups countries by their respective regions for better contextual understanding.

Metrics Available

The visualization supports the following metrics:

1. CO₂ Emissions (Metric tons)
2. Population (People) GDP (USD)
3. GDP Growth (%)
4. Unemployment (%)
5. Life Expectancy-Female (Years)
6. Life Expectancy-Male (Years)
7. Homicide Rate (Per 100,000 people)
8. Forested Area (%)
9. Urban Population (%)
10. Internet Users (%)
11. Refugees (People)

How to Use

Interact with the Treemap:

• Hover over any country rectangle to view detailed information in the tooltip.
• Tooltip displays the region, country, and metric value with appropriate units.

Switch Metrics:

• Use the dropdown menu at the bottom to change the metric displayed in the treemap.

Responsive Behavior:

• The visualization adapts to the size of its container for optimal display.

Code Structure

groupToHierarchy(data, metric):

• Converts the flat dataset into a hierarchical structure based on regions and countries.
• Aggregates the selected metric for each country and region.

createTreemap(metricKey):

• Renders the treemap using the selected metric.
• Dynamically updates rectangles and color scales based on the metric value.

Tooltip Logic:

• Dynamically appends a tooltip group to ensure it renders above the treemap.
• Updates tooltip content with region, country, and metric-specific values.

Dropdown Interaction:

• Allows users to switch between metrics, triggering a re-render of the treemap.

Future Improvements

• Data Filtering: Add the ability to filter data by specific regions or countries.
• Custom Color Schemes: Allow users to switch between color scales.
• Advanced Interactivity: Add zooming and panning functionality for larger datasets.