Skip to main content
SimilarExport ZIP
100%

Pie Chart with Labels using d3.js

✓ Published0🌍 Public
GGogineni44
Last edited Mar 27, 2023
Created on Mar 27, 2023
Forked from Pie Chart

A pie chart displays the distribution of Iris species counts, with each slice labeled by species name and its corresponding count, accompanied by a color-coded legend. Built with d3.js v5, the visualization uses the `d3.pie` layout, `d3.arc` generator, and `d3.scaleOrdinal` color scheme to create SVG paths and text elements. Data is loaded from an external CSV file using `d3.csv`, and the chart is rendered as a static SVG with an explicit width and height of 400 pixels.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie chart

This pie chart visualizes the distribution of iris flower species from a remote CSV dataset, with each species represented as a colored slice and a matching legend. Built with D3 v6, the example uses the `pie` generator, `arc` generator, `scaleOrdinal`, and `schemeCategory10` to create the chart, while `svg` selections handle rendering. The code also demonstrates a reusable `pieChart` module with chained getter-setter methods, and the legend is drawn manually using appended `g` elements with rectangles and text labels, all styled with custom CSS.

Ppmanoj13053@gmail.com
89% match
Loading thumbnail…

Pie chart

This pie chart displays the distribution of iris species from a CSV dataset loaded via `d3.csv`. Each slice represents one flower, and the chart uses `d3.pie` and `d3.arc` to generate the arcs, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Two legends are rendered—one inside the chart function and another in the main script—both labeling species via SVG rectangles and text. The visualization adapts to the full browser window size.

GGangumalla Ruchitha Reddy
88% match
Loading thumbnail…

iris-pie-chart

This pie chart visualizes the distribution of iris species across the dataset, showing counts for Iris-setosa, Iris-versicolor, and Iris-virginica. It uses d3.pie and d3.arc to generate slices, d3.rollup to aggregate counts, and a d3.scaleOrdinal for color encoding. The chart is rendered as SVG with labels positioned via arc.centroid, accompanied by a separate SVG legend. Data is loaded asynchronously from a CSV file using d3.csv, with all elements cleared on reload.

Ssohith kampalli
87% match
Loading thumbnail…

Fork of Pie chart

This example demonstrates a pie chart built with d3.pie and d3.arc, visualizing the distribution of iris species from a CSV file. Each slice represents a single observation, with colors assigned via d3.scaleOrdinal and d3.schemeCategory10. The chart uses d3.select and d3.csv to load data and render SVG paths, with a legend added programmatically.

Sshraehithareddy@gmail.com
86% match
Loading thumbnail…

IRIS

This pie chart displays the distribution of Iris species from a CSV dataset loaded from a GitHub gist. The chart uses a clean, white background with an elegant color palette of blue, orange, and green to distinguish the three species, and includes labels directly on the slices, a bold title, and a legend showing counts. Built with D3.js v7, it employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG slices, with `d3.rollups` aggregating the data.

Mmyselfganesh433@gmail.com
86% match
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the Iris dataset as a scatterplot, showing SepalLengthCm against SepalWidthCm with points colored by species (red, green, blue). The SVG is created using d3.select and appended with a `<g>` element, while d3.scaleLinear defines the x and y scales. Axes are added via d3.axisBottom and d3.axisLeft, with the chart title and data describing species distribution. The code imports d3 functions like select, csv, pie, arc, scaleOrdinal, and schemeCategory10, though the scatterplot implementation uses direct SVG circles and a remote CSV URL from a GitHub gist.

Bbhanuteja1807@gmail.com
86% match
Loading thumbnail…

PieChart-D3

A pie chart displays the distribution of fruit categories from a CSV file, with each slice labeled and a corresponding color legend. The chart is rendered as SVG using D3 v7, with the pie layout created via `d3.pie` and `d3.arc`, and colors assigned through `d3.scaleOrdinal` with `d3.schemeCategory10`. Data is loaded asynchronously with `d3.csv`, and slice labels are positioned using `arc.centroid`. The legend is built manually by appending colored rectangles and text elements.

Kkblikitha22@gmail.com
86% match
Loading thumbnail…

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu
85% match