Skip to main content
SimilarExport ZIP
100%

Scatter plot

✓ Published1🌍 Public
RRamdas Dheeraj
Last edited Oct 18, 2025
Created on Oct 18, 2025
Forked from HTML Starter

This dark-themed scatter plot visualizes the relationship between hours studied and exam scores for 188 students, with each point colored by attendance percentage using a sequential turbo scale. The visualization loads data from a CSV file and renders it as SVG circles, employing D3 v7 scales for positioning and color encoding. Interactive tooltips display student details on hover, while grid lines and axis labels provide context for the academic performance metrics.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between students’ study hours and their exam scores. The chart uses D3.js v7 to render SVG circles, with a linear scale mapping study hours on the x-axis and exam scores on the y-axis. The data is loaded from a CSV file via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with labels for both variables. The code defines a reusable `createScatterPlot` function that takes data and a container ID, setting fixed margins and a 600x400 pixel drawing area.

Vvishnupriya eupuri
88% match
Loading thumbnail…

StudentScore_ScatterPlot

This scatter plot visualizes the relationship between hours studied and exam scores for ten students. The chart displays a clear positive correlation, with data points plotted on a linear scale for both axes. Built with D3.js v7, the visualization loads data from a CSV file using `d3.csv` and constructs an SVG with `d3.select` and `append`. The code creates scales with `d3.scaleLinear` and renders axes via `d3.axisBottom` and `d3.axisLeft`. The reusable `scatterPlot` function applies steelblue, semi-transparent circles to represent each student's data.

AALIMINETI SPOORTHY REDDY
88% match
Loading thumbnail…

Q2 D3

A scatter plot visualizes the relationship between hours studied and exam scores across 150 students, using D3 v7 to load CSV data and render SVG circles mapped through linear scales. The chart includes labeled axes, a bold title, and semi-transparent steelblue points sized at 4 pixels. Data comes from a local `study_scores.csv` file, with axes and scales configured via `d3.scaleLinear`, `d3.extent`, and `axisBottom`/`axisLeft`.

Ddineshsingiri18@gmail.com
87% match
Loading thumbnail…

question678

A scatter plot displays the relationship between study hours and exam scores for 20 students, using one colored dot per student with a steelblue fill, black stroke, and 70% opacity. The x-axis represents study hours from 0 to 10, while the y-axis shows exam scores from 0 to 100, with axis labels included. Built with D3.js v7, the visualization loads data from a CSV file via `d3.csv`, converts string values to numbers, and renders circles using D3’s data join, `scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for tick marks.

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

Fork of question678

This scatter plot visualizes the relationship between study hours and exam scores for a group of students, using data from a CSV file. Each circle represents a student, positioned by study hours on the x-axis and exam score on the y-axis, with colors assigned via `d3.scaleOrdinal` based on student ID. The visualization uses D3.js v7 to render an SVG, drawing circles and axes with `d3.axisBottom` and `d3.axisLeft`, and labels for each axis.

Kkaushikreddy901@gmail.com
86% match
Loading thumbnail…

Activity 4, Task 4

This scatter plot shows the relationship between hours studied and exam scores for 25 students, where each circle’s radius is randomly assigned between 10 and 40 pixels. The visualization uses d3.csv to load score.csv, then maps the data with d3.scaleLinear for both axes, rendering circles as SVG elements with steelblue fills and 0.7 opacity. Axis labels for “Hours Studied” and “Scores” are added via d3.axisBottom and d3.axisLeft, with the chart drawn inside a 800×500 SVG canvas.

AAnushaHyderaboeni@my.unt.edu
86% match
Loading thumbnail…

Ice7 scatter plot

This scatter plot visualizes exam scores against study hours for 15 students, revealing a clear positive correlation between the two variables. Each point is labeled with its student number, and the axes include descriptive titles. The visualization uses D3 v7 to load CSV data with `d3.csv`, scales the data with `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The reusable `createScatterPlot` function generates an SVG with customizable colors and labels.

HHarshithaDontha@my.unt.edu
85% match