Visualization4D3.js

visualization 7

A bubble chart visualizes the relationship between application mode, dropout rate, and applicant volume. Users see dropout rates on the y-axis and application modes on the x-axis, with bubble size representing applicants and color indicating gender dominance. d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal map the data; d3.axisBottom and d3.axisLeft render axes. The SVG is populated with circle elements, each containing a hover tooltip via d3.append('title').

80% match

Gender - Version 1.2

This interactive sunburst chart visualizes the gender distribution of participants across university modules, rendering hierarchical data as an animated radial diagram. Users toggle between male and female datasets via a dropdown menu, with data loaded from separate JSON files. The visualization highlights selected branches on mouseover, displaying the percentage, raw count, and path breadcrumb in the center. Built with D3 v4’s `d3.partition` and `d3.arc`, it uses color-coded segments to represent academic departments.

KKeerthiKandadai

78% match

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.

76% match

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.

Gender - Version 1.2

This interactive sunburst chart visualizes the post-high school paths of male and female participants, showing the distribution of their choices across Military, School, and Work categories. The visualization reads separate JSON data files for each gender and includes a dropdown menu to switch between them. Hovering over a segment displays the percentage and raw count of participants who followed that exact path, while the breadcrumb trail above updates to show the current sequence. Built with D3 v4, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to construct and render the radial layout with animated updates.

Ttareefroustom

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.

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.

Gender - Version 1.2

This interactive sunburst chart displays the post-high-school paths of male and female participants, showing transitions between military, school, work, and unknown statuses across three levels. A dropdown menu switches between male and female datasets, each loaded from separate JSON files. Built with D3 v4, the visualization uses `d3.partition` and `d3.arc` for the radial layout, and mouseover events highlight the selected path while fading others, updating the breadcrumb trail and displaying the percentage and raw count.

KKeerthiKandadai