Skip to main content
SimilarExport ZIP
100%

Canvas - Pie

✓ Published0🌍 Public
11Cr18Ni9
Last edited Sep 3, 2017
Created on Sep 3, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Canvas Pie

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.

Mmbostock
80% match
Loading thumbnail…

Pie Chart Example

This example displays a pie chart representing web development data. It uses Chart.js, loaded from a CDN, to render the visualization on an HTML canvas element. The page includes a container with a heading and a canvas with the ID "pie-chart," where Chart.js draws the pie chart. The chart is rendered client-side using the Canvas API, and the dataset is defined within the script, though the actual chart configuration and data are not fully shown in the provided code.

Jjwr2023
79% match
Loading thumbnail…

pie chart

This example shows a pie chart displaying crime counts by type, with the data fetched from a CSV file hosted in a GitHub Gist. The chart is drawn on a Canvas element using the Chart.js library, which handles the pie chart rendering. The JavaScript code parses the CSV data, extracting the crime type and count from specific columns, then passes these as labels and data values to the Chart.js constructor. The visualization uses a fixed set of semi-transparent colors for the pie slices with a border width of one pixel.

TTarun Kumar Bosupally
76% match
Loading thumbnail…

Pie Chart

A pie chart displays five categorical values as proportional, colored arcs with hover highlighting and percentage labels. The chart uses d3.layout.pie to compute arc angles and d3.svg.arc to generate SVG paths, with an ordinal color scale for fills. Hovering translates the arc group outward via a transition, while labels rotate to align with each segment’s midpoint. The visualization is built with d3.v3 and renders entirely in SVG.

11Cr18Ni9
75% match
Loading thumbnail…

pie

A pie chart displays eight proportional segments with values from the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21). D3 v4’s `d3.pie()` computes the arc angles, while `d3.arc()` generates the SVG path for each slice with an inner radius of 0 and outer radius of 100. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns categorical colors, and white strokes separate the segments. The chart is rendered as static SVG elements, translated to position (200, 200) within the viewport.

EEranM6
75% match
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of a categorical variable, using colored slices to represent each category's share of the whole. The example renders a fixed dummy dataset (`{a: 9, b: 20, c:30, d:8, e:12}`) as SVG paths, with each slice's angle determined by `d3.pie` and its geometry drawn via `d3.arc`. Colors come from `d3.scaleOrdinal` with a manually specified palette, and the chart is centered within a 450×450 pixel canvas. The code uses the D3.js v4 library, appending the visualization to a `<div>` and styling slices with black strokes and 0.7 opacity.

Hhanulik.ondrej@gmail.com
75% match
Loading thumbnail…

pie chart

This example shows a pie chart of unemployment rates by country, with each slice labeled by country name and percentage in the legend on the right. It fetches CSV data from a GitHub gist and renders the chart on a canvas element using the Chart.js library. The code parses the CSV rows manually, assigns each country a random color, and customizes legend and tooltip callbacks to display the percentage alongside names.

Ssaisathyapriya097@gmail.com
75% match
Loading thumbnail…

Pie chart

This example shows a simple pie chart visualizing the distribution of four categories (one, two, three, four) with values from an embedded CSV string. The chart renders as an SVG with colored arcs, each filled using a categorical color scale based on the category name. The code uses d3.svg.arc to define the pie slices and d3.layout.pie to compute the angles, with data parsed via d3.csv.parse. The visualization is centered on a 960×500 canvas with a white background and white stroke separators between arcs.

GGlenBentley
75% match