Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of React & D3 Starter PIE

✓ Published1🌍 Public
Mmichael_chuxs@yahoo.com
Last edited May 29, 2026
Created on May 29, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Starter

This dashboard visualizes student AI usage data, showing how study habits, grades, and screen time relate to the adoption of tools like ChatGPT, Copilot, and Gemini. It presents four coordinated views—a pie chart, bar chart, scatter plot, and line chart—built with React 19 and D3 v7. Data is loaded from a remote CSV using `d3.csv` and processed with D3's array methods. Each chart is rendered by separate functions, `drawPieChart`, `drawBarChart`, `drawScatterPlot`, and `drawLineChart`, which use D3 selections and scales to encode the dataset's variables.

Mmichael_chuxs@yahoo.com
86% 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
86% match
Loading thumbnail…

Fork of D3 Starter

This example shows a pie chart of student marks distribution, with each slice labeled by the student’s name. It loads CSV data from a GitHub repository, parses the marks as numbers, and uses `d3.pie()` to compute slice angles and `d3.arc()` to generate SVG path shapes. The chart applies a categorical color scale (`d3.schemeCategory10`) and positions labels using `arc.centroid()`. The visualization renders in SVG within a 500×400 viewport, using D3 v7 loaded via an import map.

Ccsesomarajuaswini@gmail.com
85% 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 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 Fork of Fork of Fork of React & D3 Starter Scatter plot

This scatter plot shows the relationship between daily study hours and grade change for students, comparing those who use AI against those who do not. The D3.js v7 code loads CSV data via `d3.csv`, filters incomplete records, and renders SVG circles colored by AI usage with an ordinal scale. Interactive tooltips appear on mouseover, while axes and a legend are generated using `d3.axisBottom`, `d3.axisLeft`, and scale functions for linear positioning.

Mmichael_chuxs@yahoo.com
85% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart student dataset

This fork of ICE-7 visualizes student GPA and study-time data from a CSV file as a pie chart rendered in SVG using D3 v5. Each pie slice represents a GPA value, with text labels showing the GPA and a legend mapping slice colors to student time values. The code loads data via `d3.csv`, computes arc paths with `d3.arc()`, and uses `d3.scaleOrdinal` for category coloring. The chart is embedded in a React starter HTML page, with styling applied via CSS classes.

Ssushmithameher-patnam
84% 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
84% match