Untitled

100%

✓ Published0🌍 Public

Last edited Dec 18, 2021

Created on Dec 18, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

82% match

Loading thumbnail…

Fork of Pie chart Test

This is an SVG pie chart that visualizes the percentages of white, black, and draw results from a dataset of 20,058 total records, with each slice labeled by its name and percentage. The chart uses D3 v6's `d3.pie` function to compute the arc segments and `d3.arc` to define both the path shapes and the text label positions, with a custom color scale (`d3.scaleOrdinal`) mapping values to a palette. The chart is centered within a large 4000x4000 SVG canvas, and the data is hardcoded in `index.js` rather than being loaded from the provided `data.csv` file.

Ppeterwang6666

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

81% match

Loading thumbnail…

Untitled

This example shows browser usage statistics for January 2017 as a donut chart, with each slice labeled by browser name and colored via a categorical scale. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the arc paths, and `d3.scaleOrdinal` for the color mapping. Data from the local CSV file `lottery.csv` is loaded with `d3.csv`, and the chart is rendered as SVG within a React-compatible HTML page. The title appears as static text, while slice labels are positioned using `label.centroid`.

Vvenkatajayanth03

81% match

Loading thumbnail…

Fork of Pie chart Test

This visualization displays a basic pie chart of browser usage shares, with segments colored by a sequential ordinal scale and labeled with their names. The chart is rendered as an SVG using D3 v6, with data hardcoded in the script rather than loaded from the included CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal()` for color mapping, while labels are positioned using an inner arc's centroid. The SVG is centered via CSS, and the visualization is based on a tutorial by FrontendTips.

SSonuSriN

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

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

79% match