Skip to main content
SimilarExport ZIP
100%

Pie Chart

✓ Published0🌍 Public
JJacklyn Turner
Last edited Dec 26, 2019
Created on Oct 23, 2019

A donut chart displays the ten most common cocktail ingredients from a Hotaling & Co. dataset, ranked by frequency of use across recipes. The React app loads CSV data via `d3.csv`, aggregates counts with `d3.nest()`, and sorts results in descending order before slicing to the top ten. D3’s `pie()` generator computes arc angles, while the `arc()` generator renders SVG paths with an inner radius for the donut effect. Hovering reveals ingredient names and counts through native SVG `<title>` tooltips.

AI-generated description

This visualization is based on the dataset of cocktails collected by alcohol importer and distiller Hotaling & Co. The original dataset was modified to parse out and clean up the ingredients into rows.

The chart demonstrates a basic donut chart showing top 10 cocktail ingredients. The goal is to have one of these at each location in the final map.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie chart

A pie chart displays the distribution of CSS named colors, with each slice colored according to its corresponding hex value. The visualization loads a CSV dataset using `d3.csv` and computes the pie layout with `d3.pie`, assigning each record an equal value. React renders the resulting arcs as SVG paths using `d3.arc`, positioned at the center of a 960×500 viewport. The chart uses D3 v5 and React 16.9, with all slices sharing a common radius and no inner gap.

NNikithakatta30
81% match
Loading thumbnail…

Pie chart with react

A pie chart displays the relative frequency of named CSS colors, with each slice filled by its corresponding RGB hex value. The visualization loads CSV data via `d3.csv` and uses React's `useState` and `useEffect` hooks to manage asynchronous data fetching and component state. D3's `pie` and `arc` generators compute the slice geometry, which React renders as SVG `<path>` elements. The example demonstrates unidirectional data flow and mouse-event readiness within a React-D3 integration.

IIlgar Akalın
81% match
Loading thumbnail…

Donut Example

A donut chart displays five randomly generated numeric values as proportional arcs, with each slice labeled by its value in white text. The visualization updates its data on button press or when the data reference changes, demonstrating a React hook-based update pattern. Built with D3 v5 and React, the `Pie` component uses `d3.pie()` for arc generation, `d3.arc()` with configurable inner and outer radii, and a `scaleOrdinal` color scheme. SVG rendering occurs within a React component using `useRef` and `useEffect` hooks to manage the D3 selection lifecycle.

PPeter Maida
80% match
Loading thumbnail…

Pie chart in React & D3 - donations data

This example shows a donut chart of donation distribution across five categories—Health, Support, Education, Poverty reduction, and Other—with each slice labeled by its percentage. The visualization is built with React functional components and D3 v6, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path geometry. Slice colors derive from a categorical interpolation via `d3.interpolateRgb`, linking the data’s category order to a warm-to-cool gradient. The chart renders as SVG, with the React state and component structure managing the mapping from data to visual elements.

BbeauMarko
80% match
Loading thumbnail…

Pie Chart React & d3

A pie chart renders a color wheel from a CSV file of named colors, using React state to manage the asynchronous data loading. The static chart displays each color as an equally sized slice, with its fill set to the corresponding RGB hex value from the data. Built with React and D3 v7, the code uses `d3.csv` to fetch the data and `d3.pie` with `d3.arc` to generate the SVG paths. The visualization is rendered as an SVG element, centered on a 960x500 canvas.

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

Fork of Pie Chart

A donut chart displays the top ten countries by crime index for 2020, using D3 v5 with React. The visualization renders SVG arcs via `d3.pie` and `d3.arc`, with colors from `scaleOrdinal` and `schemeCategory10`. Each slice is paired with a legend showing country names and crime index percentages, sorted descending from the CSV data loaded with `d3.csv`. Hovering over a slice logs the value to the console. The chart is styled with CSS and positioned within an SVG canvas.

Bbhanuprasadk19
80% 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
79% match