Skip to main content
SimilarExport ZIP
100%

Stylized Bar Chart

✓ Published0🌍 Public
KKeerthiKandadai
Last edited Mar 27, 2020
Created on Mar 23, 2020
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

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`.

WW9183907
86% match
Loading thumbnail…

Stage of Study(No of students in each Department)

This interactive bar chart displays the number of students per module code across three departments, with a dropdown menu to filter by CSIS, CAM, or GAV. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to render SVG rectangles, sorting modules by student count and showing the top 50. Data is loaded via `d3.csv` from a GitHub-hosted dataset, with nested rollup aggregation counting student records per module.

KKeerthiKandadai
86% 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
85% 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
85% 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
84% 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
83% match