Skip to main content
SimilarExport ZIP
100%

Fork of 1010

✓ Published0🌍 Public
Eeyxxr1260@gmail.com
Last edited Oct 11, 2024
Created on Oct 11, 2024
Forked from 1010

This visualization displays 2024 World University Rankings as a stacked bar chart, breaking down each institution’s total score into five component categories: teaching, research, citations, industry income, and international outlook. Users can sort the bars by any category or the total, toggle ascending/descending order, and upload their own CSV data to update the chart. Built with D3 v7, it uses `d3.stack()` for stacking, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG `rect` elements with mouseover tooltips.

AI-generated description
MIT Licensed

Similar vizzes

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…

Fork of Interactive Stacked Bar Chart

This fork of an interactive stacked bar chart visualizes World University Rankings, with bars segmented by scoring criteria and universities sorted via dropdown menus. Users can toggle legend items to hide or show criteria, and hover over bars to reveal tooltips with detailed scores. The visualization is rendered as SVG using D3 v7, leveraging `d3.scaleBand`, `d3.scaleLinear`, and D3’s data-join pattern to update charts dynamically on sort or filter changes.

Eeyxxr1260@gmail.com
87% match
Loading thumbnail…

Fork of bar_test

This visualization displays university ranking data as an interactive stacked bar chart, showing scores across teaching, research, citations, industry income, and international outlook for each institution. Users select a sorting metric and order from dropdown menus, which reorders bars and changes the stacking priority. The chart uses D3 v4 with `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `stack` to render SVG rectangles, while the `dropdownMenu` module handles menu interactions. Data comes from a local CSV file with Times Higher Education rankings.

Ddaniel
86% match
Loading thumbnail…

tryyyyyyy

This stacked bar chart visualizes World University Rankings across five metrics—Teaching, Research, Citations, Industry Income, and International Outlook—using d3.stack to aggregate scores per institution. Users can sort by metric and order via dropdowns, while hovering reveals exact segment values and legend interaction highlights selected categories. The SVG rendering uses d3.scaleBand for axes and d3.axisLeft/axisBottom, with data loaded from CSV via d3.csv.

Eeyxxr1260@gmail.com
86% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This interactive stacked bar chart visualizes the 2024 Times Higher Education World University Rankings, displaying scores for teaching, research, citations, industry income, and international outlook across top universities. Built with D3 v5, the visualization uses `d3.stack` and `d3.scaleBand` to compose the bar segments, with color-coded legends that toggle categories on and off. The chart includes dropdown menus for sorting by various metrics, previous/next navigation buttons, and hover tooltips revealing detailed scores for each institution, all rendered as SVG elements with animation support.

LLê Minh Bằng
86% 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
86% 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
86% 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
85% match