Skip to main content
SimilarExport ZIP
100%

ICE Bonus Scatter plot

✓ Published1🌍 Public
SSamanvitha1
Last edited Jul 7, 2022
Created on Jul 6, 2022
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

ICE Bonus

A three-dimensional scatter plot displays the relationship between height, weight, and age for individuals in a dataset. Each point represents a person, with size and opacity fixed, while colored markers show the three variables on the x, y, and z axes. The visualization uses Plotly’s `newPlot` function to render the `scatter3d` trace, and D3’s `d3.csv` method loads the data from a remote GitHub gist. The layout margin is set to zero for a clean, focused view.

DDINESH SAI BOPPANA
81% 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
80% 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
80% 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
80% 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
78% match
Loading thumbnail…

ICE Bonus

This 3D scatter plot visualizes three axes labeled A, Z, and Y, with points rendered in an interactive plotly chart. The example demonstrates how to embed a Plotly visualization using the `plotly-2.9.0.min.js` CDN library alongside an older D3 version 3.5.17. While the HTML structure creates the chart container, the accompanying JavaScript file imports `select` from D3 version 7 to output text, showing a mixed-version workflow. The visualization itself relies on Plotly’s 3D rendering capabilities rather than custom D3 drawing.

SSamanvitha1
78% match
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
77% match