Skip to main content
SimilarExport ZIP
100%

Reusable Examples - Pie Chart 2

✓ Published0🌍 Public
JJimMaltby
Last edited Sep 1, 2021
Created on Sep 1, 2021

A reusable pie chart displays browser usage percentages from a CSV file, with a legend of seven categories and labels positioned between the inner and outer radii. Built with D3 v5 using the ProD3 pattern, the chart leverages `d3.pie()` and `d3.arc()` to generate SVG arc paths, with `d3.scaleOrdinal` and `d3.schemeCategory10` for color encoding. The implementation follows a modular structure with configurable margins, dimensions, and title, rendering via an SVG container.

AI-generated description

Simple Pie Chart:

A vanilla HTML implementation of a reusable version of tutorials teacher V5 example (https://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js).

The reusable chart is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles. But uses the ProD3 pattern (Pro D3.js Use D3.js to Create Maintainable, Modular, and Testable Charts by Marcos Iglesias https://www.apress.com/gp/book/9781484252024) as the basis for the charts.

Addtional help from and aknowledgement to:

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Examples - Pie Chart

This example demonstrates a reusable pie chart built with D3.js v5, following the patterns from Mike Bostock's "Towards Reusable Charts" and the Pro D3.js methodology. It renders two separate pie charts within a single SVG container, using `d3.pie` and `d3.arc` to calculate and draw the slices with an inner radius for a donut effect. The chart includes a title and uses `d3.scaleOrdinal` with the category10 color scheme to distinguish data categories. The code shows a modular structure with separate functions for building the layout, shape, scales, and SVG, allowing the chart to be easily reused with different datasets.

JJimMaltby
91% 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
85% match
Loading thumbnail…

Fork of Reusable pie chart

This example is a reusable pie chart that visualizes categorical data from a CSV file containing wine characteristics. It shows how each category's proportion is represented as a slice of the pie, with labels positioned at each slice's centroid and a color scale applied via `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The chart is rendered as an SVG using D3 v7, with pie geometry computed through the `d3.pie` and `d3.arc` APIs. Hovering over a slice triggers a brief animation that expands the arc outward using D3 transitions, providing interactive feedback. The data is loaded asynchronously via `d3.csv`, and numeric values are converted before the slices are appended.

Vvaishnavgck@gmail.com
83% match
Loading thumbnail…

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu
83% match
Loading thumbnail…

piechart

This pie chart visualizes categorical data loaded from a CSV file, displaying each category as a colored slice with a label and a legend. The code uses D3 v6 API functions including `d3.pie` to compute arc data, `d3.arc` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. It renders as an SVG with a centered group, positioning arc paths and text labels via the `arc.centroid` method, while the legend is built with appended rectangles and text elements.

Rrajeswariamruthabommaraju@my.unt.edu
82% match
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of a categorical variable, using colored slices to represent each category's share of the whole. The example renders a fixed dummy dataset (`{a: 9, b: 20, c:30, d:8, e:12}`) as SVG paths, with each slice's angle determined by `d3.pie` and its geometry drawn via `d3.arc`. Colors come from `d3.scaleOrdinal` with a manually specified palette, and the chart is centered within a 450×450 pixel canvas. The code uses the D3.js v4 library, appending the visualization to a `<div>` and styling slices with black strokes and 0.7 opacity.

Hhanulik.ondrej@gmail.com
81% match
Loading thumbnail…

Pie chart in React & D3 - with Legend

A React and D3 donut chart visualizes budget allocations across five categories, with a legend mapping category names to a color scale interpolated between coral and crimson. The `pie` and `arc` generators compute slice geometry, while `scaleOrdinal` assigns colors from the interpolated range. Percentages appear on slices via `arc.centroid`, and the `ColorLegend` component renders interactive-free color swatches with tick spacing. The chart uses SVG rendering with `d3.interpolateRgb` for gradient transitions and `format` for numeric labels, based on static data in the `donThemes` array.

BbeauMarko
81% match
Loading thumbnail…

Pie Chart 2

This example displays a pie chart with four equal slices, each filled with a different color from a CSV dataset loaded via D3’s `csv` method. Built with React 18 and rendered as SVG, the chart uses `d3.arc` with an inner radius of zero and an outer radius of 200 to generate the paths. The slices are positioned by calculating start and end angles for each quarter, and hovering scales the arcs via CSS transitions. The data source is a static CSV fetched from a GitHub gist.

PPathan Khuvanejarkhan
81% match