Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Hharoldle
Last edited Mar 12, 2023
Created on Mar 10, 2023
Forked from HTML Starter

This example presents a pie chart visualizing the distribution of anime media types and their counts from a CSV dataset. The chart uses D3.js v7 to load and parse the data, then applies `d3.arc` and `d3.pie` to generate the wedges, with an ordinal color scale assigning distinct colors to each category. The SVG renders responsively using a viewBox and preserveAspectRatio, and the page includes a navigation bar linking to the dataset.

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 a pie chart where each arc segment represents a portion of a population value, with colors assigned from a categorical ordinal scale. The visualization uses a D3.js layout and SVG rendering, constructing the chart with `d3.svg.arc` for the arcs and `d3.layout.pie` to compute the angles from the data. The chart is centered on an SVG canvas of 960 by 500 pixels, with white strokes separating each arc for clarity. The code relies on D3’s ordinal color range to distinguish the segments visually.

Ssaenanan
87% match
Loading thumbnail…

Untitled

This visualization shows a labeled pie chart breaking down a dataset by category, with each slice filled with a distinct ordinal color and accompanied by its category name. Built with D3 v4, the chart loads CSV data from a GitHub gist and uses the `d3.pie` layout, `d3.arc` for both the slice paths and label positioning, and `d3.scaleOrdinal` for the color palette. The SVG output centers the pie and adds a bold title, with pink stroke outlines on each slice.

AArv1228
86% 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
85% match
Loading thumbnail…

Untitled

This example presents a static SVG pie chart inside a centered HTML layout, rendering data slices with D3.js version 5.7.0. The chart uses the `d3.pie` API to compute arc paths, which are then drawn as SVG `path` elements within a 960×500 viewport. The visualization is styled via an external `pie.css` stylesheet, while the JavaScript logic resides in a bundled `pie_bundle.js` file. The chart displays categorical proportions directly, with no interactivity or animation, relying solely on D3’s arc generation and SVG rendering.

TTharun2022
85% match
Loading thumbnail…

Untitled

This example displays a bar chart of anime titles plotted against their ratings, showing the top 15 entries from a CSV dataset. The chart uses D3.js v7 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and D3’s `d3.csv` to load the external data. The visualization is embedded in a React-styled HTML page with CSS styling for layout and typography.

Hharoldle
85% match
Loading thumbnail…

Untitled

This example shows a simple donut-style pie chart displaying five categorical items (A through E) with their corresponding counts. It uses the D3.js library to compute arc paths with the `d3.pie` and `d3.arc` functions, renders them as SVG paths, and colors each slice with `d3.scaleOrdinal`. Interactive tooltips appear on hover, displaying the item name and count. The chart is built as a React component, with D3 handling the SVG rendering and styling.

Ssitaramchallapalli
83% match
Loading thumbnail…

Untitled

This example shows a donut chart that distributes categorical data into seven colored arcs, with each slice labeled by its corresponding category name. It renders directly to a Canvas element using the `d3.arc` and `d3.pie` APIs from D3 v4, with data loaded from an external TSV file via `d3.requestTsv`. The chart translates the Canvas context to center it, fills each arc with a distinct color from a predefined palette, applies white stroke separators, and places labels along the inner ring using `labelArc.centroid`.

Mmauricio-acosta-reyes
83% 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
83% match