Untitled

100%

✓ Published1🌍 Public

Last edited Dec 11, 2020

Created on Dec 11, 2020

This interactive React application visualizes student academic histories by comparing a selected student’s grades against a database of peers. It displays a table of course history across terms, then generates a Sankey diagram for each course using `d3-sankey` and `sankeyLinkHorizontal`. The Sankey chart flows from course numbers through student cohorts to letter-grade outcomes, aggregating similar students’ performance. The app parses CSV files with PapaParse, queries backend results via axios, and renders SVG graphics within a `VizContainer` that applies standard margins.

AI-generated description

Boilerplate code for a React + D3 visualization with:

CDN links for React, ReactDOM, and D3
Basic React boilerplate
Variables for dimensions and margins
A VizContainer component that:
- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the showMargins={true} prop

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This React application visualizes student academic histories and predicts future course performance by comparing a selected student's grades against peers. It displays a history table of courses by semester and uses a Sankey diagram to show grade distributions across terms for similar courses. The app parses CSV data with PapaParse, queries a backend with axios, and renders the Sankey visualization using d3-sankey with React SVG components.

DDenise Mauldin

95% match

Loading thumbnail…

Untitled

An interactive React-based Sankey diagram visualizes flow data from a remote JSON file, displaying nodes and links with color gradients between source and target. The chart uses D3.js's sankey layout algorithm for node positioning and link calculation, rendered as SVG paths and rectangles. A drag-and-drop interaction lets users reposition nodes in edit mode, while react-spring is available for potential animations. The visualization includes node labels and values, with a color scheme differentiating flow pathways.

CCaparino

76% match

Loading thumbnail…

Untitled

This interactive line chart visualizes student enrollment counts across university modules, with a dropdown menu to select different module groups. It uses D3.js v4 with SVG rendering, mapping module codes on the x-axis and student numbers on the y-axis. The chart reads from a CSV file and employs a color scale from `d3-scale-chromatic`. When a user selects a new module, the line path transitions smoothly to display the updated values over one second.

KKeerthiKandadai

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

73% match

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

73% match

Loading thumbnail…

Sophie's Stylized Scatter Plot v.2

This example shows the relationship between video views and final grades for HarvardX and MITx online courses during the 2013 academic year, sourced from the MITx-HarvardX Dataverse. Each circle represents a student, with position determined by d3.scaleLinear scales mapping video-play counts to the x-axis and grades to the y-axis. The React components render SVG axes and marks, using d3-format’s `.2s` tick formatting to abbreviate large view counts. Loading states display a large "Loading..." text while the data is fetched via d3.tsv from a remote CSV URL.

Ssophburke

73% match

Loading thumbnail…

D3 Test Fork

This visualization plots student grades against video views in a 2013 HarvardX/MITx course dataset. The scatterplot uses a log scale for the x-axis to accommodate data spread, with D3 v5’s `scaleLog` and `scaleLinear`. Built with React and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components. Dots are initially colored a fixed red, though the author notes an intention to color by institution, as seen in the `colorValue` variable and `schemeCategory10` import.

RRoquelaur77

72% match

Loading thumbnail…

SVG

This example shows student marks for individual modules, filtered by student ID through a dropdown menu. It presents a bar chart of marks per module for the selected student, with an animated update when the selection changes. The code uses D3 v5 to load the data with `d3.json`, binds the data to SVG rectangles, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The x and y scales are created with `d3.scaleBand` and `d3.scaleLinear`, respectively. The visualization is a React project but uses vanilla JavaScript and SVG rendering for the chart.

SSurajRepo

71% match