Skip to main content
SimilarExport ZIP
100%

Pie Chart

✓ Published0🌍 Public
11Cr18Ni9
Last edited Jan 10, 2017
Created on Jan 4, 2017

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.

AI-generated description

Built with blockbuilder.org

  • I still doubt whether it is a good idea that adding startAngle & endAngle attr at the end of ARC generator, because i read some pros didn't added and their routines work perfact.

  • attTween is my weakness and i don't get it right now.

mit Licensed

Similar vizzes

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
88% match
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Ssathishkanna11
88% 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
87% match
Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

MMTClass
86% 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
85% match
Loading thumbnail…

Pie chart TT

This example presents a simple pie chart built with D3.js (v4), visualizing a small static dataset of four numeric values. The chart is rendered as SVG within an 800x700 viewport. The code uses the `d3.pie()` layout generator to compute arc segments and the `d3.arc()` function to draw the resulting paths. Each slice is filled with a distinct color from a predefined array. The implementation also highlights direct manipulation of the `d3.arc()` API by logging arcs generated with both computed and constant angle/radius parameters, demonstrating how the path data is constructed.

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

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片
85% match
Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

JJoachimSchaeffer
85% match