100%

Fork of ICE -6 Scatterplot

✓ Published0🌍 Public

Last edited Apr 29, 2024

Created on Apr 29, 2024

This scatter plot visualizes the relationship between study hours and total marks for students, where each point represents an individual's performance. The visualization uses the Plotly.js library via its `Plotly.newPlot` API to render an interactive chart, fetching its data asynchronously from a remote CSV file hosted on GitHub Gists. The plot shows study hours on the x-axis and total marks on the y-axis, with green markers sized at 8 pixels, and includes customized axis ranges and tick intervals for clearer data presentation.

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…

ICE -6 Scatterplot

This scatter plot visualizes the relationship between study hours and total marks for individual students, with each green marker representing one student's performance. The plot uses Plotly's JavaScript library, fetching data from a remote CSV file hosted on GitHub Gists and parsing it client-side. The x-axis displays study hours on a linear scale from 0 to 10, while the y-axis shows total marks ranging from 300 to 600, allowing viewers to identify patterns between study time and academic achievement. The visualization employs Plotly's `newPlot` function to render the interactive chart within an HTML container.

Cchalasanigayaetiri@gmail.com

89% match

Loading thumbnail…

Fork of 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.

HHarshithaDontha@my.unt.edu

80% 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

77% 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

77% 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

77% match

Loading thumbnail…

Fork of Responsive Scatter Plot

This scatter plot visualizes the relationship between total marks and study hours for ten students, with each point representing an individual’s academic performance. The canvas-based rendering maps study hours on the x-axis and total marks on the y-axis, using scaled coordinates to fit the data. The code explicitly draws axes, tick marks, and labels using the Canvas 2D API, while data points are plotted as blue circles. The visualization demonstrates a manual implementation of scatter plot construction, without relying on external charting libraries, instead using native JavaScript and Canvas methods for all drawing operations.

Cchalasanigayaetiri@gmail.com

76% 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

76% match

Loading thumbnail…

ICE62MD

A scatterplot shows the relationship between weekly study hours and exam scores for 100 students, revealing a generally positive correlation. Each orange point represents a student and displays a tooltip with exact hours and score on hover. Built with D3 v7, it uses `d3.csv`, linear scales, SVG circles, `d3.axisBottom` and `d3.axisLeft`, and mouse event handlers for interactive tooltips.

Ddandamidhun41613@gmail.com

76% match