100%

Scatter Plot

✓ Published0🌍 Public

Last edited Sep 15, 2024

Created on Sep 15, 2024

This scatter plot visualizes the relationship between attendance rate and final grade for a student performance dataset, with each circle representing a student. The code uses D3’s `scaleLinear` and `extent` functions to map the data to screen coordinates, while axis labels are generated through the `@curran/axis-labels` package. The plot includes a light gray background rectangle and semi-transparent circles, configured via options like `innerRectFill`, `circleRadius`, and `circleOpacity`. Data is loaded directly from a local CSV file with fields converted to numbers.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

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.

RRamdas Dheeraj

81% match

Loading thumbnail…

StudentPerformanceScatter

This scatter plot visualizes the relationship between math and reading scores for a student performance dataset. Each circle represents a student, positioned by their math score on the x-axis and reading score on the y-axis, with steelblue marks at a radius of five units. The example uses D3’s `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to construct the coordinate system and axes. Data is loaded remotely from a GitHub-hosted CSV file using `d3-fetch`’s `csv` function, with numeric parsing applied to the relevant score columns before rendering to an SVG canvas.

PP Manisha

79% match

Loading thumbnail…

Assignment

This scatter plot visualizes the relationship between students’ study hours per week and their GPA, with each circle representing a single student. The x-axis shows study hours, the y-axis shows GPA, and hover effects increase circle opacity and radius. The visualization loads CSV data from a GitHub Gist, uses d3.csv for parsing, and positions marks with d3.scaleLinear and d3.axisBottom/axisLeft. Grid lines are generated using a modified axis with tickSize, while circle color and size are fixed channels. The chart is rendered as SVG with D3 v7.

HHarshithaAru06

78% match

Loading thumbnail…

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

AArun Pratap

78% match

Loading thumbnail…

GAV Performance : Age vs Mark vs Attendance

This scatter plot visualizes the relationship between student age, attendance, and marks across various GAV animation courses. Each circle’s x-position maps to age, y-position to mark, and radius to attendance, revealing patterns in student performance. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes and circles as SVG elements. Data comes from a CSV file loaded via D3’s `csv` method, with numeric values parsed for plotting.

Ppillliarun79

78% match

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes student grades, with English on the x-axis, physics on the y-axis, and points colored by class category (First, Second, or other). It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale the data from a GitHub-hosted CSV and render axes. The plot is drawn as SVG circles with fixed radius, while additional science and math values are stored per mark but not visually encoded.

Hhemanthmaddila13@gmail.com

77% match

Loading thumbnail…

Activity6_Q3

This scatter plot visualizes a sample of student marks and grades, with each circle representing an individual student’s score plotted along the x-axis. The y-axis is randomized between 0 and 100, and grade labels (‘A’, ‘B’, ‘C’) appear beside each point. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles for the data points. The static dataset is hardcoded in the script, while the rendering uses standard SVG elements appended to a 600×400 canvas.

Tthakurnikhitha4@gmail.com

77% match

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between student age and exam marks across various university courses. Each point represents an average mark for a specific age group within a course, with the x-axis scaled linearly and the y-axis using a band scale for discrete age values. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the SVG chart, with margins and formatting applied to the axes. Data comes from a CSV file containing department, course, age, attendance, and marks columns.

Ppillliarun79

77% match