Skip to main content
SimilarExport ZIP
100%

ICE6-ScatterPlot

✓ Published0🌍 Public
Ssahasrakaturi91@gmail.com
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from D3 Starter

This scatter plot visualizes student exam performance by plotting hours studied against previous scores, with each dot color-encoded by sleep hours using a sequential turbo scale. The visualization includes interactive tooltips that display additional student details on hover, along with gridlines and rotated axis labels for readability. The code uses D3 v7 with an SVG rendering approach, loading CSV data via `d3.csv` and `d3.autoType` to coerce values, then applying `d3.scaleLinear` for axes, `d3.scaleSequential` for color mapping, and `d3.axisBottom`/`d3.axisLeft` for chart elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6_TASK_2

This example renders a scatter plot of student exam data, showing hours studied against previous scores while using sleep hours to drive a sequential turbo color scale. The visualization, built with React and D3 v7, loads CSV data from a remote GitHub gist and renders points as SVG circles. Hover interactions display a tooltip with each student’s attendance percentage and other attributes. The chart uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisLeft` with gridlines to structure the plot.

Ssahasrakaturi91@gmail.com
92% match
Loading thumbnail…

Ice 6 Scatter_data

This scatter plot visualizes the relationship between study hours and exam scores, with each point representing a student. The chart reveals a curved pattern where scores initially rise with study hours, peak around 48 hours, then decline, suggesting diminishing returns. Built with D3 v7, the visualization loads data from a CSV file and renders circles as SVG elements. The code uses `d3.csv` to parse the data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate the scales.

HHarshithaDontha@my.unt.edu
89% match
Loading thumbnail…

Ice6 q2

This scatter plot visualizes the relationship between hours studied and exam scores using a dataset of student performance factors from a GitHub-hosted CSV file. It shows individual data points as orange, semi-transparent circles, with hours studied on the x-axis and exam scores on the y-axis. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The chart is rendered as an SVG, with circles positioned using the mapped coordinates.

Hh.harrycoding@gmail.com
88% match
Loading thumbnail…

ICE 7 Reusable scatter plot

This reusable scatter plot shows the relationship between study hours and exam scores, with each point representing a student’s performance. The D3.js component implements chainable accessors for configurable dimensions, margins, labels, and title, using `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to generate SVG axes. Data is loaded from a CSV file and rendered as green circles, demonstrating a modular approach to building interactive charts with d3.v7.

HHarshithaDontha@my.unt.edu
87% 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
87% match
Loading thumbnail…

ice7_task1

This example presents two interactive scatter plots comparing student performance metrics: hours studied versus exam score, and sleep hours versus exam score. Using D3 v7, the visualization displays data points as circles with tooltips showing details on hover. The code implements a reusable `ScatterPlot` function that builds SVG charts with linear scales, axes, and axis labels, while reading data from `studentscores.csv`. Dark tooltips with rounded corners provide additional context for each data point.

Ddeepakvowel@gmail.com
86% match
Loading thumbnail…

ICE 71 MD

A reusable D3.js scatter plot displays the relationship between study hours and exam scores for roughly one hundred students, revealing a generally positive correlation with some variance. Built with D3 v7, the chart uses a factory function returning a chart that can be applied to different data selections, with `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is loaded via `d3.csv` from a local CSV file, with numeric fields parsed and rendered as semi-transparent steelblue circles in SVG.

Ddandamidhun41613@gmail.com
85% match
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
85% match