Skip to main content
100%

Horizontal Bar Chart Sort 2

✓ Published0🌍 Public
Aadkinsc
Last edited Sep 28, 2017
Created on Sep 28, 2017

This visualization displays the number of students enrolled in each degree program at a university, sorted from highest to lowest totals. The horizontal bar chart uses D3 v4 with SVG rendering, featuring steelblue bars that turn brown on hover and a tooltip showing exact values. The y-axis labels are hidden to reduce clutter, and the chart is animated when initially rendered. The data comes from a CSV file listing 150+ academic programs and their student counts, with the bars extending horizontally to show program popularity at a glance.

AI-generated description

Built with blockbuilder.org

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
79% 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
77% match
Loading thumbnail…

Activity 6_Question2

This stacked bar chart shows the proportion of students enrolled in five different programs—Engineering, Computer Science, Business, Liberal Arts, and Health Sciences—across five universities, with each bar segmented by program and colored via a categorical scale. The visualization uses D3 v7’s `d3.stack()` to compute the stacked segments, `d3.scaleBand()` for the university categories, and `d3.scaleLinear()` for the percentage axis. Hovering over a segment triggers a tooltip displaying the exact percentage for that program at that university, using D3 event handlers. Data comes from an embedded `data.csv` file, rendered as SVG with custom styles from `styles.css`.

Ssiddhubhupathi@gmail.com
76% 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
75% match
Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Hhanulik.ondrej@gmail.com
75% 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
75% match
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
75% match
Loading thumbnail…

Untitled

This example shows the distribution of student counts across letter grades, with horizontal bars colored in a solid blue tone. The chart uses D3.js v6 to construct an SVG visualization, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. It renders rectangles whose widths are proportional to `num_students` values, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The data is hardcoded in the script rather than loaded from the available CSV file.

Hhanulik.ondrej@gmail.com
74% match