Skip to main content
SimilarExport ZIP
100%

sunburst chart

✓ Published0🌍 Public
Nnitinramagiri1@gmail.com
Last edited Nov 1, 2024
Created on Nov 1, 2024

This sunburst chart visualizes CO₂ emissions by country from the Global Data dataset, using a hierarchical radial layout with arcs representing regions (Eastern Asia, Northern America, Southern Asia) and their constituent countries. The chart employs D3’s `partition`, `hierarchy`, and `arc` APIs alongside `scaleOrdinal` with `schemeCategory10` and `schemePastel1` for color encoding. Hover tooltips, implemented via SVG `<title>` elements, display each country’s emission value. Rendering is performed with SVG, and the code is structured as a reusable `main` function that appends the chart and legend to a container.

AI-generated description

A sunburst chart plot showing the CO2 emissions by different countries from the Global Data dataset.

  1. A prototype of a Sunburst chart using javaScript and some methods from D3 package.
  2. I am working on adding practical data to the code and use more d3 methods replacing the usual javaScript elements.
MIT Licensed

Similar vizzes

Loading thumbnail…

Sunburst Chart CO2 emissions

An interactive sunburst chart visualizes global CO₂ emissions as a hierarchical partition of regions and countries, using a warm color gradient where segment size and shade encode total metric tons. A dropdown menu filters the view to a single region, while hovering reveals a tooltip with country or region names and emissions values. Built with D3.js, the chart uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, and `d3.scaleSequential` with `interpolateWarm` for coloring. The SVG rendering includes a semi-transparent background image and dynamically re-renders chart groups on region selection.

Nnitinramagiri1@gmail.com
92% match
Loading thumbnail…

123

This sunburst chart displays global CO₂ emissions, with the top-emitting countries grouped by their respective regions. Using D3.js v6, the chart partitions a hierarchical dataset, rendering each segment as an arc whose angle and radius correspond to emission values. The visualization employs `d3.partition` and `d3.arc` for geometry, with regional colors from `d3.schemeCategory10` and country colors from `d3.schemePastel1`. Tooltips reveal exact emission figures, while an interactive legend color-codes both regions and individual countries.

Nnitinramagiri1@gmail.com
91% match
Loading thumbnail…

sunburst chart CO2 emissions

This sunburst chart visualizes global CO₂ emissions, grouped hierarchically by region and then by country. Each arc segment’s size and color (using a warm-to-cool gradient scale) represent the total emissions for that country. The chart is built with D3.js, using `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout from the grouped data. Hovering highlights a segment and temporarily displays its name and value in a text label.

Nnitinramagiri1@gmail.com
91% match
Loading thumbnail…

experiment

This interactive sunburst chart visualizes hierarchical CO₂ emissions data, organized by region and country, with arc sizes proportional to emission values. Built with D3 v6, the visualization uses the `d3.hierarchy` and `d3.partition` APIs to compute the sunburst layout, while `d3.arc` generates the path geometry. Region and country categories are distinguished by ordinal color scales (`d3.scaleOrdinal` with `d3.schemeCategory10` and `d3.schemePastel1`), and tooltips on each arc display the name and emission value. The chart renders as an SVG, with a legend generated from the same data structure.

Nnitinramagiri1@gmail.com
88% match
Loading thumbnail…

Co2 Emissions Sunburst chart - Top 3 Regions

This sunburst chart visualizes the top three regions by total CO₂ emissions, with each ring segment representing a country within those regions. The size of each arc corresponds to a country’s emissions value, while a warm-to-cool sequential color scale (using `scaleSequential` and `interpolateWarm`) reflects the total emissions range. The visualization is built with D3’s `hierarchy`, `partition`, and `arc` APIs, starting from a dataset grouped by region and filtered to the highest emitters. Hovering over a segment highlights it with a black border and displays the country name and rounded emissions value as temporary text.

Nnitinramagiri1@gmail.com
85% match
Loading thumbnail…

CO2 emissions bubble chart

This interactive bubble chart visualizes CO2 emissions by country across years from 2015 to 2023, with bubble size proportional to emissions and color distinguishing countries. Built using D3.js v7, it employs `scaleLinear` for position and size mapping, `scaleOrdinal` with `schemeCategory10` for colors, and `axisBottom`/`axisLeft` for axes. The chart includes hover tooltips and labels, rendering SVG circles with opacity to display the multivariate dataset.

Oomniaabouhassan@gmail.com
76% match
Loading thumbnail…

CO2 Bar Chart 2025

This bar chart displays CO₂ emissions by country for 2025, ranking nations from highest to lowest emissions. Each bar’s length encodes emission values in megatons, while color distinguishes geographic regions through a scaleOrdinal. The visualization uses d3.csv to load remote data, d3.scaleBand and d3.scaleLinear for positioning, and includes hover tooltips showing country, region, and precise values. Animated bar transitions grow from the baseline, and the SVG rendering includes axis labels and an interactive legend.

Vvunnamnandini13@gmail.com
76% match
Loading thumbnail…

Co2 H. Tashakori

This stacked area chart visualizes regional CO₂ emissions from 1990 to 2020 using d3.csv-loaded data from a GitHub Gist. It employs d3.stack to compute layers, d3.area to generate SVG paths, and d3.scaleOrdinal with d3.schemeSet2 for region colors. Axes are rendered with d3.axisBottom and d3.axisLeft, while a custom legend maps regions to color swatches.

Ttashakori16@gmail.com
75% match