Fork of Actions per month

Actions per month part 2

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.

90% match

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

86% match

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

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.

Fork of Fork of GDP Serbia

This line chart displays the number of actions per month, with data sourced from a CSV file. The visualization uses D3’s `scaleBand` for the x-axis months and `scaleLinear` for the y-axis action counts, rendered as an SVG with React. The chart includes a smooth curve via `line()` and `curveNatural`, circular data points with tooltips, and labeled axes. The y-axis uses dashed gridlines, and the title is centered above the plot area.

Hharika-1929

Fork of GDP Serbia

This chart visualizes the number of actions per month in Serbia, using a line and scatter plot. The data is loaded from a CSV file and rendered using React with SVG. D3’s `scaleBand` and `scaleLinear` map months and action counts to the axes, while `line()` constructs the path. Circles with tooltips show each data point, and the style is defined in external CSS.

BbeauMarko

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.

78% match

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.