Visualization6D3.js

100%

Visualization6D3.js

✓ Published0🌍 Public

Last edited Apr 24, 2025

Created on Apr 24, 2025

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.

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

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

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

81% match

Loading thumbnail…

Activity6_Task3.2

This scatter plot shows student age and course, with symbols encoding the year of study for each data point. Using D3.js v7, the visualization maps age on the x-axis and course on the y-axis, replacing standard points with circles, squares, triangles, and diamonds for Years 1–4. Data is loaded from a CSV via `d3.csv` and rendered as SVG, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Hovering reveals a tooltip with detailed information about each student.

Nnissisharon61@gmail.com

81% match

Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes survey data from university students, showing the relationship between each respondent's age and their course of study, with points colored by their year of study (Year 1 through Year 4). The visualization uses D3.js v7 to load a CSV file from a GitHub gist and render an SVG chart with a linear x-axis for age and a point scale y-axis for course names. The code applies d3.scaleLinear, d3.scalePoint, and d3.scaleOrdinal to position and color the circles, while interactive tooltips appear on mouseover to display the exact age, course, and year for each data point.

Nnissisharon61@gmail.com

80% match

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

79% match

Loading thumbnail…

Fork of ICE6 snehith

This scatter plot visualizes student outcomes (Dropout, Graduate, or other) based on Age at Enrollment and Course, with color-coding assigned to each outcome category. The plot’s vertical axis is labeled "Gender," and the horizontal axis is labeled "Age_at_enrollment," derived from a CSV dataset loaded via `d3.csv` and parsed with numeric coercion. Rendering uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, `d3.axisLeft` and `d3.axisBottom` for tick marks, and SVG `circle` elements for each data point, with radii fixed at 5 pixels.

Ssai snehith nadipally

78% match

Loading thumbnail…

qu3.6

This scatter plot displays the relationship between age and income across a dataset, with each point colored by gender using a categorical color scale. The visualization loads CSV data from a GitHub repository and uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `schemeCategory10` to map values to positions and colors. The SVG rendering fills the browser window, with axes labeled and styled via D3 selections.

Yyashwanthkirla95@gmail.com

77% match