Skip to main content
SimilarExport ZIP
100%

ice7_task1

✓ Published0🌍 Public
Ddeepakvowel@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from ICE7-q1

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ice7_task2_2

This line chart visualizes the relationship between study hours and exam scores for a small dataset of students. The chart renders a smooth monotone curve through the data points, using blue dots to mark individual observations and a matching blue line to emphasize the overall trend. Built with D3.js v7, the visualization loads CSV data from a GitHub gist, applies linear scales with nice tick marks, and draws axes with labels. The tooltip functionality on hover is implemented but not fully connected in the visible code.

Ddeepakvowel@gmail.com
88% match
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
87% match
Loading thumbnail…

ice7_task3

This area chart visualizes the relationship between hours studied and exam scores from a `studentscores.csv` dataset. The blue area shape, with a monotone-x curve, shows a general upward trend where more study hours correspond to higher exam performance. The visualization is built with D3 v7, using `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.area` with `d3.curveMonotoneX` to render the smooth area. Data points are marked with dots, and a tooltip is implemented for interaction.

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

ICE6-ScatterPlot

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.

Ssahasrakaturi91@gmail.com
86% match
Loading thumbnail…

Scatter Plot Ice 7

This example demonstrates a reusable scatter plot visualizing the relationship between study hours and exam scores. The chart displays 15 data points as circles, with study hours on the x-axis and exam scores on the y-axis, using D3’s linear scales and axis functions. The `scatterPlot.js` module defines a configurable chart with settable width, height, margin, and radius parameters, loaded via `d3.csv` from a GitHub-hosted dataset. The implementation uses D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, with a `join` operation to create the circles.

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

reusable scatter plot Ice 7 harshithaDontha

This gallery example shows a reusable scatter plot that visualizes the relationship between study hours and exam scores for 15 students. The first chart uses circles with a gradient color scale based on exam score, while a second chart (not fully shown in the provided code) appears to continue the exploration. The visualization is built using the D3.js v7 library, leveraging `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and custom shape generators like `d3.symbolTriange` and `d3.symbolDiamond`. Data is local to the code, and the rendering uses SVG with animation.

HHarshithaDontha@my.unt.edu
85% match