Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot Ice 7

✓ Published0🌍 Public
HHarshithaDontha@my.unt.edu
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from Scatter Plot Ice 7

This reusable scatter plot visualizes the relationship between study hours and exam scores using a green circular mark for each data point. Built with D3 v7, the visualization implements a functional chart factory pattern with configurable accessor functions for x and y values, margins, dimensions, and point radius. The chart renders SVG axes via `d3.axisBottom` and `d3.axisLeft`, with linear scales computed using `d3.scaleLinear` and `d3.extent` on the loaded CSV dataset. The modular design allows the plot to be easily reused with different datasets.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
92% match
Loading thumbnail…

Ice 7 Scatter plot harshitha dontha

This reusable scatter plot shows the relationship between study hours and exam scores, with each point representing a student. The chart uses d3.scaleLinear for both axes and renders circles via SVG. The code demonstrates a modular chart function pattern, loading data from a CSV file and displaying axes with d3.axisBottom and d3.axisLeft. The visualization also includes a separate implementation that supports custom symbol shapes and color encoding through d3.symbol and d3.scaleOrdinal.

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

Fork of Reusable D3 Scatter Plot - vijq1

This example presents a reusable scatter plot that visualizes the relationship between study hours and exam scores, with points colored by four categories (A through D). Built with D3 v7, the chart uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeSet2` for categorical coloring, and `axisLeft`/`axisBottom` for labeling. A legend is rendered manually, while the `scatterPlot` module follows the “Towards Reusable Charts” pattern with chainable setters. The data comes from an external CSV file, parsed with numeric conversion before rendering as SVG circles.

Vvijaysaichigullapally1@gmail.com
87% 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
87% match