Sunburst Visualization: CO₂ Emissions by Region and Country

Overview

This project is an interactive sunburst chart visualization built using D3.js. It provides a hierarchical view of CO₂ emissions data by regions and countries, allowing users to explore data dynamically. The chart includes interactivity such as tooltips and a dropdown to filter by region, offering a visually engaging way to analyze emissions.

Features

Interactive Sunburst Chart:

• Displays regions as hierarchical levels, with countries nested inside their respective regions.
• Uses a warm color gradient to visually represent CO₂ emissions magnitudes.

Dynamic Region Filtering:

• Includes a dropdown menu to filter and display emissions for a specific region or view all regions.

Interactive Tooltip:

• Displays the region or country name and the corresponding CO₂ emissions value when hovered.

Background Image:

• Enhances the visualization with a semi-transparent background image for a polished design.

How It Works

Hierarchical Structure:

• The dataset is converted into a hierarchical structure using regions as the parent nodes and countries as child nodes.
• CO₂ emissions are aggregated for each country and region.

Sunburst Chart:

• The chart visualizes the hierarchy, with larger segments representing higher emissions. Users can explore the chart dynamically by hovering over segments.
• Dropdown Interaction: Users can select a specific region from the dropdown menu to focus on its countries and their emissions.
• Tooltip Display: The tooltip dynamically updates to show the name and value of the segment under the mouse pointer.

Metrics Available

• CO₂ Emissions: Total emissions measured in metric tons.

How to Use

Explore the Sunburst Chart:

• Hover over any segment to view the region/country name and the emissions value in the tooltip.
• Tooltip dynamically adjusts to the mouse position.

Filter by Region:

• Use the dropdown menu to select a specific region.
• The chart updates dynamically to show only the selected region and its countries.

Code Structure

groupToHierarchy(data, selectedRegion):

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

createSunburst(selectedRegion):

• Renders the sunburst chart dynamically.
• Updates the chart based on the region selected in the dropdown.

Tooltip Logic:

• Dynamically appends a tooltip group to ensure it renders above the chart.
• Displays the name and CO₂ emissions for the segment being hovered.

Dropdown Interaction:

• Allows users to select a region, triggering a re-render of the sunburst chart.

Future Improvements

Data Scaling:

• Add support for scaling and zooming into specific sections of the sunburst chart.

Custom Color Schemes:

• Allow users to choose different color gradients.

Additional Metrics:

• Enable selection of metrics like GDP, population, or other related data.