Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

✓ Published0🌍 Public
Kkarthikpavan1198@gmail.com
Last edited Mar 29, 2026
Created on Mar 29, 2026
Forked from React & D3 Starter

This pie chart shows the distribution of exercise levels across 100 individuals, categorizing weekly exercise hours into low, medium, and high groups. The code uses d3.csv to load lifestyle data, d3.pie and d3.arc to generate the slices, and d3.scaleOrdinal for the color scheme. SVG elements render the chart with percentage labels positioned via labelArc centroids, alongside a legend displaying category counts. The visualization applies d3.js v7, featuring a clean white background, shadow effects, and cursive typography throughout.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

A scatterplot visualizes the relationship between exercise hours and productivity scores for 100 individuals. The SVG chart uses blue circles to represent each data point, with exercise hours on the x-axis and productivity scores on the y-axis. The code loads health_productivity_100.csv using `d3.csv`, then applies `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and dashed gridlines. The chart includes a cursive title and axis labels rendered with D3's SVG text elements.

Kkarthikpavan1198@gmail.com
85% match
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
85% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Kkarthikpavan1198@gmail.com
84% match
Loading thumbnail…

Fork of React & D3 Starter

This example visualizes daily fitness activity trends over 150 days, comparing steps walked, calories burned, and active minutes as multi-line charts within a single SVG. Using React 19 and D3 v7, it parses CSV data with `d3.csv`, scales values with `d3.scaleLinear`, generates paths with `d3.line`, and renders `d3.axisBottom` and `d3.axisLeft` axes. The visualization includes a title, legend, and styled background, with active minutes scaled 100x for visibility.

Kkarthikpavan1198@gmail.com
84% 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
83% match
Loading thumbnail…

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

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

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Ssahithya.voleti@gmail.com
82% match