Skip to main content
SimilarExport ZIP
100%

JS Bin

✓ Published0🌍 Public
663anp3ca
Last edited Sep 23, 2018
Created on Sep 23, 2018

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.

AI-generated description

D3 Circle Graph Example

forked from <a href='http://bl.ocks.org/Jn1532/'>Jn1532</a>'s block: <a href='http://bl.ocks.org/Jn1532/2372196ed6ff15f482d5d4ec1945a575'>D3 Graph Example</a>

forked from <a href='http://bl.ocks.org/EndNight95/'>EndNight95</a>'s block: <a href='http://bl.ocks.org/EndNight95/067595e7ac00830191c16e530ffdd878'>D3 Graph Example</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

JS Bin

A donut chart displays browser market share percentages for five browsers, with animated arcs that grow from zero to their final values over one second using `transition.attrTween` and `d3.interpolate`. The chart, built with D3 v3 and SVG, renders colored slices via `d3.layout.pie` and `d3.svg.arc`, with labels positioned at arc centroids appearing after a delay. A legend of rounded color swatches identifies each browser. The dark-themed widget also uses CSS drop shadows for visual depth.

EEndNight95
93% match
Loading thumbnail…

JS Bin

A donut chart displays browser market share percentages for IE, Chrome, Safari, Firefox, and Others, rendered as animated SVG paths that grow outward from the center. The visualization uses d3.layout.pie with a pad angle and d3.svg.arc to construct the rings, with d3.scale.category10 assigning colors per category. Upon loading, each path transitions over one second via transition.attrTween, interpolating from zero angles to its final slice, while a legend and percentage labels fade in afterward. The chart is styled with a dark widget background and drop-shadow filter from the accompanying CSS.

JJn1532
91% match
Loading thumbnail…

Untitled

This example displays a donut chart of browser usage statistics from January 2017, with each segment labeled by browser name. The visualization uses D3 v4’s `pie` layout, `arc` for both the outer ring and inner labels, and `scaleOrdinal` for categorical coloring. Data is loaded via `d3.csv` from "browseruse.csv" and rendered as SVG, with the title styled as a separate text element. The chart encodes percentages as arc lengths, highlighting relative market share at a glance.

SShreya Nandkumar Jadhav
82% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
81% 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
81% match
Loading thumbnail…

Untitled

This example shows browser usage statistics for January 2017 as a donut chart, with each slice labeled by browser name and colored via a categorical scale. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the arc paths, and `d3.scaleOrdinal` for the color mapping. Data from the local CSV file `lottery.csv` is loaded with `d3.csv`, and the chart is rendered as SVG within a React-compatible HTML page. The title appears as static text, while slice labels are positioned using `label.centroid`.

Vvenkatajayanth03
80% 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
80% match
Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over *changed*

A donut chart displays a single percentage value with a smooth animated transition, using a gradient fill that shifts from red to green as the percentage increases. The chart includes a mouseover effect that highlights the arc and bolds the percentage text. Built with React and D3 v5, the visualization uses SVG paths, `d3.arc` for the donut shape, `transition.attrTween` for the animation, and a linear gradient defined in the SVG `defs` section. The percentage updates are driven by `d3.interval`, with the input data hardcoded as zero.

SSchmittYannic
79% match