Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
SShreya Nandkumar Jadhav
Last edited Dec 26, 2023
Created on Dec 26, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Untitled

This example shows a pie chart of browser usage statistics for January 2017, where each slice is colored and labeled by browser name. The chart is built using React and D3.js v4, with the `d3.pie()` layout computing arc angles from the `d_Sigma_X` field of the provided `spots.csv` data. The SVG is rendered via `d3.arc()` paths for the slices and labels, with the chart centered in the viewport. A legend-like title is added as a text element.

Mmauricio-acosta-reyes
90% match
Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans
84% match
Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

AAndrea Mignone
84% match
Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Ssubratanp
83% match
Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza
83% 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
83% 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
82% match