Visualization3D3.js

100%

Visualization3D3.js

✓ Published0🌍 Public

Last edited Apr 24, 2025

Created on Apr 24, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualization5D3.js

This example uses a grouped bar chart to show how scholarship status relates to student retention outcomes (Retained, Dropped). The visualization displays counts of students by scholarship status and final outcome, using color to distinguish between the two outcome categories. Built with D3.js v7, the chart loads data from a CSV file and uses `d3.rollups` and `d3.group` to aggregate and structure the data, while `d3.scaleBand` and `d3.scaleLinear` handle the axes. Interactive tooltips appear on hover, revealing exact counts for each category.

GGanesh Gundekarla

84% 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

83% match

Loading thumbnail…

visualization9d3

This stacked bar chart displays the count of students by their final academic outcome (Dropout, Graduate, or Enrolled), with each bar segmented by gender (Male or Female). The visualization uses D3 v7 to load CSV data via `d3.csv`, aggregate counts, and render SVG rectangles through `d3.stack` and `d3.scaleBand`. Interactive tooltips appear on mouseover, showing the exact count per gender and outcome. The chart includes axes labeled “Target Outcome” and “Number of Students,” with a categorical color scale assigning blue to males and orange to females.

GGanesh Gundekarla

81% match

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

79% match

Loading thumbnail…

phase2Visualization3

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.

GGanesh Gundekarla

77% match

Loading thumbnail…

D3

This example visualizes student attendance records, differentiating by gender and course, with statuses like present, absent, and partial. It uses the D3.js library to load CSV data via `d3.csv` and renders the visualization using the Chart.js library with a horizontal bar chart type. The SVG element on the page is present but not actively used for rendering.

Nnifemi-sys

73% 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

73% match

Loading thumbnail…

Fork of Fork of ICE6 snehith

This scatter plot visualizes student dropout and graduation outcomes from a Portuguese higher-education dataset, plotting Age at Enrollment against Course while encoding Gender and Tuition Fees Up to Date as rectangle corner radii. Each student appears as a colored circle—blue for Dropout, yellow for Graduate, red for Enrolled—using D3 v6 scales and SVG rendering. The code loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and generates axes with `axisLeft` and `axisBottom`. University of Minho records are drawn from a GitHub-hosted CSV, with custom margin and window-sized SVG dimensions.

Ssai snehith nadipally

73% match