Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
DDenise Mauldin
Last edited Dec 11, 2020
Created on Dec 11, 2020
Forked from 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.

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 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.

EEthanscottmyers
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
75% 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
72% 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
71% match
Loading thumbnail…

D3

This example visualizes student attendance records, differentiating by gender and course, with statuses like present, absent, and partial. It uses the D3.js library to load CSV data via `d3.csv` and renders the visualization using the Chart.js library with a horizontal bar chart type. The SVG element on the page is present but not actively used for rendering.

Nnifemi-sys
70% match
Loading thumbnail…

Untitled

This example displays a skeleton of a data visualization using D3 within a React-compatible setup, though it relies on a plain HTML page. It loads a CSV dataset of country populations using `d3.csv` and logs the parsed data to the browser console. The page contains an SVG element and imports `select` and `csv` from D3, but the `select('svg')` call is unused, and no visual output is rendered. The code establishes the initial structure for fetching and inspecting tabular data, with no charts or graphical elements yet.

EEFisher828
70% match
Loading thumbnail…

Final Project - Video Analytics, EdX, 2013

This scatterplot dashboard explores relationships among learner activity metrics—active days, video plays, forum posts, and grade—from the 2013 HarvardX and MITx EdX dataset. Two dropdown menus allow users to select which metrics appear on the x- and y-axes. A categorical color scale encodes gender, and point tooltips show the exact metric values. The visualization is built with React, rendering SVG marks and axes via D3 v5. Data loads from a CSV hosted on GitHub through D3’s `tsv` request.

Ssophburke
70% match
Loading thumbnail…

Sophie's Stylized Scatter Plot v.3

This scatter plot visualizes video views versus grades for HarvardX and MITx courses on EdX during the 2013 academic year. Each circle represents a course participant, with position encoding the number of video plays and final grade. The visualization uses React to render SVG elements, with D3 scales (scaleLinear) handling the x and y axes. Data loads asynchronously from a CSV file via d3.tsv, while axis components and marks are built using React components in the code.

Ssophburke
70% match