Donut Example Re-imagined 2 Final Week

Donut Example Re-imagined and Broken

This example re-imagines a standard D3 donut chart as a playful face, rendered as an SVG path that forms a mouth arc, while the pie slices remain unjoined and broken due to missing data-binding logic. The React component uses D3 v5’s `d3.pie` and `d3.arc` to compute and render arcs, with `d3.scaleOrdinal` for colors and `d3.format` for labels. Data comes from a CSV of firearm, suicide, and alcohol-related deaths, loaded via `d3.csv` in a custom `useData` hook.

89% match

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.

Donut Example Re-imagined

A donut chart rendered with React and D3 v5 uses the `d3.arc` and `d3.pie` APIs to display five slices in a ring. A mouth-shaped arc sits at the center using a separate `mouthArc` path. A button labeled "Transform" regenerates random data through `generateData`, updating the chart via React state and D3 selection joins. The component also includes commented-out code for displaying formatted values using `d3.format`.

React Starter with Pie

This example demonstrates a donut chart built with React and D3, displaying a small categorical dataset with five segments. It uses D3’s `pie` and `arc` functions to compute the angular positions and draw the SVG paths, while `scaleOrdinal` assigns a fixed color palette to each category. The chart is rendered inside a React component, with D3’s `select` and `append` methods managing the SVG elements directly within the React-rendered container. The code also includes a separate `useData` hook for loading CSV data, though the pie chart itself uses inline dummy data.

Stylized Donut Chart Deaths

This donut chart visualizes mortality data, breaking down firearm deaths, suicide deaths, and alcohol-related deaths for males and females. Three colored arcs represent each cause of death, with labels positioned around the circumference. The visualization uses React with D3’s `arc` generator to create the donut segments, calculating angles from proportional death counts. Data comes from a CSV file loaded via D3’s `csv` function, with values parsed and totaled by sex in the `Marks` component.

All Donut Chart Deaths

This visualization presents five donut charts comparing death statistics across different demographic and cause-based groupings. The data categorizes deaths by firearm, suicide, and alcohol-related causes, with breakdowns by sex and cause type. Each donut chart displays proportional segments using color-coded arcs, constructed with D3’s `arc` function and `d3.v5`, while the React framework manages component rendering as SVG elements. Labels appear outside each arc, and the data originates from a CSV file covering mortality records.

81% match

Rendering Data w/ D3 And React

This example renders a donut-style pie chart of CSS named colors using React and D3. The code fetches CSV data via `d3.csv` and employs `d3.pie` and `d3.arc` to compute and draw the SVG paths. Each slice is filled with its corresponding color value from the dataset, with React managing state and rendering the SVG elements.

AAndres de la Garza

81% match