Viz - pie - sort

100%

Viz - pie - sort

✓ Published0🌍 Public

Last edited Jan 15, 2018

Created on Jan 15, 2018

This example presents a pie chart of browser market share percentages, with wedges explicitly ordered by a custom sort sequence rather than by value. The visualization uses the Viz.js library’s `viz.pie()` API to generate the chart, while a custom sort function relies on `d3.ascending` and an array of browser names. Data is hardcoded in the script, and the SVG is rendered at 960 by 500 pixels with the pie group translated to the center.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - pie - label

This example shows a pie chart of browser market share percentages, with each slice labeled by its numeric value in white text. The chart is rendered as an SVG using D3 v4 and the vizjs library, where the `viz.pie()` API configures the data mapping, value accessor, and label function. The data is hardcoded in the script and the chart is drawn into a pre-existing `<g>` element via a D3 selection.

NNPashaP

89% match

Loading thumbnail…

Viz - pie - fill

A pie chart displays the market share of six web browsers, with each slice sized by percentage and colored via a custom fill function. The chart uses the Viz.js library's `viz.pie` API, which is called on an SVG group element with data provided as an array of name, value, and color tuples. It renders through SVG in a static 960x500 viewport, relying on d3.v4 for selection and the Viz.js v1.3.0 library for the pie layout and rendering.

NNPashaP

89% match

Loading thumbnail…

Viz - pie3d - custom

A 3D donut chart displays the market share of six web browsers, with each slice labeled by name and colored according to its category. The chart is rendered using the d3.js v4 library alongside the viz.js extension, specifically invoking the `viz.pie3d()` function. The visualization applies a vertical height to the pie to create a three-dimensional effect, and it uses an inner and outer radius to form the donut shape. The data is embedded directly in the page via the `getData()` function, which supplies browser names, percentage values, and hex color codes.

NNPashaP

88% 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

82% 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

80% match

Loading thumbnail…

Viz - pie - fold unfold

A data-driven pie chart displays six numeric values as proportional wedges, which fold inward to collapse the visualization and then unfold to restore its original form. Built with d3.v4 and the viz.js library, the example uses the `viz.pie()` API to generate the chart and calls its `.fold()` and `.unfold()` methods after timed delays. The SVG rendering is initialized within an HTML page, with transitions occurring over a 1.5-second duration per animation.

NNPashaP

80% match

Loading thumbnail…

Pie chart

This pie chart displays browser market share percentages, with each slice colored via a categorical scale and a legend identifying the browser names. It uses D3 v7 with `d3.pie` and `d3.arc` to generate the SVG paths, and `d3.csv` to load the remote dataset. Hovering over a slice reveals a tooltip showing the browser and its exact share, while the chart includes a bold title and white stroke separators between slices.

Vvenkatamanikantavaddi@my.unt.edu

79% 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

79% match