Untitled

100%

✓ Published0🌍 Public

Last edited Apr 17, 2022

Created on Apr 17, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

Untitled

This pie chart visualizes user-vote outcomes from a small CSV dataset, mapping each user to a colored slice representing their winning choice. The chart is rendered as an SVG using D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs, with the data loaded via `d3.csv`. Each slice is filled by browser color (from a fixed palette) and labeled with the user’s name, while a title reads “pie chart.” The code also includes an unused loop variable and a console log, but the visualization itself focuses on the proportional distribution of the two outcomes.

Ppeterwang6666

85% match

Loading thumbnail…

Untitled

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.

Ssri7harsha

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

84% match

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

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

83% match

Loading thumbnail…

Untitled

A pie chart displays the distribution of cricket statistics, with five slices representing Matches, Innings, HS, Average, and Century. Each slice is labeled with its corresponding name and colored using a categorical scale. The SVG rendering uses d3.pie to compute angles from the data values, d3.arc to generate the paths, and d3.scaleOrdinal for the color mapping. Labels are positioned via arc.centroid on a static, non-interactive chart.

LLG0498

82% match