Visualization with D3.js

100%

Visualization with D3.js

✓ Published0🌍 Public

Last edited Mar 25, 2021

Created on Mar 25, 2021

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Learn D3.js

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.

Pprincit

91% match

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

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

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

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

77% match

Loading thumbnail…

Fork of Piechart ICE7

This pie chart visualizes laptop market share in India for 2022, using data loaded from a GitHub-hosted CSV file. The chart displays each company’s sales percentage as colored slices with value labels, rendered as SVG paths via the `pie()` and `arc()` generators. A legend lists companies with their corresponding colors and values. The visualization uses D3 v5’s `scaleOrdinal` for color mapping, `csv()` for data fetching, and `format()` to display tick values.

TTekmal-Bhavana

77% match

Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Ssathishkanna11

76% match