Actions per month part 2

100%

Actions per month part 2

✓ Published0🌍 Public

Last edited Apr 5, 2021

Created on Apr 5, 2021

This visualization shows the total number of blood donations registered in Serbia across 2020, broken down by month and split into Covid-related and non-Covid categories. The stacked area chart renders interactive SVG paths using React components, with data loaded via d3.csv. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color mapping. A menu system updates the visible data, though the current code only displays the "Total" dataset.

AI-generated description

Illustrated data show the total number of donations registered in Serbia in 2020. On the graph we can see proportions for Covid and non-covid donations for each month of the year.

MIT Licensed

Similar vizzes

Loading thumbnail…

Actions per month

This chart visualizes monthly donation totals in Serbia during 2020, splitting contributions into Covid-related and non-Covid categories. Each month shows two filled areas, colored red and yellow, with percentage labels above them to indicate the proportion of each type. The visualization uses React components to render an SVG, with d3.scaleTime and d3.scaleLinear mapping data to axes, and d3.area creating the stacked areas from CSV data grouped by donation type.

BbeauMarko

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

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

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

79% match

Loading thumbnail…

Refactored Area Chart (don activity)

This area chart displays monthly blood donation activity, comparing total donations against the portion attributed to COVID-19. The visualization includes a legend that uses a striped pattern to distinguish the COVID-19 subset. Users can toggle between three menu options—total, COVID-19, and other purposes—to switch which data series the chart highlights, with values labeled directly above the area path. Built with React and D3 v6, the chart uses `scaleTime` and `scaleLinear` for axes, `area` generators for the filled regions, and `csv` to load data from a gist.

Kkragovic

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

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

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

76% match