Interactive pie chart for population

100%

Interactive pie chart for population

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This interactive pie chart visualizes the population distribution of major Indian languages, showing each language’s share as a colored arc with a tooltip revealing its exact count and percentage. Users can toggle legend items to enable or disable language segments, which dynamically recalculate the displayed percentages. Built with React and D3 v7, the visualization uses `d3.pie`, `d3.arc`, and SVG paths, with `d3.scaleOrdinal` providing the color scheme. The dataset, embedded directly in the code, lists 22 languages with their speaker counts in millions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE-7 Languages In Pie Chart : Shreeti

This interactive pie chart visualizes the millions of speakers for 22 languages in India, with Hindi dominating at 300 million. The D3.js visualization uses an ordinal color scale and a legend with toggleable entries; clicking a legend item disables that segment, recalculating the displayed percentages for the remaining languages. Hovering over a slice reveals a tooltip showing the language name, speaker count in millions, and its percentage of the total. The visualization is rendered with SVG and includes a smooth animation transition as data updates.

SShreeti Upreti

83% match

Loading thumbnail…

Fork of ICE-7 Languages In Pie Chart : Shreeti

This visualization shows the distribution of 22 languages spoken in India, with counts in millions, as a pie chart. It uses D3.js version 4.11 to create SVG arcs, with an ordinal color scale from `d3.schemeCategory20c`. Each slice displays a tooltip on hover, showing the language label, count in millions, and its percentage of the total. The chart includes an interactive legend that can be clicked to toggle slices on and off, re-animating the pie accordingly.

Ssitaramchallapalli

83% match

Loading thumbnail…

Fork of ICE-7 Languages In Pie Chart : Shreeti

This example visualizes language use in India as an interactive pie chart, with counts shown in millions. The chart uses a d3.pie layout and d3.arc to generate SVG paths, with a color scale from d3.schemeCategory20c. Hovering over a slice triggers a tooltip that displays the language label, count, and percentage, calculating the percentage based on enabled data entries. The dataset is loaded from an external CSV URL, and the rendering includes SVG elements with animation support for smooth transitions.

Ssitaramchallapalli

83% match

Loading thumbnail…

Fork of ICE-7 Languages In Pie Chart : Shreeti

A pie chart visualizes the proportional use of 22 major languages in India, with counts in millions. The D3.js visualization orders slices by value and displays a tooltip on hover showing the language name, its count, and calculated percentage of the total. Data is hardcoded in the `index.js` file, and the chart is rendered as a static SVG without animation. The code uses `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` with a categorical color scheme, plus a custom legend built from the same color domain.

Ssitaramchallapalli

81% match

Loading thumbnail…

Pie chart Visualization

This pie chart visualizes the top 10 Indian states by population, with each slice colored distinctly and paired with a legend listing state names and population values in thousands. Built with D3 v5, the code loads CSV data from a GitHub gist via `d3.csv`, computes arc segments using `d3.pie` and `d3.arc`, and renders the chart as SVG. Color mapping uses `d3.scaleOrdinal`, while numeric labels are formatted with `d3.format`. The legend is manually appended alongside the pie, and no interactivity is implemented.

DDanthalakirankumar

77% match

Loading thumbnail…

Pie Chart

This pie chart displays country population data from a TSV file, with radio buttons for selecting different indicators. It uses d3.pie and d3.arc to compute and draw the SVG arc paths, with an animated transition that interpolates the fill color via transition.attrTween and adjusts the inner radius. The chart is built with React, leveraging d3.scaleOrdinal with schemeTableau10 for color scaling, and d3.nest to group entries by indicator.

NNaveenaS12

76% 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

76% match

Loading thumbnail…

ICE7 piechart

This pie chart displays the population of Indian states. It uses the D3 library's `pie` and `arc` functions to compute and render the SVG paths, with colors assigned via `scaleOrdinal` and `schemeCategory10`. A legend, built with `append` and `text`, shows each state’s name and its population in millions. The data is loaded asynchronously from a remote CSV file using the `csv` function.

75% match