Bar Graph

100%

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 24, 2022

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

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

MMeghanaArepalli

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

80% match

Loading thumbnail…

Bar Chart

This bar chart displays the number of students enrolled in six different institutes, with institution names on the x-axis and student counts on the y-axis. The chart uses tomato-colored rectangles for the bars and includes clearly labeled axes and a title. The visualization is built with D3 v5, using `select` to target the SVG element and `csv` to load the data from `data.csv`. Styling is applied via CSS classes for ticks and labels, and the SVG rendering is set to a width of 800 pixels and height of 430 pixels.

Iildatul

80% match

Loading thumbnail…

Example

This interactive bar chart shows the enrollment numbers for various courses across 12 modules, with each bar color-coded by module code. Hovering over a bar displays a tooltip with the specific module, course, and enrollment count. The visualization uses a stacked bar layout implemented with D3.js, including `d3.layout.stack`, `d3.svg.axis`, and `d3.legend`, with data loaded from a CSV file. Animated transitions and hover-based highlighting of individual module series are supported through D3's data join and event handling.

Nnifemi-sys

77% match

Loading thumbnail…

Average Attendance for each module

This visualization presents average attendance percentages for university courses, displayed as animated bar charts that grow sequentially upon load. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` to map course names and attendance values, with SVG rects transitioning via `transition.attr` and easing functions. Interactive mouseover and mouseout handlers alter bar width, position, and fill color between steelblue and orange while temporarily displaying the exact percentage value.

BBrahmareddym1996

76% match

Loading thumbnail…

Course Number of Each Subject

This bar chart shows the number of courses for each subject in a Udemy course dataset. The visualization uses a horizontal bar layout, with subjects listed along the y-axis and course counts along the x-axis. The code aggregates the raw CSV data using d3.nest() and rollup to count entries by subject, then renders the bars as SVG rectangles with React components. It leverages d3.scaleBand and d3.scaleLinear for positioning, and uses d3.format for axis tick labels.

DdaojunL

76% match

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

A filterable bar chart shows the number of students enrolled in the top 50 courses at a university, ranked by enrollment. A dropdown menu lets the user filter the data by department (CSIS, CAM, or GAV), which updates the chart to only display courses from that department. The visualization is built with React and D3 v5, using D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG `rect` elements to render the bars. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the selection handler updates the state to re-filter and re-sort the displayed bars.

IIyke2909

75% match

Loading thumbnail…

STUD#

A bar chart displays the educational results of a single student, Matilda Lang, across 74 courses, with bars colored by subject category (e.g., English, Science, Languages). The x-axis encodes the EDU_RESULT score from 0 to 100, while the y-axis lists course rows. Using D3 v5, the code loads data via `d3.csv`, scales with `scaleLinear` and `scaleBand`, and renders SVG rectangles with axes generated by `axisLeft` and `axisBottom`. The visualization highlights which subjects have measurable outcomes versus zero results.

Mmarkvanlaar2221

75% match