Public BI Contributions

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.

GGerardoFurtado

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

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

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

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

80% match

Loading thumbnail…

OCHA CBPF chart

This interactive visualization shows humanitarian funding for OCHA’s Country-Based Pooled Funds across multiple years, with a top panel displaying total contributions and a stacked bar chart (using SVG) breaking down donor amounts per country. Below, a beeswarm plot (rendered with canvas and animated via `d3.forceSimulation`) distributes circles—each representing a funded project—along a timeline, revealing funding density and outliers. The chart uses D3 v5’s `d3.format`, `d3.local`, and `transition.attrTween` to animate year-to-year transitions, with a tooltip and flag images loaded from the CBPF GitHub repository. Data is embedded via a `data-year` attribute, and the layout adapts responsively through the viewBox.

GGerardoFurtado

78% match

Loading thumbnail…

OCHA CBPF chart

This chart visualizes humanitarian funding data for the Central Emergency Response Fund (CERF) and Country-Based Pooled Funds (CBPF), presenting annual donor contributions across multiple years. It combines a horizontal bar chart for aggregated funding by donor with an animated beeswarm plot that shows individual contribution values over time. The visualization uses a custom SVG and canvas rendering approach, with tooltips providing detailed financial figures on hover. A progress wheel indicates loading, and the chart animates transitions between years, allowing comparison of funding patterns across donor categories. The design supports responsive resizing and includes custom styling for a polished presentation.

GGerardoFurtado

77% match

Loading thumbnail…

OCHA CBPF chart

This chart visualizes humanitarian funding data for the Central Emergency Response Fund (CERF) and Country-Based Pooled Funds (CBPF), presenting annual donor contributions across multiple years. It combines a horizontal bar chart for aggregated funding by donor with an animated beeswarm plot that shows individual contribution values over time. The visualization uses a custom SVG and canvas rendering approach, with tooltips providing detailed financial figures on hover. A progress wheel indicates loading, and the chart animates transitions between years, allowing comparison of funding patterns across donor categories. The design supports responsive resizing and includes custom styling for a polished presentation.

GGerardoFurtado

77% match