Skip to main content
100%

Untitled

✓ Published0🌍 Public
ZZeroKurosakii
Last edited Oct 23, 2023
Created on Oct 23, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Charts_2

This interactive stacked bar chart visualizes the Times Higher Education World University Rankings 2024, breaking down each university's overall score into five components: teaching, research, citations, industry income, and international outlook. Users can sort the universities by either total score or any individual criterion and toggle between ascending and descending order. Built with D3.js (version 7.9.0), the visualization uses `d3.stack()` to generate the stacked segments, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the continuous x-axis. Hovering over any segment displays a tooltip showing the university name and the component score. The data is loaded from a CSV file containing 2024 ranking information.

Wweird_danger
91% 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
90% match
Loading thumbnail…

Stacked Bar Charts_3

This example visualizes the Times World University Rankings 2024 as a set of stacked horizontal bar charts, with each bar representing a university and its segments showing scores for teaching, research, citations, industry income, and international outlook. Users can sort the universities by any of these criteria in ascending or descending order via dropdown menus. Built with D3.js, the visualization uses `scaleLinear`, `scaleBand`, `scaleOrdinal`, and the `stack` API to generate the SVG chart, while a custom tooltip displays exact segment values on hover. The data comes from a CSV file.

Wweird_danger
90% match
Loading thumbnail…

Final Stacked Bar Charts_4 with animation

This interactive visualization, built with D3.js, displays Times Higher Education World University Rankings for 2024 as horizontal stacked bar charts. Each bar represents a university's performance across five weighted score categories (teaching, research, citations, industry income, international outlook), with segment lengths proportional to each score. Users can sort the chart by category and toggle between ascending and descending order using dropdown menus implemented with `d3.select` and event handlers. A hover tooltip reveals precise category values. The visualization animates a typewriter-style instruction text using JavaScript `setTimeout`, while axes and scales are rendered using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisTop`.

Wweird_danger
90% match
Loading thumbnail…

1010

This stacked bar chart visualizes the Times World University Rankings 2024, breaking down each institution's overall score into five components: Teaching, Research, Citations, Industry Income, and International Outlook. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with d3.stack() to create the stacked segments. Interactive sorting by any score metric, in ascending or descending order, is provided via HTML dropdown menus, and a tooltip displays segment values on mouseover. The data is loaded from a CSV file, with schools ranked as "Reporter" filtered out.

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

Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes university ranking data from the Times Higher Education World University Rankings, displaying weighted scores across five categories: Teaching, Research, Citations, Industry Income, and International Outlook. The D3.js v6 code uses `d3.stack()` to compute stacked series and `d3.scaleBand()` for the x-axis, with `d3.axisLeft()` and `d3.axisBottom()` for axes. Hovering over legend circles highlights the corresponding segment by adjusting rectangle opacity via `svg.selectAll()`, while a user interface allows re-sorting bars by different metrics and ascending or descending order.

Jjerry70938@gmail.com
88% match