Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Stacked Bar Chart

✓ Published0🌍 Public
Eeyxxr1260@gmail.com
Last edited Oct 12, 2024
Created on Oct 12, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This stacked bar chart visualizes world university rankings, with bars grouped by university and colored by ranking criteria, with scores plotted along the y-axis. Users can arrange the data by different ranking attributes and sort bars in ascending or descending order via dropdown menus. The chart is built with D3 v6, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack()` to generate the stacked series. It renders as SVG, includes an interactive tooltip on hover, and displays a legend alongside the chart.

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

Fork of 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.

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
87% 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
84% match
Loading thumbnail…

Fork of bar_test

A grouped bar chart displays university ranking data, with each institution’s score broken into five stacked components (teaching, research, citations, industry income, and international outlook). Users can reorder the bars by selecting a different score metric or sorting order from dropdown menus, built with a custom `dropdownMenu` module. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, `stack`, and `axisBottom`, rendering SVG rectangles with mouseover tooltips showing school names and component scores. Data comes from a CSV file containing Times Higher Education rankings.

Ddaniel
84% 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
82% 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
82% match