Fork of STUDENT'S SPORTS DATA VIZ

100%

Fork of STUDENT'S SPORTS DATA VIZ

✓ Published0🌍 Public

Last edited Oct 18, 2025

Created on Oct 18, 2025

This scatter plot compares students’ Team Scores against their Subject Scores using a two-axis layout, with blue circles representing data points that animate from zero radius to full size. The visualization loads tab-separated data from a remote gist, parses it with `d3.text`, and renders the SVG using D3 v7 scales and axes. Hover interactions change circle color and size while displaying score details in a tooltip, and the chart includes labeled axes and a title.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

STUDENT'S SPORTS DATA VIZ

This scatter plot visualizes the relationship between students' subject scores and team scores. Each data point is rendered as a circle, with blue circles animating in from a zero radius via a D3 transition, and hovering turns a point red while displaying a tooltip with both scores. The visualization uses D3 v7 scales and axes (d3.scaleLinear, d3.axisBottom, d3.axisLeft) to map the tab-separated dataset fetched with d3.text. SVG elements provide the interactive chart, including animated point entry and mouse-based interactivity.

TTejasriKari@my.unt.edu

91% match

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

This visualization compares individual students’ subject scores with the average score for each favorite subject. Orange bars animate upward from zero on load, while sky-blue bars overlay the average per subject; hovering turns bars red with a tooltip showing the exact score. Built with D3 v7, it uses `d3.text` to load tab-separated data, `d3.rollup` to compute means, and `scaleBand`/`scaleLinear` for axes. The SVG renders with transitions, axis labels, and rotating x-axis text.

SSYAM TEJ

91% match

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

This visualization displays individual student subject scores as orange bars alongside skyblue bars representing the average score for each favorite subject. The bar chart animates upward on load using D3 transitions, with hover interactions changing bar color and showing a tooltip with the exact score. The code uses d3.text to load tab-separated data from a GitHub gist, d3.rollup to compute means, and d3.scaleBand with d3.axisBottom and d3.axisLeft to render the SVG chart.

SSYAM TEJ

90% match

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

A bar chart displays the average score for each favorite subject, derived from a CSV dataset via `d3.csv` and aggregated with `d3.rollup`. Bars animate upward from the baseline using `transition().duration(900)`, and hover interactions change fill color and show a tooltip. The visualization uses D3 v7 with SVG rendering, including axes generated by `d3.axisBottom` and `d3.axisLeft`, while subject labels are rotated for clarity. The title and axis labels are added as SVG text elements, and all data is filtered for valid subject and score entries before aggregation.

SSYAM TEJ

89% match

Loading thumbnail…

Fork of STUDENT'S SPORTS DATA VIZ

This visualization displays student test scores across favorite subjects, combining an animated orange bar chart with a static skyblue overlay showing average scores per subject. The code loads tab-separated data from a GitHub gist via `d3.text`, parses it into objects, and uses `d3.rollup` to compute subject means. It renders SVG bars with transitions, axes via `d3.axisLeft` and `d3.axisBottom`, and includes hover tooltips using D3 event handlers. The chart animates bars rising from the baseline using `.transition()`, and tooltips display individual subject and score data.

TTejasriKari@my.unt.edu

88% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Subject Scores and Team Scores, with each point colored by its subject score and hover interactions revealing exact values via a tooltip. The visualization uses D3 v6 to load TSV data from a GitHub gist, apply linear scales for both axes, and render SVG circles. Grid lines aid readability, while axis labels clarify the metrics. The code leverages `d3.tsv`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and `d3.axisBottom`/`d3.axisLeft` for chart construction.

TTejasriKari@my.unt.edu

84% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes a student sports dataset, showing a bar chart of team counts alongside text statistics for total students, unique subjects, and the top team. The code uses `d3.csv` with `d3.autoType` to fetch and parse the data, then `d3.rollups` with `d3.descending` to compute team frequencies. An SVG bar chart is rendered using `d3.scaleBand` and `d3.scaleLinear`, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. The page structure and styling come from the accompanying `index.html`, `styles.css`, and `script.js` files.

SSYAM TEJ

84% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes student and sports data from a CSV file, displaying key statistics such as total student count, unique favorite subjects, and the top team. It presents these findings in a simple SVG bar chart that shows team counts, with axes labeled using D3's `d3.axisBottom` and `d3.axisLeft`. The data is loaded via `d3.csv` and processed using `d3.rollups` and `d3.scaleBand`, resulting in an accessible chart with a summary section and rotated x-axis labels for readability.

SSYAM TEJ

84% match