Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

✓ Published0🌍 Public
YYash Raj Mathur
Last edited Feb 28, 2026
Created on Feb 28, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

This scatterplot visualizes the relationship between study hours and GPA, with each data point represented as a steel-blue circle. The visualization loads a CSV file, converts the study hours and GPA columns to numeric values, and maps them to x and y coordinates using `d3.scaleLinear` functions. It relies on the D3.js library through a React component, drawing the circles directly to an SVG canvas via methods like `d3.select`, `d3.csv`, and `.append`. The x-axis spans zero to twelve hours, while the y-axis covers zero to four for GPA.

Kkoushika.3002@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus exam scores, using a compact D3 v7 script embedded in an HTML page. It displays seven data points as steelblue circles on an SVG canvas, with linear scales mapping hours to x-positions and scores to y-positions, plus labeled axes. The code defines a `scatterPlot` function that appends an SVG, computes scales via `d3.scaleLinear`, draws axes with `d3.axisBottom` and `d3.axisLeft`, and binds data using `selectAll().data().enter()`. The repository also includes a separate React component (index.jsx) that uses `useRef` and `useEffect` to integrate D3 selections, though the plot itself runs standalone.

SSanjayRamaSwamyAdla@my.unt.edu
90% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu
87% match
Loading thumbnail…

A4_ScatterPlot

This example visualizes the relationship between study hours and exam scores using a scatter plot, where each circle represents a student. The data comes from a CSV file loaded with D3’s `d3.csv` method and filtered to exclude zero-value pairs. The SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom`, and `d3.axisLeft` for tick marks, while circles are appended with `d3.selectAll` and `enter`. Interactive tooltips appear on mouseover, displaying the exact hours and scores for each point. All rendering is done with React-compatible vanilla JavaScript and D3 v6.

DDuc Pham
85% match
Loading thumbnail…

Fork of React & D3 Starter

This example displays average scores in Math, English, and Science as rounded, pastel-colored bars, calculated from a 100-student CSV dataset. It uses D3 v7 to load and aggregate the data with `d3.csv` and `d3.mean`. The visualization is built with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes, while SVG elements render the bars, value labels, title, and axis labels. The page layout is styled directly via D3 selections on the body element.

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

Fork of D3 Starter - ice 7 - scatter plot

This scatter plot visualizes the relationship between study hours and exam scores for 120 students, with each point colored by category (A–D) and a legend mapping colors to these groups. The D3 v7 code loads data from a CSV file, converts the numeric columns, and uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart. Axes are labeled, and the plot uses a built-in color scheme (`d3.schemeSet2`).

Vvijaysaichigullapally1@gmail.com
84% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays the relationship between hours studied and exam scores as a scatterplot of blue circles, with the average exam score shown in a summary box above the SVG. The code loads a CSV file from GitHub using `d3.csv`, converts the numeric fields with the unary plus operator, and computes the mean via `d3.mean`. It binds the parsed data to circles using `selectAll` and `data().enter().append`, positioning each point along the x-axis by index and mapping exam scores to the y-axis with a fixed scale.

Mmeangreen0067@gmail.com
84% match