Skip to main content
SimilarExport ZIP
100%

phase2Visualization3

✓ Published0🌍 Public
GGanesh Gundekarla
Last edited Apr 21, 2025
Created on Apr 21, 2025
Forked from HTML Starter

This example presents a static D3.js (v7) SVG scatter plot that visualizes the relationship between a student's age at enrollment and their first-semester grade, with data points colored by retention status (Retained, Dropped, or Enrolled). The visualization uses the `d3.csv` data loading API to read the dataset and the `d3.scaleLinear` and `d3.scaleOrdinal` functions to map age and grade to x/y coordinates and retention status to color. Hovering over a circle triggers a mouseover event that uses the `d3.select` API to show a tooltip with the exact age, grade, and status values. The chart includes labeled x- and y-axes ('Age at Enrollment' and '1st Semester Grade') generated using the `d3.axisBottom` and `d3.axisLeft` APIs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Visualization6D3.js

This scatter plot visualizes the relationship between student age at enrollment and first-semester grade, with points colored according to gender and retention status (retained versus dropped). Each dot encodes a single student record from the dataset, and hovering reveals precise age, grade, and gender values through a tooltip. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` for categorical coloring, and `d3.axisBottom` and `d3.axisLeft` for the coordinate system. A static HTML legend outside the SVG explains the four color-coded groups.

GGanesh Gundekarla
90% match
Loading thumbnail…

phase2Visualization1D3js-Retention by age

This chart shows the total number of students grouped by gender, with blue bars for males and red bars for females. It uses the d3.csv method to load the dataset, then d3.rollups to count occurrences per gender before mapping values to bars. The visualization is rendered as SVG, with d3.scaleBand and d3.scaleLinear for positioning, plus interactive tooltips triggered by mouseover events. Data comes from the provided dataset.csv file, which includes academic and demographic records.

GGanesh Gundekarla
82% match
Loading thumbnail…

phase2VISUALIZATION2

This interactive pie chart visualizes student retention outcomes, breaking down the target variable into two categories: "Retained" and "Dropped." The visualization uses a D3.js v7 SVG rendering with animated hover effects that expand the selected arc segment. The tooltip reveals the exact student count and percentage for each outcome. Data is loaded from a CSV file containing student enrollment attributes, with the target column automatically identified as containing only binary values. The chart employs D3's pie layout, arc generator, and ordinal color scale for categorical distinction.

GGanesh Gundekarla
82% match
Loading thumbnail…

visualization7D3.js

This multi-line chart displays the average first-semester grade by age at enrollment, with separate lines for male and female students. The visualization uses D3.js v7 to load the dataset via `d3.csv`, clean and aggregate the data with `d3.rollups` and `d3.mean`, and render the chart as an SVG. Points along each line include interactive tooltips showing gender, age, and average grade. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend distinguishes the two gender groups.

GGanesh Gundekarla
81% match
Loading thumbnail…

Activity6_Task3.2

This scatter plot shows student age and course, with symbols encoding the year of study for each data point. Using D3.js v7, the visualization maps age on the x-axis and course on the y-axis, replacing standard points with circles, squares, triangles, and diamonds for Years 1–4. Data is loaded from a CSV via `d3.csv` and rendered as SVG, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Hovering reveals a tooltip with detailed information about each student.

Nnissisharon61@gmail.com
81% match
Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes survey data from university students, showing the relationship between each respondent's age and their course of study, with points colored by their year of study (Year 1 through Year 4). The visualization uses D3.js v7 to load a CSV file from a GitHub gist and render an SVG chart with a linear x-axis for age and a point scale y-axis for course names. The code applies d3.scaleLinear, d3.scalePoint, and d3.scaleOrdinal to position and color the circles, while interactive tooltips appear on mouseover to display the exact age, course, and year for each data point.

Nnissisharon61@gmail.com
80% match
Loading thumbnail…

Visualization3D3.js

This visualization shows student retention outcomes grouped by course, comparing the number of retained students against those who dropped out for each academic program. The data comes from a CSV dataset with a "Target" column indicating dropout or graduation status. The implementation uses D3.js v7 with SVG rendering, employing `d3.rollups` to aggregate counts, `d3.scaleBand` for the grouped bar layout, and `d3.axisBottom` and `d3.axisLeft` to generate axes. Interactive tooltips appear on mouseover, highlighting individual bar values and highlighting the hovered bar with a color change.

GGanesh Gundekarla
77% match
Loading thumbnail…

activity6_Task4

This visualization is a bubble chart that shows the relationship between student age, course, CGPA, and year of study, using data from a mental health survey. The x-axis maps age, the y-axis maps course, bubble size represents CGPA, and color distinguishes year of study. D3 v7 API calls such as `scaleLinear`, `scalePoint`, and `scaleOrdinal` are used to position and style the circles, while `d3.csv` loads the data and `d3.axisBottom` and `d3.axisLeft` render the axes. The chart is rendered as an SVG with a tooltip for interactivity.

Nnissisharon61@gmail.com
77% match