Skip to main content
SimilarExport ZIP
100%

Fork of React Starter

✓ Published0🌍 Public
Eeyxxr1260@gmail.com
Last edited Oct 16, 2024
Created on Oct 11, 2024
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork Obope

This example presents an interactive stacked bar chart of university performance metrics, built with React and D3 v6. Users select a sorting methodology (e.g., Teaching, Research, Citations) and order (ascending/descending) from dropdowns, then confirm to re-render the visualization. The chart displays stacked bars for each university, with categories colored and a legend that highlights segments on hover. The axes and gridlines are styled minimally, and the chart supports dynamic re-sorting based on user input.

Oobope@proton.me
83% match
Loading thumbnail…

Stacked Bar Charts

This example displays stacked bar charts of university rankings, with each bar segmented by weighted scores for Teaching, Research, Citations, Industry Income, and International Outlook. The visualization uses D3 v6 APIs such as `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and SVG rendering to draw the chart. An interactive legend highlights a selected category by adjusting bar opacity on mouseover, while a button triggers data processing from a CSV file. The code loads university data and computes weighted score contributions for each segment.

AAkanksha
83% 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
82% 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
82% match