Skip to main content
SimilarExport ZIP
100%

Public BI Contributions

✓ Published0🌍 Public
GGerardoFurtado
Last edited Mar 29, 2019
Created on Mar 29, 2019

This example visualizes contributions and allocations from public budget information and country program financing, displayed as two interactive line chart panels. The charts are paired with multi-select button panels that filter the displayed series by donor and implementing organization. Built with D3 v5, the visualization supports animation, lazy loading, and responsive sizing, with tooltips and flags indicating country data. It also handles legacy Internet Explorer by conditionally loading polyfills.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Public BI Contributions

This interactive chart displays public contributions to Country-Based Pooled Funds (CBPFs), split into two synchronized panels for donors and CBPFs. Users select entities from button groups to toggle time-series line charts showing funding amounts over years, with SVG rendering and animated transitions. The visualization uses D3 v5, including `d3.scaleTime`, `d3.local`, and `d3.timeParse`, with a custom progress wheel and tooltip. Data is loaded externally, and the chart supports lazy loading and Internet Explorer polyfills for promises and fetch.

GGerardoFurtado
87% match
Loading thumbnail…

OCHA CBPF chart

This chart visualizes OCHA CBPF funding data through an interactive multi-panel dashboard built with D3 v5. It combines an animated top panel, a bar chart, and a beeswarm plot rendered with SVG and canvas to display donor contributions, funding amounts, and year-by-year comparisons. Hover tooltips and smooth transitions reveal detailed monetary values, with flags indicating donor countries. The visualization is responsive and includes a loading progress wheel, with support for Internet Explorer via polyfills.

GGerardoFurtado
75% match
Loading thumbnail…

OCHA CBPF chart

This chart, created with D3.js v5, visualizes humanitarian funding data from the OCHA CBPF (Country-Based Pooled Funds). It combines multiple panels within a single SVG: a top panel for summary statistics, a middle panel with bar charts displaying funding amounts by donor, and a bottom beeswarm plot showing individual contributions. The visualization animates through selected years with smooth transitions, using color-coded bars and circles to represent data points. Money-bag icons and country flags are integrated into the design for quick recognition of financial values and geographic origins. The chart supports responsive sizing and includes a progress indicator for data loading. It demonstrates a sophisticated use of SVG, canvas, and animation, with tooltips providing detailed information on hover.

GGerardoFurtado
74% match
Loading thumbnail…

OCHA CBPF chart

This animated D3.js chart visualizes OCHA Country-Based Pooled Funds (CBPF) data across multiple years. Built with SVG and canvas rendering, it combines three synchronized panels: a top panel showing fund overview metrics, a middle bar chart displaying donor contributions, and a beeswarm plot at the bottom. The visualization animates transitions when the selected year changes, with a progress wheel indicating loading. It includes custom formatting for currency, percentages, and large numbers, and supports responsive resizing. The chart uses data from a GitHub-hosted dataset, with flags for donor countries loaded from an external directory. Styling is applied via an external stylesheet, and the visualization is designed to work in modern browsers with fallback support for Internet Explorer. The chart is built with D3 v5 and renders using SVG and canvas with animation.

GGerardoFurtado
74% match
Loading thumbnail…

OCHA CBPF chart

This animated D3.js chart visualizes OCHA Country-Based Pooled Funds (CBPF) data across multiple years. Built with SVG and canvas rendering, it combines three synchronized panels: a top panel showing fund overview metrics, a middle bar chart displaying donor contributions, and a beeswarm plot at the bottom. The visualization animates transitions when the selected year changes, with a progress wheel indicating loading. It includes custom formatting for currency, percentages, and large numbers, and supports responsive resizing. The chart uses data from a GitHub-hosted dataset, with flags for donor countries loaded from an external directory. Styling is applied via an external stylesheet, and the visualization is designed to work in modern browsers with fallback support for Internet Explorer. The chart is built with D3 v5 and renders using SVG and canvas with animation.

GGerardoFurtado
74% match
Loading thumbnail…

fresh block

This example assembles a set of interactive D3.js charts into a single dashboard, each presenting different facets of public budget and indicator data for a given year. The visualization shows multiple coordinated views, including bar charts, line charts, and region-based comparisons, with toggles for sorting and filtering by year, partner, or modality. The code loads data and chart logic from external scripts, using D3’s data-join and scales to render responsive SVG elements. It relies on `d3.select`, `d3.json`, and custom chart-building functions, while the layout adapts to container width. The charts are embedded via HTML `div` placeholders and external script tags, with no animation or brushing visible.

GGerardoFurtado
73% 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
70% match
Loading thumbnail…

Project

This interactive bar chart visualizes country-level data from a CSV file, allowing users to filter by continent and select among numerous socioeconomic metrics. The visualization updates dynamically, showing one bar per country, with bars sortable by population in ascending or descending order. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, and `d3.select` for DOM manipulation, while rendering as SVG with animated transitions. Dropdown menus and buttons control the displayed subset, leveraging D3's data-binding capabilities.

Ppatricknicholas27@gmail.com
70% match