Fork of React & D3 Starter

100%

Fork of React & D3 Starter

✓ Published1🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

91% match

Loading thumbnail…

Fork of React & D3 Starter

This pie chart visualizes monthly expenses across five categories: Rent, Food, Travel, Shopping, and Bills. The visualization uses D3 v7 to create an SVG-based donut chart with category labels positioned along the arcs and a legend displaying each category's name and corresponding value. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette to compute arc paths, position labels, and assign colors based on data loaded from a CSV file.

Ppvvaishnavi93@gmail.com

87% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows the distribution of four school subjects—Math, Science, English, and History—as a static pie chart rendered in SVG. It uses d3.pie and d3.arc to compute slice geometry and d3.scaleOrdinal with d3.schemeCategory10 to assign categorical colors. Labels are positioned at each slice’s centroid, and a custom legend is built with HTML spans in a separate div. The accompanying React component uses a useEffect hook to update text via d3.select, demonstrating a minimal integration of React with D3.

SSanjayRamaSwamyAdla@my.unt.edu

85% match

Loading thumbnail…

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

85% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com

84% match

Loading thumbnail…

Fork of Rendering data with React

A pie chart displays CSS named colors as individual slices, with each slice filled using the color’s hex value from a CSV dataset loaded via `d3.csv`. The React component uses `useState` and `useEffect` to fetch and store the data, while `d3.pie` and `d3.arc` compute the arc paths rendered as SVG `<path>` elements. A loading fallback shows text until the data arrives, and the chart is centered within a fixed 960 by 500 viewport.

BbeauMarko

84% match

Loading thumbnail…

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

84% match

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

A React and D3 pie chart renders four slices with a color scale interpolated from #eaaf79 to #bc3358 using d3.interpolateRgb. The chart uses d3.pie() and d3.arc() to compute and draw each SVG path, with inner and outer radii defining a donut shape. A secondary component defines a checkered color ramp from #0F8C79 to #f2f2f2, though it is commented out. Unused legend data for five named categories is declared but not rendered.

Yyingzhe-z

84% match