phase2VISUALIZATION2

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.

83% match

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.

82% match

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.

79% match

Reusable D3 Scatter Plot

This example shows a pie chart representing the number of subjects each student has enrolled in, with color-coded slices, labels, and a legend. The visualization loads student data from a CSV file via `d3.csv`, and maps it to pie geometry using the `d3.pie` and `d3.arc` generators. Slices are rendered as SVG paths with a `d3.scaleOrdinal` color scale, while labels and legend items are positioned using arc centroids and fixed translations. The chart uses D3 v7 and renders within an SVG container.

Vvishnupriya eupuri

77% match

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.

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.

Pie chart

This pie chart displays employee attrition proportions from a CSV dataset, showing the distribution between two categories. The visualization uses D3 v7’s `d3.pie` and `d3.arc` to generate SVG path segments, with a color scale mapping category labels to distinct hues. A custom tooltip appears on mouseover, revealing exact counts, while a legend with colored rectangles and text labels identifies each slice. Data aggregation relies on `d3.rollup` to count occurrences by the Attrition field, and the chart is rendered at a fixed 500x500 pixel SVG size with a centered group transform.

TTejasriKari@my.unt.edu

Assignment 7 part 2

This pie chart displays the distribution of students across two groups, with each slice sized by student count and labeled with numeric totals. The visualization uses D3.js v7 to load student_scores.csv, process the data with d3.rollups and d3.pie, and render SVG paths via the d3.arc generator. A categorical color scale distinguishes the groups, while a legend identifies slice colors, and labels are positioned using arc.centroid. The result provides an immediate comparison of group sizes from the dataset.

AAriful Hasan