Fork Obope

100%

✓ Published0🌍 Public

Last edited Mar 19, 2024

Created on Mar 19, 2024

Forked from Fork of HW5: Stacked Bar Charts

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HW5: Stacked Bar Charts

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.

Oobope@proton.me

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

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

78% match

Loading thumbnail…

Fork of Fork of Filterable Cocktail Ingredient Bar Chart

This fork of a D3 bar chart displays the top 50 university modules by student count, with a dropdown filter to subset results by department values CSIS, CAM, or GAV. The visualization uses React to manage state and render SVG elements, while d3’s `scaleBand`, `scaleLinear`, and `nest` functions aggregate and sort the CSV data for display. Department filtering applies a case-insensitive string match on the dataset, and the chart updates the y-axis accordingly. Axes and marks are built as React components, with native SVG `<title>` elements providing hover tooltips.

NNarayana Reddy

78% match

Loading thumbnail…

Fork of Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart visualizes student marks by name, with data drawn from estimated UN population statistics. Users can select a year and the number of top countries to display via dropdown menus. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, which are animated on load using the `<animate>` element. Bars are stylized with linear gradients, drop shadows, and continent-based coloring, while tooltips appear via `<title>` elements.

Cchandrakalavanukuri

77% match

Loading thumbnail…

Fork of Fork of Interactive pie and bar

This interactive dashboard combines a pie chart and bar chart to compare the top 5 countries across teaching, research, and citations. Hovering over a bar updates the pie chart and legend to display the corresponding data breakdown. Built with React and D3 v3, it uses SVG rendering with animations via `transition().duration(500)` to smoothly update bar heights and colors. The data is processed from a JavaScript object containing frequency values for each category.

JJerlineJJ

77% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes university rankings across multiple countries, cycling through four metrics: Research Environment, Students to Staff Ratio, Research Quality, and Industry Impact. Built with D3 v3, the chart uses distinct SVG symbols (star, square, circle) to represent different data dimensions, with axes updating every two seconds as the metric changes. The visualization leverages a reusable chart pattern, where the scatter plot component is separated into its own module and accepts configurable setters for data binding and scales.

Vvinodreddysagam929@gmail.com

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

76% match