Stacked Bar Chart for Universities

100%

Stacked Bar Chart for Universities

✓ Published0🌍 Public

Last edited Oct 22, 2023

Created on Oct 18, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked bar chart

This stacked bar chart visualizes the weighted component scores of universities from the Times Higher Education World University Rankings. Users can sort universities by total score or individual metrics like teaching or research, toggle between ascending and descending order, and filter the displayed range. The chart uses D3 v7 with an SVG rendering approach, employing `d3.stack` to layer the five score categories and `d3.scaleBand` for the categorical x-axis. Interactive radio buttons and number inputs control sorting and filtering, while hover tooltips reveal detailed score information for each university.

Sstanley.shen2003@gmail.com

89% match

Loading thumbnail…

stacked bar chart

This stacked bar chart displays the weighted scores of universities across five categories: teaching, research, citations, industry income, and international outlook. The chart reads the data from `university.csv` and renders it as an SVG, with each bar representing a university and segmented by score category. Users can interactively sort the universities by any of the five scores, in either ascending or descending order, using dropdown menus. The visualization uses D3 v4 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.stack`, and `d3.axisBottom` to construct the chart.

Cchingching17

87% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the component scores—Teaching, Research, Citations, Income, and International—from the TIMES World University Rankings 2024 CSV data. Each bar represents a university, with segments stacked by criterion and color-coded via a `d3.scaleOrdinal`. Users can sort the bars by total score in ascending or descending order using buttons that call `updateChart`, which animates bar positions with `transition` and updates the `d3.axisBottom` x-axis. Tooltips display individual segment scores on hover, and the SVG rendering uses `d3.stack` for layout.

JJames Huang

87% match

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.

方方顗棠

86% match

Loading thumbnail…

HW5_311553050

This interactive stacked bar chart visualizes the 2024 Times Higher Education World University Rankings, breaking down each university's overall score into five component scores: teaching, research, citations, industry income, and international outlook. Users can re-sort the bars by any of these sub-scores using radio buttons, in either ascending or descending order. Built with a custom D3.js 3.5.6 script, the chart loads data from a CSV and uses `d3.layout.stack()` to aggregate the component scores, with category colors from `d3.scale.category20()`. The visualization supports transitions between sorted states, applying the new data through `transitionCount()` which re-stacks and updates the rectangles.

YYunLing

86% match

Loading thumbnail…

Untitled

This example shows the Times Higher Education World University Rankings 2024 as interactive stacked bar charts. Each page displays 100 universities, with bars segmented by six performance categories (overall, teaching, research, citations, industry income, and international outlook). Users can reorder the bars by ascending or descending score for any category and page through the dataset. The visualization uses D3 v7 with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`, rendered as SVG with hover tooltips.

ZZeroKurosakii

85% match

Loading thumbnail…

HW5 Stacked Bar Chart

This stacked bar chart visualizes the Times World University Rankings 2024, breaking down each university’s total score into five components: teaching, research, citations, industry income, and international outlook. Users can sort the 190+ institutions by any score category, in ascending or descending order. Built with D3 v7, the visualization uses `d3.stack()` to generate the layered bars and `d3.scaleBand` for the y-axis, with data loaded from a CSV. Interactive tooltips display individual score components and overall sums on mouseover.

RRachel Chen

84% match

Loading thumbnail…

bar_test

This visualization displays the scores of world universities across multiple metrics, presenting them as stacked horizontal bars. Users can sort the data by overall score or individual metrics and toggle between ascending and descending order via dropdown menus built with the `dropdownMenu` utility. The chart uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map university names, score values, and color-coded metric segments. Data is loaded from a CSV file containing ranked university performance statistics, and the SVG rendering updates dynamically with each selection change.

Ddaniel

84% match