Fork of ICE #7 - Pie Chart

100%

Fork of ICE #7 - Pie Chart

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

This visualization displays the inflation rates of the ten G20 countries with the highest values as of February 2023, using a pie chart with a color-coded legend. The chart is rendered as an SVG using D3 v5, with slices generated via `d3.arc` and colored using `scaleOrdinal` with the `schemeCategory10` palette. The legend lists each country and its corresponding rate, formatted as a percentage. Data is loaded asynchronously from a CSV file hosted on a GitHub Gist, sorted in descending order, and then visualized.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

ICE #7 - Pie Chart

This pie chart visualizes February 2023 inflation rates for the top ten G20 countries, ordered from highest to lowest. Each slice's color corresponds to a category, and a legend lists country names alongside their percentages. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to generate the SVG segments and legends. Data is loaded from a CSV hosted on a Gist, with values formatted with a custom percentage function. The chart is built with React and rendered as an SVG, with interactive mouseover logging of data values.

KKevin Raj

93% match

Loading thumbnail…

Fork of ICE-7_Pie

This visualization displays the basic cost of Amazon across countries, presenting the top 10 countries by inflation rate as a pie chart with an accompanying legend. The chart uses D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate colored slices, while `csv` loads the data from a GitHub gist. The legend lists each country with its inflation rate in dollars, rendered as SVG elements. Interactive mouseover events log the inflation rate values to the console, and the chart is built within a React framework using D3’s selection and data join methods.

Cchandanagandla

88% match

Loading thumbnail…

Fork of ICE 7 Pie chart

This visualization shows the top 10 countries by population in 2022 as a pie chart, with each slice labeled with its population value and a corresponding color-coded legend listing country names and values. Using D3 v5, the code fetches CSV data via `d3.csv`, converts it with `d3.pie`, and renders SVG paths with `d3.arc` and `scaleOrdinal` for slice colors. Text labels and legend items are appended dynamically, while the chart is centered within an SVG canvas.

SsreepavanKothapalli

83% match

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart displays the top 10 car-producing countries by their 2019 total values, using a color-coded legend with country names and abbreviated figures. The visualization loads CSV data from a GitHub gist via `d3.csv`, then calculates totals and renders an SVG pie using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Legends are manually positioned with appended circles and text elements, and values are formatted using `d3.format` with a "K" suffix.

Bbindhureddy98

82% match

Loading thumbnail…

Fork of ICE 7 Pie chart

This visualization is a pie chart displaying the top 10 countries by population in 2022. Each slice is labeled with its population value in thousands, and a legend lists the country names alongside corresponding color swatches and population figures. The code fetches CSV data from a GitHub gist URL using the `d3.csv` function. It renders the chart as SVG using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` assigning colors to each data category.

Ppavankalyan1507

82% match

Loading thumbnail…

Fork of ICE - 7 Pie chart viz

This pie chart visualizes the percentage distribution of COVID-19 cases among the top five countries, with each slice labeled and a corresponding legend. Built with D3 v5, the example uses the `pie` layout function to compute arc segments and the `arc` generator to create the SVG paths. Data is loaded from a CSV file via the `csv` method in `getData.js` and `index.js`, with each country's percentage represented by a distinct color from a manual palette. The chart includes an interactive legend that pairs colored rectangles with country names and values.

AArruSkywalker

82% match

Loading thumbnail…

ICE:7 Fork of Pie Chart

A pie chart displays the top ten most populous countries in 2020, with each slice sized by population and a legend listing each country alongside its population in millions. The visualization loads CSV data from a GitHub gist via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` assigning a distinct color to each slice. A separate legend group renders colored rectangles and text labels using `d3.select` and data joins, while `d3.format` converts raw numbers into readable millions values.

Mmanasanimmagadda13

82% match

Loading thumbnail…

Fork of Fork of ICE 7 Pie Chart

This visualization shows the top 10 car-producing countries in the world based on 2019 values, displayed as a pie chart with a color-coded legend. It loads CSV data from a GitHub gist using d3.csv, then computes each country’s total value from the 2019 column. Using d3.pie and d3.arc, it generates SVG path segments, while d3.scaleOrdinal assigns colors. The legend, built with appended SVG circles and text, labels each country and its formatted value (in thousands). The chart is rendered entirely as SVG within a 960×500 viewport.

DDivyaVellanki

82% match