Skip to main content
SimilarExport ZIP
100%

Canvas Pie

✓ Published0🌍 Public
Mmbostock
Last edited Jul 21, 2019
Created on Dec 29, 2015

This example shows a minimal pie chart of U.S. population by age group, with each slice labeled directly on the canvas. The data comes from a TSV file, loaded via `d3.requestTsv`. It renders using the Canvas 2D API, with `d3.arc` and `d3.pie` from d3-shape to compute the arcs and angles. Slices are filled with distinct colors, outlined in white, and age labels are placed using the arc centroid method.

AI-generated description

A minimalist pie chart rendered to Canvas using d3-shape.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Canvas Donut

A donut chart displays the population distribution across seven age groups, with each segment labeled by its age range. The visualization renders to a Canvas element using d3-shape’s `d3.arc` for the donut and label arcs, and `d3.pie` to compute the angles from tab-separated data loaded via `d3.requestTsv`. Each slice is filled with a distinct color, separated by white strokes, and age labels are positioned using `labelArc.centroid`. Data comes from the included `data.tsv` file.

Mmbostock
83% match
Loading thumbnail…

Pie Chart

This pie chart displays the population distribution across seven age groups, from under five to 65 and over, with each slice labeled and colored distinctly. The visualization is built using D3 v4, leveraging d3-dsv to parse the CSV data, d3-scale for the ordinal color encoding, and d3-shape’s `d3.pie` and `d3.arc` to compute and render the arcs as SVG paths. Labels are positioned using the arc centroid method.

Mmbostock
83% match
Loading thumbnail…

Untitled

This example shows a donut-style pie chart of population by age groups, with colored arcs labeled directly on the chart and a legend listing each age range alongside its population count. The chart uses d3.csv to load age-pop.csv from a remote URL, d3.layout.pie to compute arc angles from the population field, and d3.svg.arc to render the segments. Colors come from d3.scale.category20(), while the legend and arc labels are added as SVG text and rect elements appended to the same svg container.

MManoj Kolluri
81% match
Loading thumbnail…

Pie chart

This interactive pie chart visualizes age-group distributions for six U.S. states, toggling between "apples" and "oranges" datasets via radio buttons. Built with D3.js v5, it uses `d3.pie` to compute arc angles, `d3.arc` for rendering donut segments, and `transition.attrTween` with an arc interpolation function to animate updates smoothly. A legend of colored dots and labels appears alongside the chart, with each state’s age categories mapped to a categorical color scale. The data loads from a local JSON file, and the SVG renders with styled strokes and transitions.

FfaRriaN
80% match
Loading thumbnail…

Canvas - Pie

A grid of twelve small pie charts renders on table cells using the Canvas API, with each chart displaying a percentage value from a hardcoded data attribute. The code creates each chart via the `pie` function, which draws a light blue background circle and a tomato-colored wedge proportional to the ratio, then labels it with the percentage. All charts are generated in pure JavaScript without any frameworks, using `document.createElement`, `canvas.getContext("2d")`, and the `arc` and `fillText` methods.

11Cr18Ni9
80% match
Loading thumbnail…

Pie chart

This visualization presents the distribution of survey respondents across different age groups using a pie chart. The chart is rendered as an SVG using React and D3 v5, with each section colored distinctly and labeled with a data value. Data is loaded asynchronously from a CSV file using `d3.csv`. The code constructs the pie using `d3.pie`, generates arcs with `d3.arc`, and applies colors via `d3.scaleOrdinal`. A legend, created with SVG `<rect>` and `<text>` elements, maps each color to its age group and member count.

VVineela Reddy
80% match
Loading thumbnail…

ah-Pie chart

This example visualizes the distribution of survey respondents across different age groups as an interactive pie chart, with each slice labeled with its corresponding value and accompanied by a color-coded legend. The chart uses D3.js v5 within a React framework, employing the `pie()` and `arc()` functions to compute the arc paths and the `scaleOrdinal()` for color mapping. Data is fetched asynchronously from a CSV file using `d3.csv`, and the SVG rendering includes custom text placement via `arcGenerator.centroid()` for labels.

VVineela Reddy
80% match
Loading thumbnail…

pie chart

This pie chart visualizes country populations using D3.js v6, rendering each slice as an SVG path with a categorical color scale. The code loads CSV data from a GitHub gist, processes population values, and uses d3.pie() and d3.arc() to generate the chart geometry. Each slice is labeled with its country name positioned at the arc centroid, while a custom legend built from SVG rectangles and text elements displays the color assignments alongside the chart.

Rreddyharshi08@gmail.com
79% match