Skip to main content
SimilarExport ZIP
100%

hw5

✓ Published0🌍 Public
Kkenny-wq
Last edited Oct 16, 2023
Created on Oct 16, 2023
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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…

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