Example themeriver

100%

Example themeriver

✓ Published1🌍 Public

Last edited Oct 13, 2023

Created on Oct 6, 2023

This stacked bar chart displays the performance of twelve universities across five teaching, research, and outreach metrics, with bars sorted by total score. A checkbox enables sorting values, though it is disabled in the code. The visualization uses D3.js v3 with ordinal and linear scales, SVG rendering, and axis components. Mouseover interactions highlight individual segments and display tooltips with metric names and values. Data comes from the provided college.csv file, which is loaded via d3.csv.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Charts

This stacked bar chart displays the weighted performance scores of universities across five categories: Teaching, Research, Citations, Industry Income, and International Outlook. The data, sourced from a CSV file, is loaded using d3.csv and rendered as SVG rectangles arranged with d3.stack. Users can sort universities by overall score or individual category in ascending or descending order via drop-down menus and a confirm button. Hovering over the legend highlights one category while dimming others.

方方顗棠

81% 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

80% match

Loading thumbnail…

Example themeriver

This example shows a stacked bar chart of U.S. state population data across seven age groups, with bars sorted by total population in descending order. The visualization uses D3.js (v3) with SVG rendering and includes an interactive checkbox to toggle value sorting, though the checkbox is initially disabled. Users can hover over individual bars to display tooltips showing the age category and count. The chart employs d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for axes, with data loaded from a CSV file using d3.csv.

黃黃歆善

79% 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

79% match

Loading thumbnail…

Stacked Bar Chart for Universities

This stacked bar chart compares universities by their overall and category-specific scores from a Times Higher Education dataset. The visualization uses d3.scale.ordinal for the y-axis, d3.svg.axis for axes, and d3.legend.color to display a categorical color legend. A dropdown menu lets users re-sort the bars by score type and order, with d3-tip providing hover tooltips showing the university name and total score. The SVG renders through D3 v5 with animated transitions.

Yyuting89830@gmail.com

79% match

Loading thumbnail…

test2024

This visualization displays university rankings from a CSV dataset as an interactive stacked bar chart. Users can sort universities by overall score or individual performance metrics, and choose ascending or descending order using dropdown menus. The chart renders with D3.js v4, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The bars stack five score components—teaching, research, citations, industry income, and international outlook—using D3's stack API, with SVG rendering for the final output.

Ddaniel

79% match

Loading thumbnail…

hw5

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.

Kkenny-wq

78% 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

78% match