Learn D3.js

100%

✓ Published0🌍 Public

Last edited Mar 24, 2020

Created on Mar 24, 2020

This example shows worldwide operating system market share for Android, Windows, and iOS as a labeled pie chart. It renders in SVG using D3 v4, with the `d3.pie` layout generating arc data from hardcoded percentages and `d3.arc` producing the path geometry. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, while arc centroid labels display each platform and its percentage directly on the chart. The visualization demonstrates basic pie chart construction with group elements and path/text bindings.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Learn pie chart with D3.js

This pie chart visualizes worldwide operating system market share for Android, Windows, and iOS, using percentage values from the displayed data array. The D3.js v4 code creates an SVG-based pie chart by applying `d3.pie` to the data, drawing arcs with `d3.arc`, and coloring each slice via `d3.scaleOrdinal` with the `schemeCategory10` palette. Labels for each platform and its percentage are placed at arc centroids. The chart is rendered within a 500×300 SVG canvas, with the data sourced from the provided JavaScript object.

Aaruba-haroon

93% match

Loading thumbnail…

Visualization with D3.js

This pie chart visualizes operating system market share percentages for Android, Windows, Linux, and iOS. The visualization uses D3.js version 5 to bind the dataset to SVG elements, computing arc paths with `d3.pie()` and `d3.arc()`. A `d3.scaleOrdinal` with `schemeCategory10` assigns colors to each slice, and labels are positioned using `label.centroid()`. The example demonstrates basic pie chart construction with a small, hardcoded dataset in a single SVG container.

NNarayana Reddy

91% match

Loading thumbnail…

Learn D3.js

This example shows worldwide operating system market share percentages in a static pie chart drawn with SVG. The code uses D3 v4’s `d3.pie()` to compute arc angles from three data objects and `d3.arc()` with `outerRadius` and `innerRadius` to generate the path shapes. A single `<text>` element per slice, positioned via `label.centroid(d)`, displays the platform name and percentage. Categorical colors come from `d3.scaleOrdinal(d3.schemeCategory10)`. The visualization is rendered inside an `svg.pie-chart` element in the HTML, with data hard-coded in the JavaScript array.

Pprincit

91% match

Loading thumbnail…

Lets Make a Face with D3 Format

This example visualizes survey data on platform usage, showing the percentage distribution between Windows and iOS as a single pie chart. The chart is rendered as an SVG using D3.js version 5, with the pie layout and arc generator computing the angles and paths for each slice. Colors are assigned via d3.scaleOrdinal with the schemeCategory10 palette, and the data is bound to SVG groups using the standard data join pattern. The visualization centers the pie within an SVG canvas of 500 by 300 pixels, with the radius set to half the smallest dimension.

227-12-95

81% match

Loading thumbnail…

Simple Pie Chart

This example shows a simple pie chart displaying market share values for five smartphone companies, with each segment labeled by its numeric value and accompanied by a legend showing company names. The chart is rendered as an SVG using D3.js v5, with data defined inline as JavaScript objects. It uses the `d3.pie()` generator to compute segment angles and the `d3.arc()` function to draw the donut-shaped segments, which have an inner radius, outer radius, and padding between arcs. Color encoding relies on `d3.scaleOrdinal` with the `d3.schemePastel2` palette, and legends are manually appended as SVG groups with rectangles and text elements.

Ss-pranathi

77% match

Loading thumbnail…

JS Bin

This example visualizes browser market share percentages as a donut chart, with animated arc segments and a delayed legend appearing after the initial render. The chart uses D3 v3’s `pie` layout and `arc` generator to create the donut, while `transition.attrTween` animates each arc’s expansion from zero to its final angle. The code explicitly binds data from an inline array of browser names and percentages, and uses `d3.scale.category10` for colors. A drop shadow filter on the SVG container and a styled widget frame are also present, with the legend and percentage labels added via `append` and `text` elements.

663anp3ca

74% match

Loading thumbnail…

Pie chart Test

This example shows a simple pie chart of browser usage, displaying four labeled slices with a legend-like color scale. The visualization is rendered as an SVG element using D3 v6, with data hardcoded in the script rather than loaded from the CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal` for color mapping. Each slice includes a text label positioned via `label.centroid()`. The chart is centered on the page using CSS transforms.

VVeerle

74% match

Loading thumbnail…

Fork of Pie chart Test

This visualization displays a basic pie chart of browser usage shares, with segments colored by a sequential ordinal scale and labeled with their names. The chart is rendered as an SVG using D3 v6, with data hardcoded in the script rather than loaded from the included CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal()` for color mapping, while labels are positioned using an inner arc's centroid. The SVG is centered via CSS, and the visualization is based on a tutorial by FrontendTips.

SSonuSriN

74% match