Reusable J.I. Bar chart (with menu)

100%

Reusable J.I. Bar chart (with menu)

✓ Published1🌍 Public

Last edited Apr 16, 2021

Created on Apr 15, 2021

Forked from Fork of J.I. Bar chart (with menu)

This interactive bar chart compares charitable actions and donation amounts across categories, with a menu to switch between total, COVID-19, and other purpose views. Each category displays stacked bars showing the percentage breakdown of actions or amounts, with a legend clarifying the color coding. Built with React and D3 v6, the visualization uses `scaleBand` and `scaleLinear` for axes, SVG patterns for hatched fills, and interactive menu elements that trigger state updates via `useState`. Data is loaded from a CSV file using D3's `csv` parser.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable J.I. Bar chart (with menu) - TEST2

A stacked horizontal bar chart visualizes donation activities and amounts across categories, allowing interactive switching between total, COVID-19, and other-purpose views via a menu. The chart presents paired bars for actions and monetary sums, with color-coded segments for COVID-19 and other causes. It uses React with D3.v6 functions like scaleBand and scaleLinear for axes and scales, rendering SVG elements. Data is loaded from a CSV file, and user clicks trigger state updates to change displayed attributes and zoom scales.

Kkragovic

93% match

Loading thumbnail…

J.I. Bar chart (with menu)

This example shows a bar chart comparing COVID-19 and other donation data across donor types, with each category split into two rows for actions and amounts. An interactive menu lets viewers switch between total, COVID-only, and other-only views, updating the bar lengths dynamically. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for positioning, SVG patterns and masks for striped bars, and `csv` to load data from a GitHub gist.

BbeauMarko

92% match

Loading thumbnail…

Simpler JI Bar with Table

This interactive bar chart visualizes how philanthropic donations are distributed across various causes, with a toggleable menu to switch between total actions, COVID-19-specific, and other purposes. The horizontal bars are segmented into two stacked rectangles, showing the proportion of each category, with a striped pattern overlay and hover tooltips revealing exact percentages. A supplementary HTML table below the SVG reorganizes the same data into intervals (e.g., '0-1 %', '5-10 %') for non-key themes, using React state to update both visualizations dynamically. The chart is built with React and D3 v6, utilizing `scaleBand` and `scaleLinear` for axes, and reads data from a CSV file via `d3.csv`.

Kkragovic

89% match

Loading thumbnail…

Simpler J.I. Bar chart

This interactive bar chart visualizes donor data in Croatia, showing the percentage of donation actions and amounts by donor type, with a toggleable breakdown for COVID-19 versus other purposes. Built with React and D3 v6, it renders SVG marks using `scaleBand` and `scaleLinear`, with interactive menu buttons that switch between total, COVID-19, and other categories. The chart uses striped overlays via SVG `<pattern>` and `<mask>` to distinguish overlapping data, with tooltips on mouse hover. Data comes from a CSV file loaded with `d3.csv`, and the legend updates dynamically based on the selected category.

Kkragovic

86% match

Loading thumbnail…

Fork of J.I. Bar chart (with menu)

The visualization presents donor contributions to Croatian COVID-19 relief efforts, comparing donated amounts and action counts across donor types. It renders grouped horizontal bars in SVG, with each donor type shown as paired rows for actions and monetary sums. An interactive menu switches between total, COVID-only, and other-purpose views, updating the displayed bars via React state. The chart uses D3 scales (`scaleBand`, `scaleLinear`), custom axis components, and pattern masks to visually differentiate data segments, with data loaded from a CSV file.

Kkragovic

86% match

Loading thumbnail…

Donations Effects - fixed rect height TEST

This stacked bar chart visualizes how donation amounts are split between COVID-19 and other purposes across different giving categories. Users can toggle between total donations, COVID-only, and other-purpose views via an interactive menu. The visualization uses React with D3 v6, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering SVG rectangles with fixed heights. A striped pattern masks the first segment to distinguish it visually, while tooltips show percentage values. Data comes from an external CSV file about giving methods.

Kkragovic

82% match

Loading thumbnail…

Donations Effects - fixed rect height

This visualization displays donation campaign data across categories, showing the proportion of total actions, COVID-19-related contributions, and other purposes as horizontal stacked bars with fixed rectangle heights. Interactive menu labels allow switching between aggregate totals, COVID-only, and other-purpose views. The bars use SVG patterns and masks to distinguish segments, with tooltips via `<title>` elements. Built with React and D3 v6, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `csv` for loading external data.

Kkragovic

82% match

Loading thumbnail…

Bar chart from Jelena's imagination

This bar chart compares COVID-19-related versus other donor actions and amounts across different donor types. The visualization uses horizontal grouped bars, with one row for actions and another for amounts, displaying percentage values and using striped patterns to distinguish categories. Data is loaded from a remote CSV file using `d3.csv`. The chart is built with React and rendered as an SVG, employing `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.scaleOrdinal` for the color legend. Tooltips reveal exact percentages, while a color legend clarifies the COVID-19 and other categories.

BbeauMarko

81% match