Skip to main content
SimilarExport ZIP
100%

Making a bar chart: my grades

✓ Published0🌍 Public
HHilario Calderon
Last edited Sep 27, 2019
Created on Sep 24, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart: my grades

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.

DD0no
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
84% 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
84% 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
82% 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
82% 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
80% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the average marks for over one hundred university modules, ranked with the module name on the x-axis and the percentage score on the y-axis. The chart highlights a user’s hovered bar by dimming the hovered bar and displaying the percentage difference from it for all other bars via dynamically appended text elements. Built with D3.js v5, the visualization loads data from a CSV file using `d3.csv` and renders as an SVG with animated opacity transitions. Gridlines, a reference line, and axis labels are drawn using `d3.axisLeft` and `d3.axisBottom`.

WW9183907
80% match