Fork of Let's make a Bar Graph with D3.js

100%

Fork of Let's make a Bar Graph with D3.js

✓ Published1🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

Forked from Let's make a Bar Graph with D3.js

A horizontal bar chart displays student enrollment across ten computer science courses, with purple bars sorted from highest to lowest by the number of enrolled students. The visualization uses D3.js v7’s `scaleLinear` and `scaleBand` to map enrollment counts and course names, while `axisLeft` and `axisBottom` generate the categorical and numerical axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes rotated axis labels for courses and enrollment counts.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Graph

This horizontal bar chart displays student enrollment counts for nine university courses, ranging from 20 to 85 students. Green rectangles represent enrollment figures on a linear scale, with subject names labeled along the y-axis. The visualization is drawn as an SVG using D3 v7, employing scaleLinear for the x-axis, scaleBand for categorizing the y-axis, and axisLeft/axisBottom for generating tick marks. Data loads from a CSV file containing course names and enrollment numbers, with the subject labels rotated vertically on the left.

PPavaniMangugari

85% match

Loading thumbnail…

Let's make a face with D3.js!

This horizontal bar chart displays student enrollment counts for various university module codes, sorted along the y-axis. The visualization uses the D3.js library (v5) to load data from a CSV file, map the module codes to a band scale on the y-axis, and the student counts to a linear scale on the x-axis. The chart renders as SVG rectangles, with blue bars representing the data, and includes labeled axes for "ModuleCode" and "Students".

KKeerthiKandadai

82% match

Loading thumbnail…

Fork of

A horizontal bar chart displays average marks for courses, with bars colored on a gradient from steelblue to grey based on value. The visualization supports hover tooltips and click alerts, and includes axis labels and gridlines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements, with data loaded from a CSV file.

NNarayana Reddy

81% match

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart displaying subject marks from a CSV file, with subjects on the y-axis and marks on the x-axis. Built with D3.js v7, it loads data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, using `d3.axisLeft` and `d3.axisBottom` for labeled axes with rotated text.

SSohilaBheemReddy

80% match

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays the number of employees for various service categories, using a horizontal layout where each bar’s length corresponds to the recorded value. The visualization is built with D3.js v7, loading data from a CSV file and rendering SVG rectangles. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes, with data mapped from the “No.of Employees” column.

Tttummala17

80% match

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays country populations from a CSV file, sorted vertically from highest to lowest using D3.js v7. It renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The visualization imports specific D3 modules like `select`, `csv`, and `max` to load and process data.

Ssaivinay143

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

79% match

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart visualizes the scores of different teams using D3.js (v7) with SVG rendering. It loads CSV data from a GitHub gist and maps team names to the y-axis with a band scale, while a linear scale positions the bar widths based on score values. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` to construct the chart, with red rectangles and styled text. Axes and margins frame the visualization, which updates dynamically after parsing and converting the numeric score data.

Ssaivinay143

79% match