Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Languages In Pie Chart : Shreeti

✓ Published0🌍 Public
Ssitaramchallapalli
Last edited Jul 2, 2022
Created on Jul 2, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
98% 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
97% match
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
94% match
Loading thumbnail…

Interactive pie chart for population

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.

PPriyaEnuganti
83% match
Loading thumbnail…

ICE - 7-2 Pie Chart

This example visualizes the top 10 most populated states in India as a pie chart, labeling each slice with its population in millions and pairing it with a color-coded legend. The chart’s slices use a d3.pie layout, with d3.arc generating the segment paths and d3.scaleOrdinal assigning categorical colors. Data is loaded asynchronously from a CSV via d3.csv, then rendered to SVG, with text labels positioned using the arc generator’s centroid method and a custom legend built from grouped SVG elements.

EEshwarreddyt
81% match
Loading thumbnail…

Fork of ICE - 7 Pie chart viz

This example shows the distribution of world population percentages across the top 10 countries using a pie chart. The visualization renders each country as a pie slice with a corresponding percentage label and an interactive tooltip that displays country details on hover. A legend lists the countries with their population percentages and colors. Built with D3.js v6, the chart uses d3.pie to compute arc angles, d3.arc to generate SVG path segments, and d3.schemeCategory10 for slice colors. Data is loaded from a CSV file hosted on GitHub.

Cchandrikachowdary867@gmail.com
81% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the latest population of different countries, with each slice representing a country and its death count in thousands. The visualization uses D3.js v5 to load CSV data from a GitHub gist, then applies the `d3.pie` and `d3.arc` functions to generate SVG paths and text labels positioned at each segment’s centroid. A legend on the right pairs colored rectangles with country names and values, while `scaleOrdinal` maps death counts to a fixed palette of ten colors.

RRohith arabati
79% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the distribution of Amazon users across the top 10 countries, with each slice labeled by its value in thousands and a corresponding legend listing countries and their respective user counts. Built with D3 v5, the visualization uses the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate and color the arcs, while `d3.select` and `d3.format` handle SVG rendering and tick labels. Data is fetched asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements within a 960x500 canvas.

SSUSHMA CHIRRA
79% match