Skip to main content
SimilarExport ZIP
100%

HW5 Stacked Bar Chart

✓ Published0🌍 Public
RRachel Chen
Last edited Oct 17, 2023
Created on Oct 16, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

109550187_HW5

This visualization displays the 2024 Times Higher Education World University Rankings as a horizontal stacked bar chart, comparing five score components—teaching, research, citations, industry income, and international outlook—for each institution. Users can reorder the bars by selecting a sorting key and direction from dropdown menus. The chart uses D3 v7’s `d3.stack` to generate stacked segments, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. Hovering over a bar segment triggers a tooltip showing the school name, segment score, and overall total, calculated via `d3.format`.

Ppatricknicholas27@gmail.com
93% 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
92% match
Loading thumbnail…

HW5: Stacked Bar Charts

This example visualizes World University Rankings as stacked bar charts, displaying the contribution of five scoring categories (Teaching, Research, Citations, Industry Income, and International Outlook) for each university. Users can select a sorting methodology and order from dropdown menus to reorder the bars. The visualization uses React, D3 v6, and SVG, leveraging `d3.stack`, `scaleBand`, `scaleLinear`, and `axisBottom` to construct the chart. A tooltip shows exact segment values on hover, and hovering over legend items highlights the corresponding category while fading others.

Ccpsu00
90% match
Loading thumbnail…

hw5-the World University Rankings

This example shows the World University Rankings as a stacked bar chart, with each bar representing a university and segments for teaching, research, citations, industry income, and international outlook. Users can sort the universities by any of these score fields in ascending or descending order using dropdown menus. The visualization uses D3 v6 with the `stack` and `scaleOrdinal` APIs to generate the stacked bars, and renders them as SVG. Data comes from a CSV file containing ranking and score information for over 200 universities.

Yyuting89830@gmail.com
90% match
Loading thumbnail…

Data Visualization Homework 5: Stacked Bar Chart

This stacked bar chart visualizes the 2024 Times World University Rankings, showing the weighted contributions of teaching, research, citations, industry income, and international outlook for 28 universities per page. Users can sort universities by any indicator in ascending or descending order via dropdown menus, and navigate between pages using previous and next buttons. The visualization uses D3 v5’s `scaleBand`, `scaleLinear`, `scaleOrdinal`, `d3.stack()`, and `axisBottom`/`axisLeft` to render the SVG bars, with hover tooltips displaying raw scores. Data comes from a CSV file, and color encoding is explained by a legend.

Dderrick373519@gmail.com
89% match
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…

hw5

This stacked bar chart visualizes the performance of the top 200 universities across five THE World University Ranking criteria: teaching, research, citations, industry income, and international outlook. Interactive buttons allow sorting universities ascending or descending by any metric, reordering the bars accordingly. The visualization uses D3 v6 APIs including `d3.csv`, `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles. Data comes from the data.csv file, filtered to the first 200 ranked entries where overall scores are numeric.

Kkenny-wq
88% 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
88% match