100%

ICE -6 Scatterplot

✓ Published4🌍 Public

Last edited Mar 25, 2024

Created on Mar 20, 2024

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.

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- 7 Line Chart

This line chart shows the relationship between study hours and average total marks, with a single line tracing how marks change as study time increases. The chart uses D3.js v7 to load CSV data from a GitHub gist and render an SVG visualization, employing `d3.line()` to generate the path and `d3.scaleLinear()` for both the x- and y-axes. The data, which includes fields for StudyHours and AverageTotalMarks, is fetched asynchronously via `d3.csv()` and converted to numeric values before plotting. Axes are appended using `d3.axisBottom()` and `d3.axisLeft()`, with the line styled as a steelblue stroke without markers.

Cchalasanigayaetiri@gmail.com

81% match

Loading thumbnail…

ICE-7 - Scatter Plot

This animated scatter plot maps student performance metrics, such as scores in tenth, twelfth, and college, along with time spent, against each other. The plot cycles through different x-axis variables, updating the visualization in a loop, and colors data points by hobby categories: Cinema, Sports, and Others. Built with D3 v6, it uses `d3.csv` to load the data and a custom `scatterPlot` module that constructs axes and circles, rendering the SVG animation with a legend and labels.

AAshrith Kudidhi

79% match

Loading thumbnail…

ICE-7 Line Chart

The ICE-7 Line Chart visualizes the relationship between study hours and average total marks, using a single red line to trace the trend across categorical study-hour values. The chart displays axes with labeled ticks and a linear scale for marks, while the x-axis uses a band scale for study hours. Built with D3 v7, the code loads CSV data via `d3.csv`, applies `scaleLinear` and `scaleBand` for positioning, and renders the line using `d3.line` with SVG paths. The visualization is rendered entirely in SVG, with axes generated by `axisBottom` and `axisLeft`.

Cchalasanigayaetiri@gmail.com

79% match

Loading thumbnail…

ICE -7 reusable scatter plot

This example cycles through a series of scatter plots, showing exam score correlations for each pair of six subjects (Telugu, Hindi, English, Maths, Science, Social). Each plot displays student scores as small, semi-transparent circles, with a new subject pair and color appearing every two seconds. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load the dataset from a GitHub gist. The SVG elements are recreated on each interval to switch the plotted variables.

Cchalasanigayaetiri@gmail.com

77% match

Loading thumbnail…

ICE Bonus Scatter plot

This 3D scatter plot visualizes student performance by plotting English, Science, and History scores against Age and Maths grades. Three distinct marker styles represent each subject, allowing comparison of academic metrics across age groups. The visualization uses Plotly’s `scatter3d` type via the `Plotly.newPlot` API, with data loaded from a CSV file using D3 version 3’s `d3.csv` function. The code defines three traces with customized marker colors, sizes, and opacity levels to differentiate the subjects.

SSamanvitha1

77% match

Loading thumbnail…

ICE 6 scatter plot

This scatter plot displays student grades, plotting English scores on the x-axis against Physics on the y-axis, with each point colored by class category (First, Second, or other). The code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for both axes, and renders circles using SVG. It also encodes additional dimensions through the `rx` and `ry` attributes, mapping Science and Math scores to each circle’s horizontal and vertical radii, while using `d3.axisLeft` and `d3.axisBottom` for labeled axes.

Cchilukuritagore1427@gmail.com

75% match

Loading thumbnail…

ICE Bonus

This example displays a 3D scatter plot showing student scores in English, Science, and History plotted against age and maths achievement. The visualization uses three separate traces, with each subject represented by a distinct color: blue for Science, black for History, and grey for English. The interactive chart is rendered using the Plotly JavaScript library within an HTML interface, with data loaded from a GitHub-hosted CSV file through D3’s `d3.csv` function. Users can rotate and explore the three-dimensional space to examine relationships between the variables.

SSnarasimhap

75% match

Loading thumbnail…

ICE - 6 Scatter Plot

This D3.js scatter plot visualizes student grades from a CSV file, plotting English scores on the x-axis and physics scores on the y-axis, with points colored by class (First class, Second class, or other). It uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. The SVG rendering includes circles sized by a fixed radius, with axis labels for English and science. The code also reads additional metrics (science and maths) into each data point, though these are not directly used for the visual encoding.

Cchilukuritagore1427@gmail.com

75% match