Pie Chart with Legend

100%

Pie Chart with Legend

✓ Published1🌍 Public

Last edited Mar 26, 2023

Created on Mar 26, 2023

This pie chart visualizes the population of fantasy worlds in millions, using a categorical color scale to distinguish each world. The chart renders an SVG with D3’s `pie` and `arc` generators, while `scaleOrdinal` and `schemeCategory10` assign colors. A legend on the right lists each world and its population, built with appended SVG rectangles and text labels. Data is loaded as CSV from a GitHub gist, formatted via a custom number formatter, and styled with red and blue headings in the HTML.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

A pie chart displays the population distribution of the top ten most populous countries, with each slice sized proportionally and color-coded via a categorical scale. The chart renders as an SVG, generated from CSV data loaded from a GitHub gist. Using d3.pie and d3.arc, the visualization constructs the circular segments, while d3.scaleOrdinal with schemeCategory10 assigns slice colors. A legend on the right lists each country with its corresponding color swatch and population value, and hovering over a slice logs the population to the console.

Bbrindapotluri

81% match

Loading thumbnail…

Pie Charts

This pie chart visualizes population distribution across rural areas using data loaded from a CSV file. Each slice represents an area with its total population, labeled with the area name. The chart is rendered with SVG and animated using D3 v4’s transition.attrTween to grow the arcs from zero to their final angles. Colors are assigned via d3.scaleOrdinal, and the pie and arc generators (d3.pie, d3.arc) compute the geometry. Labels are positioned using labelArc.centroid.

AAsmabee Khan

79% match

Loading thumbnail…

Fork of Pie Chart

A pie chart displays population values for the top 10 most populous years from a CSV dataset, with each slice colored by category and an interactive tooltip logging data on mouseover. The visualization uses D3 v5's `pie` and `arc` generators to compute and render SVG paths, while `scaleOrdinal` with `schemeCategory10` assigns colors. A legend lists years with corresponding population figures, and the data is sorted descending before rendering. The chart is built within a React-compatible setup using D3's `select` and `csv` loading.

Ssnehareddygurram

79% match

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the top 10 countries by population in 2021, using a legend to display each country's name and population in millions. The chart is built with React and D3 v5, employing `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` to generate the SVG sectors. The code loads population data from a CSV file hosted on GitHub, sorts it in descending order, and renders the pie chart and interactive legend with mouseover logging.

Mmanishcheruku

79% match

Loading thumbnail…

Fork of Fork of Pie chart

This example shows the top 10 countries by population in 2022 using a pie chart with a side legend. The SVG rendering uses d3.pie and d3.arc to generate colored segments, with population values labeled in thousands on each slice. A scaleOrdinal maps section colors, and the chart draws from a CSV dataset hosted on GitHub. The legend lists each country with its corresponding population value, and the page uses a light yellow background with a blue title.

Ppravallikayaram12

78% match

Loading thumbnail…

Fork of Pie Chart

This example shows a pie chart of the populations of the ten most populous countries, with each slice labeled in a side legend. Data is loaded from a CSV file using `d3.csv`, sorted, and sliced before being passed to `d3.pie` and `d3.arc` to generate the SVG segments. The chart uses `d3.scaleOrdinal` with `schemeCategory10` for slice colors and appends legend groups with rectangles and text. Hovering over a slice logs its population value to the console.

Nnithish-1999

78% match

Loading thumbnail…

Fork of Pie chart

A pie chart displays the top 10 countries by population in 2022, with each slice labeled in thousands and accompanied by a legend showing country names and values. The chart uses D3 v5 to load CSV data via `d3.csv`, compute slice angles with `d3.pie`, and generate SVG paths with `d3.arc`. A `d3.scaleOrdinal` maps population values to a preset color array. Text labels are positioned using the arc centroid, while the legend is built with appended rectangles and text elements.

MMalempatiSaranya

78% match

Loading thumbnail…

Pie chart

This pie chart displays the top 10 most populous countries in 2022, with each slice labeled by population count and a color-coded legend listing country names and values. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw SVG paths, while `scaleOrdinal` assigns colors from a hardcoded array. Population data is loaded from a CSV via `d3.csv`, formatted with `d3.format`, and rendered on a yellow background with text labels positioned using `arc.centroid`.

Ssaivinay143

78% match