Skip to main content
SimilarExport ZIP
100%

pie

✓ Published0🌍 Public
EEranM6
Last edited Jul 24, 2018
Created on Jul 24, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Shapes: Pie Example

This pie chart example visualizes a sequence of eight numbers—1, 1, 2, 3, 5, 8, 13, 21—as proportional wedges. Using D3 v4, it renders the chart with the `d3.pie` layout function and `d3.arc` to draw each arc with fixed inner and outer radii. The SVG paths are filled using a categorical color scheme (`d3.schemeCategory20c`) via `d3.scaleOrdinal`. The graphic is centered inside a full-screen SVG, and the code demonstrates a basic, static pie chart built from a simple array.

DDanielAguirre
89% 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
89% 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
87% match
Loading thumbnail…

Shapes: Pie Example

This example displays a small pie chart built from an array of seven numeric values, with each slice sized proportionally to its value. The visualization uses D3 v4’s `d3.scaleOrdinal` with the `d3.schemaCategory10` color palette to assign distinct colors to each segment. The chart is rendered as an SVG element, where the arcs are generated using the `d3.arc` API with an inner radius of zero and an outer radius of ten, and angles are computed via `d3.pie()` before being passed to the arc’s start and end angle functions. The data itself is hard-coded in the script, and the code originates from a gist by DanielAguirre, structured for use with Blockbuilder.

DDanielAguirre
86% match
Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

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

Pie Centroid

A pie chart displays seven categorical slices with distinct colors, each marked by a black dot at its centroid. The centroids are computed using the `arc.centroid` method from d3-shape, which returns a point suitable for label positioning rather than the geometric center of the arc. The visualization renders to a Canvas element, with the pie drawn via `d3.arc` and the dots via `d3.symbol`, both configured with the Canvas context. The underlying data is the Fibonacci sequence `[1, 1, 2, 3, 5, 8, 13]`, and the entire layout is created using the d3.v4 alpha library.

Mmbostock
85% match
Loading thumbnail…

Pie Multiples

Four small donut charts display proportional breakdowns for each row of a two-dimensional numeric array. D3 v3’s `d3.layout.pie` computes arc angles, while `d3.svg.arc` renders the path shapes. Each chart uses an inner and outer radius, with colors assigned by index from `d3.scale.category20c()`. The SVG elements are generated per row, and the totals for each row differ.

Mmbostock
85% match