Type of donation

100%

Type of donation

✓ Published1🌍 Public

Last edited Apr 17, 2021

Created on Apr 16, 2021

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.

AI-generated description

NOTE!

Ovaj grafikon koristiti kao base (sto se tice orginalnih podataka, funkcionalnosti, naziva kolona itd - mada jos nije primenjen pravi css) za svaki simpler J.I. bar.

MIT Licensed

Similar vizzes

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

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

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

Polished Area Chart (don activity)

This interactive area chart displays monthly Croatian Red Cross donation activity, aggregating total donations and isolating COVID-19 contributions. Users switch between viewing total, COVID-19, or other purpose categories via a custom menu. The visualization uses React with D3’s `scaleTime` and `scaleLinear` to render SVG areas, with a stripe-pattern mask distinguishing the COVID-19 subset. Data comes from a CSV file loaded via D3’s `csv` and `useData` hook, with axes built through reusable components.

Kkragovic

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

83% match

Loading thumbnail…

Types of donnors

This interactive bar chart visualizes donor types, comparing the total number of donations with those attributed to Covid and other causes. Three text labels at the bottom of the chart act as a menu, allowing the user to switch the quantitative axis between these three categories. The visualization is built with React and D3 v6, using `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the quantitative axis, and SVG rectangles. The data is loaded from a CSV file and formatted with `d3.format`.

BbeauMarko

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

83% match

Loading thumbnail…

Types of donors - tweak

This interactive bar chart shows the distribution of donor types across three categories: Total, Covid, and Other, allowing viewers to switch between these metrics. The visualization uses React and D3 version 6, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering horizontal bars as SVG `<rect>` elements. Donor type labels and values appear directly on each bar, with tooltips providing exact formatted numbers via the `format` function. The data is loaded from a remote CSV file using D3's `csv` parser, and the interactive menu lets users change the displayed attribute by clicking on text elements.

BbeauMarko

82% match