Skip to main content
SimilarExport ZIP
100%

Fork of STUDENT'S SPORTS DATA VIZ

✓ Published4🌍 Public
TTejasriKari@my.unt.edu
Last edited Mar 26, 2025
Created on Mar 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
95% 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
93% 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
92% match
Loading thumbnail…

Fork of STUDENT'S SPORTS DATA VIZ

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.

SSYAM TEJ
88% match
Loading thumbnail…

Fork of HTML Starter

This bar chart displays the average subject score for each favorite subject, with bars animating upward on load. Hovering over a bar turns it red and shows a tooltip with the exact value. Using D3 v7, the visualization fetches DSV data from a gist, parses it with `d3.dsvFormat`, aggregates values via `d3.rollup` and `d3.mean`, and renders an SVG with `scaleBand` and `scaleLinear` axes. Interactive transitions use `transition().duration()`, while mouse events update tooltip visibility and bar color.

SSYAM TEJ
85% match
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
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

A bar chart displays average marks per subject, computed from a CSV dataset of student scores. The visualization uses D3.js v6 to load the data, calculate averages with `d3.mean`, and render SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels and a title. Bars turn orange on hover through CSS, and the chart includes rotated x-axis tick labels and clear axis annotations.

Vvenigallajaanu@gmail.com
82% 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
82% match