Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

SSanjayRamaSwamyAdla@my.unt.edu

Last edited Mar 8, 2026

Created on Mar 8, 2026

This bar chart displays the test scores of ten students, labeled A through J, with each score plotted on a scale from zero to one hundred. The visualization directly compares individual performance, showing that student E has the highest score at 95, while student C has the lowest at 66. The chart uses SVG rendering with D3 v7, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Bars are drawn as SVG `rect` elements, and the chart includes labeled axes generated by `d3.axisBottom` and `d3.axisLeft`, along with a title. The data is hardcoded in the script.

AI-generated description

MIT Licensed

Similar vizzes

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 Making a Bar Chart 3

This bar chart visualizes student test marks, with each bar’s length representing a score from 1 to 100. Built with D3 v5, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical student labels, and `d3.axisBottom` with a custom tick formatter that abbreviates numbers. The SVG renders steel-blue rectangles, and the chart includes axis labels and a title. Data is loaded from a CSV and multiplied by 1,000 during preprocessing.

TtreasurehunterAP

84% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays the grades of 100 individual students, with each bar color-coded by letter grade category from A (green) through E (red). The chart uses an ordinal color scale and a linear grade axis from 0 to 100, with student names rotated along the bottom axis. An interactive tooltip shows the student name, numeric grade, and category on hover. The code loads data from a local CSV file using `d3.csv` and builds the visualization with D3’s band and linear scales, axes, and tooltips, rendered as an SVG.

Mmadalahyndavi123@gmail.com

82% match

Loading thumbnail…

Fork of Student Scores Bar Chart 2

This bar chart displays student scores from a CSV file, using a horizontal layout with student names on the y-axis and score values from 0 to 100 on the x-axis. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric scale, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s width is proportional to the score, with a purple fill and hover effect that reduces opacity. The chart is rendered as SVG within a 960×450 pixel viewport, with margins applied to position the plot area.

Pprudhvi

82% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart displays student test scores from a CSV file, ranking each student along the y-axis with a score from 0 to 100 on the x-axis. The purple bars are rendered as SVG rectangles within a fixed 960 by 450 pixel canvas, using D3 v5’s `scaleLinear` and `scaleBand` to map data to coordinates. The chart includes axes generated by `axisLeft` and `axisBottom`, with a hover effect that reduces bar opacity. The student data is loaded asynchronously from `data.csv`.

Pprudhvi

82% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This horizontal bar chart displays student exam scores from a CSV file, with each bar representing an individual student’s score on a scale from 0 to 100. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data and render an SVG with purple bars that become semi-transparent on hover. Student names appear on the y-axis, while the x-axis shows score values, with the chart laid out within a 960-by-450-pixel SVG canvas.

Oolddb

82% match

Loading thumbnail…

Fork of Fork of Student Scores Bar Char

This horizontal bar chart displays student scores from a CSV file, with each student’s name on the y-axis and their score on the x-axis from 0 to 100. Purple rectangles represent the scores, and hovering over a bar reduces its opacity. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render the SVG. The chart is titled “Bar Chart of Student Scores” and includes labeled axes with a fixed margin layout.

Oolddb

82% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart visualizes student scores as horizontal bars, with each bar’s length representing a score value. The chart is rendered as an SVG using D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It loads data from a CSV file and applies an axis layout. The bars are styled purple and become semi-transparent on hover via CSS.

Ppemmasaniprudhvinadh

82% match