Skip to main content
100%

Stacked Bar Chart

✓ Published0🌍 Public
Aabrown004
Last edited May 29, 2018
Created on May 29, 2018

This stacked bar chart compares the number of National Student Survey (NSS) questions for which each Imperial College department scored above, equal to, or below the England average. The data is sorted by the number of questions below average, and each horizontal bar is segmented into three colored sections representing the counts of above-, equal-, and below-average scores. A legend and annotation clarify the categories, with the chart rendered in SVG using D3 v4.

AI-generated description

An example of a stacked bar chart visualising NSS scores per department at Imperial.

This is part of a series of visualisations called My Visual Vocabulary which aims to recreate every visualisation in the FT's Visual Vocabulary from scratch using D3.

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/356896b8570ba156c4e6e9db71cc7ebb'>Stacked Bar Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Charts

This stacked bar chart displays the weighted performance scores of universities across five categories: Teaching, Research, Citations, Industry Income, and International Outlook. The data, sourced from a CSV file, is loaded using d3.csv and rendered as SVG rectangles arranged with d3.stack. Users can sort universities by overall score or individual category in ascending or descending order via drop-down menus and a confirm button. Hovering over the legend highlights one category while dimming others.

方方顗棠
75% match
Loading thumbnail…

Rank Chart

This chart tracks the changing intra-university National Student Survey ranks of Imperial College departments between 2012 and 2017, highlighting select departments from an array. It uses D3 v4 with SVG and animation to draw ranked lines over time. A multi-line Voronoi diagram (`d3.voronoi`) powers the tooltip, while `d3.scaleOrdinal` assigns colors and `d3.line`, `d3.axisBottom`, and `d3.axisLeft` structure the visualization. Data comes from a local CSV file, rendered with open-source code inspired by Nadieh Bremer’s baby-name chart.

KKacieW
75% match
Loading thumbnail…

Rank Chart

This rank chart tracks the intra-university NSS rankings of Imperial College departments from 2012 to 2017, with each department drawn as a line that moves up or down as its rank changes. The visualization uses a multi-line voronoi overlay for tooltips, letting viewers hover to identify departments. A customisable starting animation sequentially highlights departments in a predefined array, drawing attention to specific trends. Built with D3 v4, the chart includes grid lines, axis labels, and a clip path to contain the animated lines.

663anp3ca
74% match
Loading thumbnail…

Stacked Bar Chart for Universities

This stacked bar chart compares universities by their overall and category-specific scores from a Times Higher Education dataset. The visualization uses d3.scale.ordinal for the y-axis, d3.svg.axis for axes, and d3.legend.color to display a categorical color legend. A dropdown menu lets users re-sort the bars by score type and order, with d3-tip providing hover tooltips showing the university name and total score. The SVG renders through D3 v5 with animated transitions.

Yyuting89830@gmail.com
74% match
Loading thumbnail…

Activity6task2-q1

This stacked bar chart visualizes the distribution of score ranges across six school subjects, revealing how grade percentages vary by subject. Each horizontal bar represents a subject, segmented into seven color-coded score intervals from “below 40” to “above 90.” Built with D3 v7 and SVG, the chart uses `d3.stack()` to compute stacked segments and `d3.scaleOrdinal` for color mapping. Hovering over a segment displays a tooltip showing the exact percentage for that score range within the subject. The data comes from a CSV file containing percentage values that sum to 1 for each subject.

Ssudheervnarasimha1@gmail.com
73% match
Loading thumbnail…

Activity-6-Question-2

A stacked bar chart shows the percentage of student ratings across six subjects, with each bar segmented into five rating bands from "below 60%" to "above 90%". The chart uses `d3.stack()` to compute the layered data and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The visualization is rendered as an SVG with axes created via `d3.axisLeft()` and `d3.axisBottom()`, reading data from a local CSV file.

Nnaveen.dodda4321@gmail.com
73% match
Loading thumbnail…

Stacked Bar Charts_1

This stacked bar chart visualizes Times Higher Education World University Rankings 2024 data, showing the distribution of five score components—teaching, research, citations, industry income, and international outlook—across universities. Users can sort the bars by any component in ascending or descending order via dropdown menus. The visualization uses d3.stack for data grouping, d3.scaleBand and d3.scaleLinear for axes, and tooltips with mouseover events to reveal individual score details. The SVG-based rendering loads data from a CSV file, with each bar segment colored according to its corresponding performance metric.

Wweird_danger
73% match
Loading thumbnail…

1

This stacked bar chart visualizes the distribution of grade ranges (from 5.0-6.0 to above 9.0) across six student groups, showing how each grade category contributes to a total of 100% per student. The chart uses d3.stack() to create stacked segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Hovering over a segment triggers a tooltip displaying the exact percentage for that grade range within the selected student group. Data is loaded from a CSV file and rendered as SVG elements.

JJagadeshwar Reddy. Chilakamarri
73% match