Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Feb 26, 2026

Created on Feb 26, 2026

This example summarizes a student dataset by displaying computed average scores for math, science, and English, along with the total row and column counts. A line chart rendered as SVG uses `d3.line` and `d3.scaleLinear` to plot the three subject score trends across all 100 students, with each subject shown in a distinct color. The data is loaded asynchronously from a CSV file via `d3.csv`, and the page styling uses the Quicksand and Pacifico fonts from Google Fonts with a sky-blue background.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

86% match

Loading thumbnail…

Fork of React & D3 Starter

This example displays average scores in Math, English, and Science as rounded, pastel-colored bars, calculated from a 100-student CSV dataset. It uses D3 v7 to load and aggregate the data with `d3.csv` and `d3.mean`. The visualization is built with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes, while SVG elements render the bars, value labels, title, and axis labels. The page layout is styled directly via D3 selections on the body element.

Kkarthikpavan1198@gmail.com

86% match

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes student test scores from a CSV file, with each student’s name on the x-axis and their numeric score on the y-axis ranging from 0 to 100. The visualization uses D3.js v7’s `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles filled with steel blue, while `d3.axisBottom` and `d3.axisLeft` render the axes. The code loads the data asynchronously via `d3.csv` and renders the chart entirely in SVG within a styled container.

YYamini Malikireddy

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 example displays a library book dataset summary and a static SVG illustration. It fetches CSV data from a user-provided URL and uses D3.js version 7 to parse and analyze the columns, categorizing them as numeric or categorical and computing statistics like min, max, and mean. The summary section lists row and column counts, while a separate SVG image shows five basic shapes (rectangle, circle, polygon, line, and text), utilizing D3's `d3.csvParse` and aggregation functions.

Ppriyankachary1701@gmail.com

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

82% match