Fork of Ways of giving - new menu

100%

Fork of Ways of giving - new menu

✓ Published0🌍 Public

Last edited Apr 24, 2021

Created on Apr 24, 2021

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.

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…

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

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

81% match

Loading thumbnail…

Ways of giving

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.

Kkragovic

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

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

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

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

78% match

Loading thumbnail…

Fork of Actions per month

This visualization shows the proportion of Covid versus non-Covid blood donations in Serbia across each month of 2020, using stacked area forms to compare the two categories. The chart renders as an SVG within a React application, using D3 v6 methods such as `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, while the `area` generator in d3.area draws the layered curves. The csv data is loaded via the d3.csv function, and the lower layer is visually de-emphasized with reduced opacity to highlight the selected Covid category.

BbeauMarko

78% match