Skip to main content
SimilarExport ZIP
100%

ICE-7 Languages In Pie Chart : Shreeti

✓ Published1🌍 Public
SShreeti Upreti
Last edited Jul 2, 2022
Created on Jul 1, 2022
Forked from HTML Starter

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.

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

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
94% 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
93% 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
91% 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
79% match
Loading thumbnail…

ICE7 Pie Chart

This pie chart visualizes the populations of ten Indian states in 2000, with each slice’s area proportional to its population value and a legend mapping colors to state names and exact counts. Built with D3 v5, it loads JSON data via `d3.json`, arranges arcs using `d3.pie()` and `d3.arc()`, and assigns categorical colors through `d3.scaleOrdinal` with `d3.schemeCategory10`. The SVG rendering includes text labels formatted with `d3.format`, while the legend is manually constructed using appended rectangles and text elements.

Ssowmyanagula@my.unt.edu
75% 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.

MM
75% match
Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the population of different countries using data loaded from a CSV file. The code renders SVG arcs with D3.js v3, using the `d3.layout.pie` and `d3.svg.arc` APIs to compute and draw each slice, with colors assigned via `d3.scale.category20`. A legend on the right lists each country name and its corresponding population value, while labels are placed at arc centroids using `arc.centroid`. The chart emphasizes the distribution of population across nations.

SSreejaBellamkonda
75% match