Filterable Cocktail Ingredient Bar Chart

100%

Filterable Cocktail Ingredient Bar Chart

✓ Published4🌍 Public

Last edited Oct 27, 2020

Created on May 25, 2020

Forked from Filterable Cocktail Ingredient Bar Chart

This visualization displays the number of students enrolled in the top 50 university modules, ranked by student count. A dropdown menu filters the bar chart by department (CSIS, CAM, GAV). The chart uses React with D3 v5 scales (`d3.scaleBand` for categories, `d3.scaleLinear` for values), data nesting via `d3.nest`, and renders SVG bars with tooltips showing exact counts. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 50 university modules by student enrollment, filtered by academic department. A React dropdown menu lets users select a department (such as CSIS, CAM, or GAV), which dynamically updates the chart’s data through d3.nest() aggregation. The visualization uses d3.scaleBand for the vertical module codes and d3.scaleLinear for horizontal counts, rendered as SVG rectangles with native tooltips. Data loads from a CSV via d3.csv, with axes generated by custom React components.

WW9183907

96% match

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

A filterable bar chart shows the number of students enrolled in the top 50 courses at a university, ranked by enrollment. A dropdown menu lets the user filter the data by department (CSIS, CAM, or GAV), which updates the chart to only display courses from that department. The visualization is built with React and D3 v5, using D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG `rect` elements to render the bars. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the selection handler updates the state to re-filter and re-sort the displayed bars.

IIyke2909

95% match

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the number of students enrolled per module, with the top 20 modules sorted in descending order. A dropdown menu filters the dataset by department (CSIS, CAM, or GAV), recalculating student counts and resorting the bars accordingly. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `d3.nest()` for aggregation, and SVG `rect` elements with tooltips. The chart loads data from a remote CSV file and updates dynamically when the department selection changes.

Aaizazhussain234

95% match

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 20 academic modules by student count, filtered by department through a dropdown menu. The visualization uses React components with D3.js scales (scaleBand and scaleLinear) to render SVG rectangles, with nested data aggregation via d3.nest(). Raw CSV data is loaded from GitHub using d3.csv, and user selections update the visualization through React state management.

KKeerthiKandadai

93% match

Loading thumbnail…

Fork of Filterable Cocktail Ingredient Bar Chart

This bar chart displays the top 50 modules by student count, filterable by department (CSIS, CAM, or GAV). The visualization uses D3.js (v5) within a React framework to render the SVG, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data is loaded from a CSV via d3 `csv`, nested and rolled up by module code to calculate counts. A dropdown menu, built with ReactDropdown, allows users to filter departments, dynamically updating the bars. Tooltips show exact counts via SVG `<title>` elements.

NNarayana Reddy

92% match

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 20 modules by student count, filterable by academic department. The visualization uses React state to manage the selected department, which filters a nested dataset aggregated with the `nest()` API. Bars are rendered as SVG rectangles scaled with `scaleLinear` and `scaleBand`, with axes generated by custom React components. The module data is loaded remotely via `d3.csv` from GitHub.

KKeerthiKandadai

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

90% match

Loading thumbnail…

Stylized Bar Chart

This visualization presents a stylized horizontal bar chart that ranks academic modules by student enrollment numbers. A dropdown menu allows users to filter the displayed data by department codes (CSIS, CAM, GAV), though the implementation for this filtering is not shown in the core rendering logic. Built with React components and D3 v5, the chart uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the quantitative x-axis, rendering orange SVG rectangles within an 800x5000 pixel canvas. The data originates from a CSV file containing module codes and student counts.

KKeerthiKandadai

86% match