Untitled

100%

✓ Published1🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

This example presents a pie chart visualizing company values, with each slice labeled and colored by company. The chart is generated using D3.js v3, employing the `d3.layout.pie` and `d3.svg.arc` APIs to compute and draw the arcs. A custom legend, defined in `d3.legend.js`, is placed to the right and uses metadata attributes like `data-legend` and `data-legend-color` to automatically generate labeled items with colored circles. The data is loaded from a remote CSV file, and the chart renders as SVG with a fixed size and ordinal color scale.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example presents a pie chart of company values, with each slice labeled by company name and value. The chart uses D3 version 3 to load CSV data and generate the pie layout, with an ordinal color scale assigning distinct colors to each company. A custom legend, built using a reusable `d3.legend` function, displays each slice’s label and color in a boxed list beside the chart. The visualization is rendered as SVG, with text labels placed at each arc’s centroid.

Ssri7harsha

97% match

Loading thumbnail…

Untitled

This visualization shows a labeled pie chart breaking down a dataset by category, with each slice filled with a distinct ordinal color and accompanied by its category name. Built with D3 v4, the chart loads CSV data from a GitHub gist and uses the `d3.pie` layout, `d3.arc` for both the slice paths and label positioning, and `d3.scaleOrdinal` for the color palette. The SVG output centers the pie and adds a bold title, with pink stroke outlines on each slice.

AArv1228

84% match

Loading thumbnail…

Untitled

This example presents a static SVG pie chart inside a centered HTML layout, rendering data slices with D3.js version 5.7.0. The chart uses the `d3.pie` API to compute arc paths, which are then drawn as SVG `path` elements within a 960×500 viewport. The visualization is styled via an external `pie.css` stylesheet, while the JavaScript logic resides in a bundled `pie_bundle.js` file. The chart displays categorical proportions directly, with no interactivity or animation, relying solely on D3’s arc generation and SVG rendering.

TTharun2022

84% match

Loading thumbnail…

Untitled

This example shows a pie chart where each arc segment represents a portion of a population value, with colors assigned from a categorical ordinal scale. The visualization uses a D3.js layout and SVG rendering, constructing the chart with `d3.svg.arc` for the arcs and `d3.layout.pie` to compute the angles from the data. The chart is centered on an SVG canvas of 960 by 500 pixels, with white strokes separating each arc for clarity. The code relies on D3’s ordinal color range to distinguish the segments visually.

Ssaenanan

84% match

Loading thumbnail…

Untitled

This example shows a static pie chart displaying the proportional shares of five named individuals (Alex, Shelly, Clark, Matt, and Jolene) as colored slices with labels. The chart is rendered as SVG using D3 v4, with `d3.pie()` computing the arc angles from the data’s `share` values, `d3.arc()` generating the path geometry, and `d3.scaleOrdinal` assigning a categorical color palette. Labels are positioned via `arc.centroid()` and text elements, while the entire visualization is centered within a 500×400 SVG canvas.

AAnjan Shrestha

83% match

Loading thumbnail…

Untitled

This example presents a pie chart visualizing the distribution of anime media types and their counts from a CSV dataset. The chart uses D3.js v7 to load and parse the data, then applies `d3.arc` and `d3.pie` to generate the wedges, with an ordinal color scale assigning distinct colors to each category. The SVG renders responsively using a viewBox and preserveAspectRatio, and the page includes a navigation bar linking to the dataset.

Hharoldle

83% match

Loading thumbnail…

Pie Chart

This example displays a pie chart of sales figures for different companies, with each segment labeled by its proportional value and paired with a legend showing company names and sales totals. The chart is rendered as SVG using D3 v5, with data fetched from a CSV URL. It uses D3’s `pie` and `arc` generators to create the segments, a `scaleOrdinal` to map sales values to a set of predefined colors, and custom text elements to label each slice.

Mmanvithareddykarra

82% match

Loading thumbnail…

Untitled

This example shows a pie chart of browser usage statistics for January 2017, where each slice is colored and labeled by browser name. The chart is built using React and D3.js v4, with the `d3.pie()` layout computing arc angles from the `d_Sigma_X` field of the provided `spots.csv` data. The SVG is rendered via `d3.arc()` paths for the slices and labels, with the chart centered in the viewport. A legend-like title is added as a text element.

Mmauricio-acosta-reyes

81% match