Ways of giving

100%

Ways of giving

✓ Published2🌍 Public

Last edited Apr 18, 2021

Created on Apr 18, 2021

This interactive visualization from the v3 gallery compares the total number of giving actions and amounts, further segmented by purpose (COVID-19 vs. other causes). The chart uses a bar layout with striped markings to distinguish the COVID-19 portion from the rest, and the left axis labels each category. Users can click on a menu to switch the primary quantitative attribute between total actions, COVID-only actions, and other-purpose actions, updating the bar lengths and legend accordingly. The visualization is built with React and D3 v6, using SVG rendering and the `d3.csv` loader to fetch data from a remote source.

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…

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

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

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

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

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

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

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

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

78% match