Assignment 3

100%

✓ Published0🌍 Public

Last edited Mar 6, 2026

Created on Mar 6, 2026

Forked from DV A6 T3

This visualization compares average screen time, sleep hours, and GPA across six student groups using a combined bar and line chart. Gray bars represent average screen hours, while blue, green, and red lines depict trends for screen time, sleep, and GPA, respectively. The chart uses D3’s `scaleBand` for categorical x-axes, `scaleLinear` for the y-axis, and `d3.line` to connect summary points. Data is loaded from a CSV via `d3.csv`, grouped into six slices, and aggregated with `d3.mean` to compute group averages.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment task 2

This scatter plot visualizes the relationship between screen hours and sleep hours for individual students, with each point colored by GPA using a sequential plasma scale. The visualization loads CSV data from a GitHub gist via `d3.csv`, then renders circles in an SVG container. It uses `d3.scaleLinear` for both axes, `d3.scaleSequential` with `d3.interpolatePlasma` for color encoding, and includes gridlines, axis labels, and an interactive tooltip that displays RollNo, screen hours, sleep hours, and GPA on mouseover/mousemove. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Eeeshani.boyapati@gmail.com

85% match

Loading thumbnail…

Assignemnt

This bar chart ranks 26 students by their daily screen hours, displaying each roll number on the vertical axis and screen time on the horizontal axis. The bars are sorted in descending order, with black bars that turn steel-blue on hover and a tooltip showing the exact roll number and hours. Built with D3 v7, the visualization loads CSV data via `d3.csv`, uses `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric axis, and renders as SVG with gridlines created through `d3.axisBottom`.

Eeeshani.boyapati@gmail.com

83% match

Loading thumbnail…

grades

This visualization presents a side-by-side bar chart comparing student grades across different sleep patterns, with the bars for each sleep category grouped by grade level. The chart is built using D3.js v7, which loads a CSV file from a GitHub gist, groups the data with the `d3.rollups` API, and scales using `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip that displays the sleep pattern, grade, and count, with the visualization rendered as SVG elements.

Ssarikakannikanti@gmail.com

79% match

Loading thumbnail…

Assignment

This scatter plot visualizes the relationship between students’ study hours per week and their GPA, with each circle representing a single student. The x-axis shows study hours, the y-axis shows GPA, and hover effects increase circle opacity and radius. The visualization loads CSV data from a GitHub Gist, uses d3.csv for parsing, and positions marks with d3.scaleLinear and d3.axisBottom/axisLeft. Grid lines are generated using a modified axis with tickSize, while circle color and size are fixed channels. The chart is rendered as SVG with D3 v7.

HHarshithaAru06

79% match

Loading thumbnail…

final project

This bar chart displays the average student grades (on a 3-point scale where A=3, B=2, C=1) grouped by self-reported stress level, sorted from highest to lowest average grade. The visualization uses D3 v7’s `d3.csv` to load remote CSV data about student grades and mental health, then applies `d3.group` and `d3.mean` to aggregate values. Rendered as SVG rectangles with a `d3.scaleBand` x-axis and `d3.scaleLinear` y-axis, bars change color on hover via CSS.

Ssarikakannikanti@gmail.com

78% match

Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

RRamdas Dheeraj

78% match

Loading thumbnail…

assignment

This visualization shows average student GPA across different majors, using a horizontal bar chart where bar length encodes the numeric value and vertical position distinguishes each category. Built with React and D3 v7, it sorts the data in descending order and maps values to a linear scale for bar width while a band scale positions each major. The bars are rendered as `<rect>` elements with hover effects that adjust opacity and fill color. The chart includes labeled axes, gridlines, and loads CSV data from a GitHub Gist through a custom `useData` hook with `d3.csv`.

HHarshithaAru06

78% match

Loading thumbnail…

grades vs sleep

This grouped bar chart visualizes how students' grades (A, B, C, D, E) correlate with their self-reported sleep patterns (e.g., Good, Fair, Poor). The chart uses a D3.js v7 SVG renderer with `d3.scaleBand` for the categorical axes and `d3.scaleOrdinal` with `d3.schemeSet2` for color. It reads a CSV from a Gist, aggregates counts with `d3.rollups`, and displays a tooltip on hover.

Ssarikakannikanti@gmail.com

78% match