phase2Visualization1D3js-Retention by age

100%

phase2Visualization1D3js-Retention by age

✓ Published0🌍 Public

Last edited Apr 26, 2025

Created on Apr 21, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

81% 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…

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

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

76% match

Loading thumbnail…

Age range of genders

This visualization presents age-range distributions for male and female populations using a diverging bar chart, with each gender extending from a central axis. Users can toggle between showing combined totals or gender-separated views and optionally sort the age ranges. The chart is built with D3 v3, rendering as SVG with animated transitions. It loads data from a CSV file, stacks the gender values using `d3.layout.stack`, and maps ordinal age ranges to y-axes, while linear x-scales handle population counts formatted with `d3.format`. Color scales differentiate genders and age ranges, with tooltips providing additional detail.

PPetrando

76% match

Loading thumbnail…

bar chart

This bar chart displays the distribution of males and females across six age groups, ranging from 20 to 50 years, using a pie chart layout. Built with D3.js v7, it fetches CSV data from a GitHub gist, processes the counts by age group and gender, and renders the visualization as SVG. The chart includes a legend showing total counts per age group and uses an interactive tooltip that appears on mouseover to reveal the specific male and female counts for each slice.

RRakesh Kumar Chekuri

75% match

Loading thumbnail…

Visualization4D3.js

This visualization is a heatmap showing the relationship between Gender and Application Mode, using counts derived from a dataset of student records. The chart displays application modes on the y-axis and gender on the x-axis, with color intensity indicating the number of students in each combination. Hovering over a cell reveals the exact count via a tooltip. The code uses D3 v7 to load data with `d3.csv`, aggregate counts via `d3.rollups`, and render the SVG heatmap using `scaleBand` for axes and `scaleSequential` with `interpolateBlues` for color encoding.

GGanesh Gundekarla

75% match