Fork of Darodavci + legenda

100%

Fork of Darodavci + legenda

✓ Published1🌍 Public

Last edited Mar 1, 2021

Created on Mar 1, 2021

A horizontal bar chart compares two percentages per donor type: the share of donation actions (red bars) and the share of donated amounts (orange bars). Both metrics appear side-by-side for each category, with a small legend identifying the color encoding. Built with React and D3 v6, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and `scaleOrdinal` for the legend. Data is loaded from a CSV via `csv()`, with hover tooltips showing the exact percentage values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Darodavci + legenda

Two horizontal bar charts compare the percentage of philanthropic actions versus donated amounts across six donor types, from mass individual donors to private foundations. The red and orange bars are paired for each category, with a legend indicating which color represents each metric. The visualization uses React and D3 v6, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering to SVG. The underlying data comes from `data.csv`, and tooltips display exact percentage values when hovering over each bar.

BbeauMarko

92% match

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

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

80% match

Loading thumbnail…

Učešće različitih tipova darodavaca

A horizontal diverging bar chart displays the share of actions and money from different donor types in Serbian civil society. Each donor category is represented by two bars: one red for the share of actions and one orange for the share of money. The chart uses React components with the D3 v6 library, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering as an SVG. Data is loaded from a CSV file using the `csv` function.

BbeauMarko

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

78% match

Loading thumbnail…

Types of donors - tweak

This interactive bar chart shows the distribution of donor types across three categories: Total, Covid, and Other, allowing viewers to switch between these metrics. The visualization uses React and D3 version 6, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering horizontal bars as SVG `<rect>` elements. Donor type labels and values appear directly on each bar, with tooltips providing exact formatted numbers via the `format` function. The data is loaded from a remote CSV file using D3's `csv` parser, and the interactive menu lets users change the displayed attribute by clicking on text elements.

BbeauMarko

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

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

77% match