Viz - pie - padAngle

100%

Viz - pie - padAngle

✓ Published0🌍 Public

Last edited Jan 15, 2018

Created on Jan 15, 2018

A pie chart with padded slices displays six numeric values as proportional segments of a circle. The single SVG group is transformed to position the chart at the center of the viewport. The example uses the `viz.pie()` function from the Viz.js library to generate the layout, configuring a `padAngle` of 0.02 to separate adjacent arcs. The resulting pie is rendered as SVG elements via a D3 v4 selection that invokes the pie generator on the designated `<g>` element.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - pie - startAngle

A pie chart visualizes six numeric values with a custom starting angle of 90 degrees, shifting the first slice to the top of the circle. The chart renders as an SVG using the d3.v4 library’s selection and call mechanism, pulling the viz.pie API from Viz.js to compute the arc layout. The code defines the pie with a data array and specifies startAngle(Math.PI/2), then attaches it to a <g> element translated within a 960×500 SVG canvas.

NNPashaP

87% match

Loading thumbnail…

Viz - pie - cornerRadius

A pie chart displays six numeric values with rounded corners on each slice, creating a segmented donut-like appearance. The visualization is rendered as an SVG element using the D3 v4 library, with the pie layout generated by the `viz.pie()` API from Viz.js. The chart applies a `cornerRadius` of 10 pixels to the slices, and the data values are hardcoded in the script rather than loaded from an external file. The SVG grouping element is selected and passed to the pie generator to produce the final graphic.

NNPashaP

86% match

Loading thumbnail…

Viz - pie - outerRadius

A pie chart displays six categorical values as wedges around a center point, with an outer radius of 180 pixels. Built with D3 v4 and the viz.js extension, the chart uses the `viz.pie()` API to generate SVG sectors from hardcoded data in the script. The visualization renders to an SVG element with a translated `<g>` container, positioning the pie at coordinates (200, 250) within a 960-by-500 canvas.

NNPashaP

85% match

Loading thumbnail…

Viz - pie3d - default

This example presents a three-dimensional pie chart built with D3.js v4 and the Viz.js library, using SVG rendering. The chart displays six data values as extruded, angled sectors, giving a sense of depth and perspective. The visualization is constructed by calling `viz.pie3d()` and binding it to an SVG group element via `d3.select("g").call(pie3d)`. The data array `[6.24, 14.2, 22.71, 4.56, 2.93, 1.36]` is passed directly to the pie3d function. The code relies on the viz.js API to generate the 3D effect within the SVG output.

NNPashaP

85% match

Loading thumbnail…

Viz - pie - endAngle

This example shows a semi-circular pie chart that spans from -90 to 90 degrees, creating a half-donut shape from six data values. The visualization uses the viz.pie API from vizjs.org, configured with explicit startAngle and endAngle values, and renders as an SVG via d3.js v4. The pie is drawn inside a translated `<g>` element, with the data passed directly to the pie generator rather than bound to DOM elements. The empty `<style>` block indicates default styling is used.

NNPashaP

83% match

Loading thumbnail…

Viz - pie - innerRadius

This example shows a donut chart rendered from six hard-coded numeric values, using an inner radius of 130 pixels to create the hole in the center. The visualization is generated with the `viz.pie()` API from the Viz.js library, which is called on a pre-selected SVG group element using `d3.select("g").call(pie)`. The chart relies on D3 v4 for SVG manipulation and layout, while Viz.js handles the pie geometry and arc generation, producing the final static SVG output.

NNPashaP

83% match

Loading thumbnail…

Viz - pie3d - eccentricity

This example shows a 3D pie chart whose six slices are rendered with a pronounced eccentricity, giving the disk a tilted, elliptical appearance. The chart uses the `viz.pie3d` API from the Viz.js library, configured with a data array and an eccentricity value of 0.5, then bound to an SVG `g` element via `d3.select("g").call(pie3d)`. The visualization relies on d3.v4 for selection and SVG rendering, with the Viz.js library generating the 3D geometry and shading internally.

NNPashaP

83% match

Loading thumbnail…

Pie Padding

This example demonstrates a pie chart with small gaps between its slices, created using a hardcoded array of eight numeric values. The `d3.layout.pie` function with a `padAngle` of .02 adds parallel-sided padding between arcs, while approximately preserving their relative areas and angles. An `d3.svg.arc` defines the donut shape, and the chart is rendered as SVG paths, with each slice colored using `d3.scale.category10`.

Mmbostock

81% match