Skip to main content
SimilarExport ZIP
100%

Fork of Pie Chart

✓ Published0🌍 Public
Zzjutkarma
Last edited Apr 24, 2022
Created on Apr 24, 2022
Forked from HTML Starter

This fork of Observable’s pie chart example embeds an interactive D3.js (v5) visualization via an iframe into a minimal HTML page. The chart renders the U.S. population by age group, using `d3.pie()` and `d3.arc()` to draw wedges, with a spectral color scale and labels positioned by `d3.arc().centroid`. Data comes from a local CSV file. The styling is handled with CSS, and the code leverages Observable’s `PieChart` function.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Pie chart

This example displays an interactive pie chart showing the distribution of survey participants across different age groups, with each slice labeled with its value and accompanied by a legend listing age groups and member counts. The visualization fetches CSV data from a remote GitHub gist using `d3.csv`, then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Text labels are positioned using `arc.centroid`, and the legend is built manually with SVG rectangles and text elements. The chart is styled with custom CSS, including hover-free static rendering and a centered title.

Aajaysonu
82% match
Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

VVineela Reddy
80% match
Loading thumbnail…

Fork of Pie Chart

A pie chart displays population values for the top 10 most populous years from a CSV dataset, with each slice colored by category and an interactive tooltip logging data on mouseover. The visualization uses D3 v5's `pie` and `arc` generators to compute and render SVG paths, while `scaleOrdinal` with `schemeCategory10` assigns colors. A legend lists years with corresponding population figures, and the data is sorted descending before rendering. The chart is built within a React-compatible setup using D3's `select` and `csv` loading.

Ssnehareddygurram
80% match
Loading thumbnail…

Fork of pieChart

A pie chart displays the absolute frequency of categorical values, initially for student grades, within a React-based visualization. The chart animates its segments using d3.arc and a transition.attrTween, interpolating start and end angles over a 500-millisecond delay per slice. A dropdown menu allows switching between categorical columns (e.g., "note" or "student"), recalculating frequencies via d3.nest().key().rollup() and re-rendering the SVG with d3.select and path elements. Hovering activates tooltips showing each slice's key and value.

Ppreethamkesa
79% match
Loading thumbnail…

Fork of Pie chart for report

This interactive donut chart displays the proportional sizes of five oblasts, with a legend showing each region’s percentage value. A menu allows the user to switch between plotting population, total, COVID, or other data categories, which updates the arc sizes and legend percentages accordingly. The visualization is built with React, rendering SVG paths generated by d3.pie and d3.arc, while d3.scaleOrdinal maps region names to colors. An unused helper embeds d3.interpolateRgb for a color gradient, and the menu responds to click events.

BbeauMarko
79% match
Loading thumbnail…

Fork of Pie Chart React & d3

This interactive pie chart visualizes a categorical color palette dataset loaded from a CSV file via `d3.csv`. The React component manages the data with `useState` and `useEffect`, rendering an SVG where each slice corresponds to a row, filled with its `RGB hex value`. The chart uses `d3.pie` and `d3.arc` to compute and draw the pie geometry, with a large outer radius creating a striking radial composition. Data loads asynchronously, displaying a "Loading..." message until ready.

Aalexcholmsky
78% match
Loading thumbnail…

Fork of Ep20 Visualizing with React D3 tryPie

A pie chart displays the CSS named colors as equal-sized slices, each filled with its corresponding RGB hex value. The visualization loads color data from a CSV gist using `d3.csv` and renders slices with `d3.pie()` and `d3.arc()` inside a React component. The chart uses React hooks for state management and renders SVG paths within a centered group, with D3 v6 handling the data-to-geometry transformation.

GGordon Yang
78% match
Loading thumbnail…

Fork of Interactive pie and bar

This example presents an interactive dashboard comparing top countries across teaching, research, and citations, with a pie chart linked to a bar chart. Hovering over a bar filters the pie and legend to show that country’s breakdown, while the bar chart updates based on pie interactions. The visualization uses D3 v3 with SVG and transitions, building ordinal and linear scales, and binding events like mouseover and mouseout to sync the components. Data is embedded as frequencies per category, rendered through React.

NNikhilMakkena
78% match