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

100%

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

✓ Published2🌍 Public

Last edited Apr 9, 2021

Created on Apr 7, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

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

89% match

Loading thumbnail…

Donations Effects

This visualization uses grouped horizontal bar charts to show the effects of donations in Croatia, comparing the percentage of actions, known donated sums, and the share for COVID-19 causes. The bars are rendered with SVG rectangles, using a stripe pattern to differentiate COVID-19 from other purposes. Data is loaded from a CSV file with D3 v6 and rendered through React. An interactive menu lets users switch between total, COVID-only, and other-purpose views, updating the chart and legend dynamically with `scaleBand` and `scaleLinear`.

Kkragovic

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

87% match

Loading thumbnail…

Type of donation

An interactive bar chart displays the type of donations in Croatia, comparing total actions, COVID-19 related donations, and other purposes. The visualization uses a horizontal stacked bar layout with proportional segments, allowing users to toggle between three menu options that filter the displayed data. Built with React and D3 v6, the chart utilizes `scaleBand` and `scaleLinear` for positioning, with SVG rendering for all graphical elements. Custom color legends and striped patterns differentiate donation categories, while tooltips reveal exact percentage values on hover.

Kkragovic

86% match

Loading thumbnail…

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

Kkragovic

86% match

Loading thumbnail…

Fork of Ways of giving - new menu

This dashboard shows charitable giving in Serbia, breaking down total donations into those specifically for COVID-19 relief versus other causes, with each bar segment showing the relative share of the total. A menu lets the user switch between these three aggregate views. The visualization is built with React and D3 v6, using `scaleBand` and `scaleLinear` for the axes, and SVG masks and patterns to create striped overlays on the donation segments for clarity. Data is loaded as CSV and rendered as a horizontal bar chart.

Kkragovic

85% match

Loading thumbnail…

Donor type

A horizontal diverging bar chart displays donor contributions divided into total actions and amounts, further segmented by COVID-19 and other purposes. Users toggle between these three aggregate views via an interactive menu. The chart uses React with D3 v6, rendering SVG via `scaleBand` and `scaleLinear`. Data loaded from a CSV file is processed in `useData`, with `Marks` drawing proportional rectangles and `ColorLegend` providing dynamic labels.

Kkragovic

84% match