Skip to main content
100%

Pyramid Pie Chart

✓ Published0🌍 Public
Aabrahamdu
Last edited Aug 3, 2017
Created on Jul 6, 2017

This example visualizes the proportion of three categories—sky, shady side, and sunny side of a pyramid—as a single pie chart rotated 1.2π radians to resemble a pyramid’s cross-section. The code uses d3.pie to compute arc angles and d3.arc to generate SVG paths, with a custom startAngle and endAngle offset for rotation. Hovering highlights slices in red via CSS. Data are hardcoded as an array of objects, and a legend is appended using d3 selections.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Pyramid Pie

A pyramid pie chart uses a single D3 pie layout to show proportions as a rotated, triangular arrangement of three slices: sky, sunny side, and shady side. The chart uses `d3.layout.pie` and `d3.svg.arc` to compute slice geometry, and `d3.legend` to render a circular legend. Colors are assigned via an ordinal scale, and the whole pie is rotated with a transform. Data comes from a CSV file with feature, label, and proportion columns.

CChmits
92% 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
79% 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
78% 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
78% 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
78% match
Loading thumbnail…

pie chart

A pie chart visualizes the proportion of sales across three product categories—Electronics, Clothing, and Food—using hardcoded data from an array. The chart is rendered as SVG with D3.js v7, employing `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes, which are filled using a categorical color scale. Each slice includes a centered text label displaying the category and sales value, while a separate legend lists the categories with their corresponding colors.

CChindamrohan321@gmail.com
77% match
Loading thumbnail…

Easy Pie Chart

This example displays a simple pie chart with four slices, using colors and numeric labels to represent the provided dataset. The chart is built with D3 v4 on an SVG canvas, where a group element is centered and `d3.pie()` computes the start and end angles for each arc. These angles are rendered using `d3.arc()` with a specified inner and outer radius and pad angle, while `d3.scaleOrdinal` assigns the slice colors. Each wedge is labeled with its data value using `arc.centroid` to position the text.

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

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu
77% match