HW5

100%

✓ Published0🌍 Public

Last edited Oct 8, 2024

Created on Oct 8, 2024

Forked from HW1

A stacked bar chart visualizes university performance across five scored dimensions from the Times World University Rankings 2024 dataset. The visualization displays each institution as a horizontal bar, segmented by teaching, research, citations, industry income, and international outlook scores. Users can sort universities by any dimension in ascending or descending order using the provided dropdown menus. The implementation uses D3 v7 with the `d3.stack()` function to generate stacked series, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis. Interactive tooltips show dimension values on hover, while a custom grid and axis formatting enhance readability.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

hw5

This visualization displays stacked bar charts of World University Rankings, showing how each university’s score is composed across five categories: Teaching, Research, Citations, Industry Income, and International Outlook. Users can sort the bars by any category in ascending or descending order, and hovering over individual bars reveals the exact value via a tooltip. The chart is rendered with SVG using D3 v6, leveraging `d3.stack()` to compute the stacked series and `d3.scaleBand` and `d3.scaleLinear` for positioning. A custom legend allows highlighting a single category by dimming the others, and the data is loaded from a CSV file.

JJiaYu07

91% 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…

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

90% 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

89% 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

88% 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

87% match

Loading thumbnail…

HW5: Stacked Bar Charts

This interactive stacked bar chart visualizes university rankings across five weighted performance indicators: Teaching, Research, Citations, Industry Income, and International Outlook. Users can sort universities by overall score or individual metrics in ascending or descending order via dropdown menus. The chart employs React with D3.js v6, using d3.stack() to compose the stacked bars and d3.scaleBand() for the x-axis. An SVG legend provides hover highlighting, adjusting bar opacity to emphasize selected categories while dimming others.

LLSAWB

87% match