Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
SSYAM TEJ
Last edited Oct 5, 2025
Created on Oct 5, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a student data dashboard that loads a CSV file containing student names, ID numbers, color codes, favorite subjects, and team names. It displays summary statistics for total students, unique subjects, and unique teams, alongside a bar chart showing team membership counts rendered with D3 v7's `d3.rollups` and `scaleBand`/`scaleLinear` APIs. The page also features color swatch cards and a preview table, with data fetched via the `d3.csv` method and custom canvas rendering for the SVG bar chart.

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

Fork of HTML Starter

This scatter plot visualizes cricket player statistics from a CSV file containing attributes like runs, matches, and strike rate. It uses D3 v7 to render an SVG chart, automatically detecting numeric columns to map to X and Y axes. The visualization includes axes with labels, colored dots that represent categorical groupings when present, and an interactive tooltip that displays data values on hover. The chart uses d3.scaleLinear for axis scaling, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.axisBottom and d3.axisLeft for axis generation. Data is loaded from an external CSV URL via a Gist.

Ssharathchandrareddymuthyam
84% match
Loading thumbnail…

Fork of HTML Starter

This bar chart displays the value of each category, sorted in descending order. Built with D3 v7, it loads data from a CSV file via a Gist URL using `d3.csv` and `d3.autoType`. The visualization uses a band scale for categories, a linear scale for values, grid lines, rotated axis labels, and a tooltip that appears on mouseover.

SSYAM TEJ
84% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows football statistics as a line chart, plotting goals scored against matches played for a dataset loaded from a CSV file. The chart uses D3 v6’s `scalePoint` for the x-axis (matches played) and `scaleLinear` for the y-axis (goals), with a line generator drawing the trend. Axes are rendered via `axisLeft` and `axisBottom`, while the SVG is created and manipulated with `select` and `append`. The data, sourced from a remote CSV URL, is parsed to numeric values before rendering, and the final line is styled with a steelblue stroke.

Ssujitrayudu01@gmail.com
84% match