Skip to main content
SimilarExport ZIP
100%

Fork of HW5: Stacked Bar Charts

✓ Published0🌍 Public
Oobope@proton.me
Last edited Mar 19, 2024
Created on Mar 19, 2024

This stacked bar chart visualizes survey responses about opinions across multiple universities, using the D3.js library. The chart displays the distribution of five opinion categories—ranging from "Tout à fait d'accord" (strongly agree) to "Pas du tout d'accord" (strongly disagree)—for each institution, with each category represented by a distinct color in the stacked bars. An interactive dropdown menu allows users to select a specific opinion, and a second dropdown enables sorting of the bars in ascending or descending order, with a confirm button to apply the changes. The visualization uses SVG rendering within a React framework, featuring a legend with hover effects that highlight the corresponding segments of the stacked bars. This example demonstrates D3's stack layout for grouped categorical data and interactive chart controls.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HW5: Stacked Bar Charts

This stacked bar chart visualizes the distribution of five opinion categories—ranging from "Tout à fait d'accord" to "Sans opinion"—across six French presidential candidates. Each bar represents a candidate, with segments colored by response type. The chart uses D3.js v6 to render SVG, with interactive dropdowns allowing users to filter by response category and sort the bars by ascending or descending total value. The legend uses a distinct color palette (dark green, light green, orange, red, and light gray) to map each response category, and a button triggers the re-rendering of the visualization based on selected options.

Oobope@proton.me
85% 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
85% 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…

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…

Diverging Stacked Bar Chart with D3.js

This visualization displays survey responses as a diverging stacked bar chart, with each row representing a question and colored segments showing the percentage of respondents who strongly disagree, disagree, are neutral, agree, or strongly agree. The chart uses D3.js v3 to load CSV data, compute percentage distributions, and render SVG rects and text labels via ordinal and linear scales. Alternating row backgrounds and a centered zero line aid readability, while a legend identifies the five response categories.

Jjhcliu19
81% 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
80% 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
80% 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
80% match