Refactored Area Chart (don activity)

100%

Refactored Area Chart (don activity)

✓ Published0🌍 Public

Last edited Apr 21, 2021

Created on Apr 21, 2021

Forked from Polished 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.

AI-generated description

MIT Licensed

Similar vizzes

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…

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

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

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

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

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

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

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

79% match