Skip to main content
SimilarExport ZIP
100%

Making a bar chart: my grades

✓ Published2🌍 Public
DD0no
Last edited Sep 24, 2019
Created on Sep 24, 2019

This example shows a horizontal bar chart of a student’s final grades in university courses, with each bar’s length proportional to the numeric grade. The chart uses categorical labels on the y-axis and a linear scale on the x-axis. Built with D3 v5, the code loads data from a CSV file using `d3.csv`, creates scales via `d3.scaleLinear` and `d3.scaleBand`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Bars are appended as SVG rectangles, and the styling is defined in an external CSS file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart: my grades

A bar chart displays university grades, with each subject on the y-axis and its corresponding score (from 18 to 30) on the x-axis. The chart uses green bars and a readable font size. The implementation relies on D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to position and scale the marks. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering is created through `svg.append('g')` and `selectAll('rect')` calls.

HHilario Calderon
94% match
Loading thumbnail…

Making a bar chart: my grades - costumizing axis

A horizontal bar chart displays university grades across subjects, with bars sorted by score and a customized axis showing gridlines. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map grades and subjects, while `axisLeft` and `axisBottom` generate axes with removed domain lines. Data from a CSV file is loaded via `d3.csv`, and the SVG rendering includes a title and axis label.

DD0no
90% match
Loading thumbnail…

Students Grades of Bar Chart

This horizontal bar chart displays student grades, with each student’s name on the y-axis and their corresponding numerical grade on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars. Data is loaded from a CSV file, and interactive features include tooltips on mouseover and an alert on click, triggered via `select` and event listeners. Grid lines and axis labels are conditionally configured through a chart configuration object.

SshanLU999
86% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of student marks, with each bar representing a student’s score. The chart uses a linear scale for the x-axis and a band scale for the y-axis, with axes generated via d3.axisLeft and d3.axisBottom. The data is loaded from a CSV file using d3.csv, and the bars are rendered as SVG rectangles. d3.scaleLinear, d3.scaleBand, and d3.max are used for scaling and domain calculation.

BBaraneedharan N M
86% 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
83% match
Loading thumbnail…

reading csv v5

This example visualizes a simple bar chart of student grades from a CSV file. It shows the relative performance of eleven students by mapping each grade value to a bar’s width. The code loads the data with `d3.csv` from the local file `votiOne.csv`, then appends SVG `<rect>` elements to a 500×500 canvas. Each rectangle’s width is set from the `Grade` field, while the `y` position and height are calculated from the data index, creating evenly spaced horizontal bars. The chart uses D3 v5’s promise-based `.then()` method to handle the asynchronous data loading.

EEE2dev
81% match
Loading thumbnail…

Fork of Bar chart

A horizontal bar chart displays the average grade achieved for a list of university module codes, sorted by grading scale. The visualization emphasizes the distribution of marks across many modules, using a color gradient from steelblue to grey to represent low to high scores. Built with D3 v5, it uses `scaleLinear` for the x-axis and color scale, `scaleBand` for y-axis categories, and `axisBottom` with custom tick formatting. SVG rectangles render the bars with `transition` animation over a duration of 1000ms, transitioning their width and fill. The data is loaded from a CSV file via `csv` and parsed for numeric marks.

NNarayana Reddy
81% match
Loading thumbnail…

Fork of Making a Bar Chart

This example shows the scores of individual students as horizontal bars, using a linear x-scale for the score values and a banded y-scale for the student names. The chart is rendered as an SVG with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the axes, while `format` customizes the tick labels. The data is loaded from a local `score.csv` file, and the bars are drawn as `rect` elements with a fixed steelblue fill.

NNikith Reddy
81% match