Fork of Fork of React & D3 Starter

100%

Fork of Fork of React & D3 Starter

✓ Published0🌍 Public

Last edited May 29, 2026

Created on May 29, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

86% 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

83% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter LINE cHART

This line chart compares average student grades before and after AI usage across age groups, using two colored lines with circular markers for each data point. Hovering over a marker displays a tooltip with the exact age and grade value. The visualization loads CSV data from a GitHub repository, processes it with `d3.rollups` and `d3.mean` to aggregate averages per age, and renders the chart as SVG using `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. A custom legend distinguishes the two grade series.

Mmichael_chuxs@yahoo.com

81% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

A bar chart compares average grade improvement across AI tool purposes, with each bar height representing the mean grade change for that category. The chart highlights how different reasons for using AI correspond to varying academic outcomes. Built with D3 v7, it loads CSV data via `d3.csv`, aggregates values using `d3.rollups` and `d3.mean`, and scales axes with `d3.scaleBand` and `d3.scaleLinear`. Rendered as SVG, bars include hover tooltips for detail, and the chart is sorted from highest to lowest average improvement.

Mmichael_chuxs@yahoo.com

80% match

Loading thumbnail…

Fork of React & D3 Starter

This scatter plot visualizes the relationship between student study hours and exam marks, with a summary showing total students and averages. It uses D3 v7’s `d3.csv` to load data, `scaleLinear` for axes, and `d3.axisBottom`/`axisLeft` for the coordinate system. The React wrapper (index.jsx) renders an SVG, while the standalone HTML version draws semitransparent steelblue circles for each student. Data comes from a raw GitHub CSV file hosted by the author, and the chart includes axis labels for hours and marks.

YYash Raj Mathur

80% match

Loading thumbnail…

Fork of React & D3 Starter

This example presents a small dashboard that loads a CSV dataset, displays summary statistics (approximate file size, row count, and column count), and renders a simple bar-chart-like SVG picture. The page uses D3’s `csvParse` to read the data from a GitHub Gist, then updates the HTML stat cards and draws rectangles with `d3.select`’s `.join` API. The SVG bars are based purely on row index, not on data values, making the visualization a generic shape demo. The code is plain JavaScript within an HTML file, using D3 v7.

Ppvvaishnavi93@gmail.com

79% match

Loading thumbnail…

Fork of Fork of Interactive pie and bar

This interactive dashboard combines a pie chart and bar chart to compare the top 5 countries across teaching, research, and citations. Hovering over a bar updates the pie chart and legend to display the corresponding data breakdown. Built with React and D3 v3, it uses SVG rendering with animations via `transition().duration(500)` to smoothly update bar heights and colors. The data is processed from a JavaScript object containing frequency values for each category.

JJerlineJJ

79% 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

79% match