Skip to main content
SimilarExport ZIP
100%

Assignment 2 Task 3 Scatter Plot

✓ Published0🌍 Public
Lleftymadi
Last edited Jul 12, 2023
Created on Jul 11, 2023
Forked from Hello VizHub

This scatter plot visualizes the relationship between high school ranking, high school strength, student involvement, and student activity levels, with point color encoding student grades (A, B, or other). The SVG visualization loads CSV data via d3.csv, scales the x and y axes with d3.scaleLinear, and renders circle marks using d3 selection joins. Axes are drawn with d3.axisLeft, d3.axisBottom, and styled with custom labels.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 2 Question 5

This example shows a scatterplot of student performance data, with points colored by grade (A, B, or D) and animated to cycle through different x-axis attributes like student activity levels and high school strength. The visualization uses D3’s `csv` loader to fetch data from a GitHub gist and `scaleLinear`, `axisLeft`, and `axisBottom` for axes. A `setInterval` timer updates the plot’s x-value mapping, while SVG circles, text labels, and a custom legend are drawn dynamically. The rendering is SVG-based with animation.

Lleftymadi
82% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This animated scatter plot uses D3.js to visualize high school student data, cycling through four different variable pairs on the x-axis every few seconds. Colored circles represent individual students, with sky blue, light green, and orange indicating grade categories (A, B, and D). The visualization employs the custom `scatterPlot` module, which utilizes D3 scales, axes, and SVG rendering to create the animated chart. Data is loaded from a CSV file hosted on GitHub, and the animation is driven by `setInterval`.

Lleftymadi
80% 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
77% match
Loading thumbnail…

A2Q5

This animated scatter plot reveals relationships between student study habits and academic performance. It cycles through three variable pairings every five seconds, displaying Marks against time_study, then number_courses, using D3 scales and axes. Data comes from a CSV file loaded via d3.csv, with circles redrawn through a custom scatterPlot module. The visualization uses d3.scaleLinear for positioning, d3.axisLeft and d3.axisBottom for axes, and setInterval to trigger updates in the SVG rendering.

MmNamratha25
77% match
Loading thumbnail…

Untitled

A D3.js v4 scatter plot maps student SAT math scores to the x-axis and SAT verbal scores to the y-axis, with circle size encoding ACT scores and fill color representing GPA via a custom color scale interpolating between white and dark teal. The SVG visualization uses d3.scaleLinear for positioning and sizing, d3.axisLeft and d3.axisBottom for tick marks, and binds data from a static JavaScript array of student records, applying semi-transparent fill colors.

MMinaSSaleh
77% match
Loading thumbnail…

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

AArun Pratap
76% match
Loading thumbnail…

Students Performance in Exams Example Scatter Plot

This example visualizes the relationship between reading and math scores for students, using a scatter plot where each point represents an individual student's performance. The SVG markup is rendered with D3 v6, employing `scaleLinear` and `extent` to map data values to pixel coordinates, with `axisLeft` and `axisBottom` providing labeled scales. Data loads asynchronously from a CSV file sourced from Kaggle, and the plot includes custom text labels for axes and a title. Point radius is fixed at three pixels, and axes display scores from zero to one hundred.

Kkwmcclintick
76% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between math and reading scores for individual students, with each point's color indicating whether the writing score exceeds 70. Built with D3 v7, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` with `d3.autoType` to parse the student performance data. Points are rendered as circles with a fixed radius and 70% fill opacity.

RRohith Reddy
75% match