Fork of Fork of React & D3 Starter

Fork of React & D3 Starter

This fork of the React & D3 Starter shows a pie chart of expense categories with quantitative values, alongside a reusable scatter plot module implemented as a factory function. The pie chart uses d3.pie and d3.arc to generate SVG slices, a d3.scaleOrdinal color scale, and includes text labels placed via arc.centroid plus an HTML legend. The scatter plot module uses d3.scaleLinear, extent, axisBottom, and axisLeft to render axes and circles, with setters for width, height, data, and value accessors. Data is hardcoded in both components, and rendering uses SVG throughout.

YYash Raj Mathur

Fork of Fork of Fork of React & D3 Starter PIE

This example presents a pie chart visualizing the distribution of students who use AI compared to those who do not, based on a CSV dataset loaded from GitHub. The chart uses d3.pie and d3.arc to generate SVG slices, with d3.rollups aggregating counts from the loaded data. Interactive tooltips display exact student counts and percentages on hover, while percentage labels appear inside each slice and a legend shows category totals. The color scale uses d3.scaleOrdinal with a custom palette.

Mmichael_chuxs@yahoo.com

Fork of Fork of loading data w/ react and d3

A pie chart displays the proportional distribution of named colors, using their RGB hex values for the fill color of each slice. The chart is built with React, which manages the asynchronous loading of a CSV file via `d3.csv` and conditional rendering, while ReactDOM mounts the component. The geometric layout and slice drawing rely on the D3 modules `d3.arc` and `d3.pie`, which compute the arc paths for each data row. The example demonstrates a minimal integration of D3’s data-processing and shape-generation functions within a React component structure, rendered as an SVG graphic.

SSamuele Greco

Fork of Fork of React & D3 Starter

This pie chart visualizes monthly expense categories from a CSV file, displaying each category’s proportional share with a legend and value labels. Built with React and D3 v7, it uses `d3.pie` to compute arc segments and `d3.arc` to generate SVG paths, rendered with a categorical color scheme from `d3.scaleOrdinal`. The chart draws arcs and text labels onto an SVG canvas, with a legend constructed iteratively from the data.

Ppvvaishnavi93@gmail.com

Fork of Fork of Rendering Data with React and D3

This example renders a dataset of CSS named colors as a pie chart, with each slice colored by its corresponding RGB hex value. The visualization loads the data from a CSV file using `d3.csv` and manages the asynchronous state with React’s `useState` and `useEffect` hooks. React renders the SVG paths, while D3’s `pie` and `arc` generators compute the slice angles and path geometry. The chart is centered using an SVG `<g>` transform, and the code includes commented alternatives for manual arc computation.

Fork of Rendering data using react and D3

A colorful pie chart displays CSS named colors as equal-sized slices, with each slice filled using its corresponding RGB hex value from a CSV dataset. The visualization uses React hooks like `useState` and `useEffect` to fetch and manage the data, while D3’s `pie()` and `arc()` functions compute the angular and radial geometry for the SVG paths. The chart is rendered as an SVG element with a centered group transformation, and the color mapping directly applies each data entry’s RGB value to its slice fill.

LLainu Kuruvilla

Fork of Fork of Fork of Rendering Data with React & d3

A radial burst of CSS named colors, rendered as a pie chart where each wedge represents one color from a dataset loaded via `d3.csv`. The React component uses the `useEffect` hook to fetch the data, then `d3.pie` and `d3.arc` compute the wedge geometry, which React renders as SVG `<path>` elements. The fill of each path is set directly from the color’s hex value, creating a full circular spectrum. The visualization demonstrates combining D3’s data-joining utilities with React’s declarative component rendering.

MMd. Jakir Hosen

Fork of Fork of Fork of rendering data with react and d3

This example renders a pie chart of CSS color names loaded from a CSV file, with each slice filled by its corresponding RGB hex value. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to fetch and store the data, then creates the chart with d3’s `pie` and `arc` functions. The SVG is rendered through ReactDOM, with the `pieArc` generator set to an outer radius equal to the chart width.

Mmeghshah612