Visualization5D3.js

100%

Visualization5D3.js

✓ Published0🌍 Public

Last edited Apr 24, 2025

Created on Apr 24, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

76% match

Loading thumbnail…

D3: Linked charts

A bar chart displays student grades from a dataset of student IDs and numeric grade values, with each bar representing a student. The visualization uses linked charts to show grades and allows sorting by ascending or descending order. Built with D3.js, it uses SVG rendering with animated bar transitions and axes. The bars are color-coded using hue and saturation, and hovering highlights individual bars to reveal exact grade labels. The data appears to be sample grade records with student IDs, and the chart is designed to compare grade distributions across students.

AAdlopez2016

74% match

Loading thumbnail…

bar chart

This bar chart aggregates student records from a CSV file to display the average math score for each academic department. The visualization uses D3.js v7 with SVG rendering, grouping data via `d3.group` and computing means with `d3.mean`. Bars are positioned using a `scaleBand` for the categorical x-axis and a `scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Hovering over a bar changes its fill color from blue to orange.

Ssainishanthreddyk@gmail.com

73% match

Loading thumbnail…

1

This stacked bar chart visualizes the distribution of grade ranges (from 5.0-6.0 to above 9.0) across six student groups, showing how each grade category contributes to a total of 100% per student. The chart uses d3.stack() to create stacked segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Hovering over a segment triggers a tooltip displaying the exact percentage for that grade range within the selected student group. Data is loaded from a CSV file and rendered as SVG elements.

JJagadeshwar Reddy. Chilakamarri

73% match