Data Visualization with D3

Interactive arc diagram showing character co-occurrence in a fictional novel. Arc thickness encodes shared scene frequency; node size encodes total scenes.

A line graph with the area below the line filled, emphasizing cumulative volume or total magnitude over time.

Horizontal bar chart showing AI tool adoption rates across industry sectors, revealing sharp divergence between early adopters and laggards.

Interactive box and whisker plot demonstrating quartile distribution, outliers, skew, and spread across five population groups.

Shows the distribution of data through quartiles. The box spans Q1 to Q3, the line marks the median, and whiskers extend to min/max (excluding outliers).

A brainstorm rendered as a force-directed mind map. A central concept radiates outward to related ideas, which connect further to supporting concepts. Explanatory text covers how mind maps work and what this specific example shows.

Bubble chart showing the relationship between education index, life expectancy, and population size across 26 countries and five world regions, 2024 estimates.

Proportional symbol map showing household food assistance reach by U.S. state. Circle area is proportional to households served, FY 2024.

Bullet graphs comparing actual humanitarian program performance against targets across qualitative performance bands.

Japanese Candlestick Chart: OHLC price data visualised as candlestick symbols, revealing bullish and bearish market psychology through body size, colour, and wick length.

Non-ribbon chord diagram showing coordination strength between eight humanitarian organizations. Node position on circle; cubic Bézier curves encode relationship presence and strength.

World choropleth map of GDP per capita. Darker walnut tones indicate higher normalized values. Interactive hover, zoom, and filter.

Zoomable circle packing chart showing the hierarchy and relative scale of AI applications across humanitarian domains.

Connection map showing active humanitarian aid corridors between coordination hubs and field operation sites worldwide. Arc weight encodes annual tonnage, FY 2024.

Kernel density plot comparing humanitarian aid response time distributions across three crisis types: natural disaster, conflict, and displacement.

Interactive donut chart showing humanitarian AI investment split across five application domains. Arc length encodes proportion; center displays totals and segment values on hover.

Dot Map: one point per public library branch across the contiguous United States, revealing how library density clusters in the Northeast and Great Lakes while thinning dramatically across the interior West.

Interactive dot matrix chart showing distribution and proportions across categories in an organised grid, with filtering and animated transitions.

Interactive error bar chart overlaid on a bar chart. Switch between SD, SE, 95% CI and min–max modes. hai palette. D3-powered.

Flow map showing global forced displacement corridors by origin country. Ribbon width encodes volume of displaced persons. Data: simulated 2024.

Gantt chart showing the Humanitarian Data Platform Phase 1 project schedule, with critical path, task dependencies, milestone markers, and completion tracking.

Interactive heatmap showing AI adoption intensity across eight world regions and seven sectors. Color encodes index score; hover highlights row and column context.

Histogram: frequency distribution of daily commute times, revealing right-skewed distribution with peak concentration between 20–35 minutes and a long tail of extreme commuters.

Annotated illustration diagram of the human heart: cross-section with interactive callout labels explaining anatomy and blood flow direction.

Interactive Kagi chart. Time-independent price action chart showing Yang (thick/demand) and Yin (thin/supply) lines with shoulder and waist reversal markers. hai palette, D3-powered.

Multi-series line graph showing AI capability index divergence across high-, middle-, and low-income country groups from 2016 to 2024. Gap widened from 22 to 67 index points.

Marimekko chart showing global humanitarian aid allocation: column width encodes each region

Interactive D3 visualisation of multimodal distributions. Gaussian mixture sampler, KDE curve, histogram, individual component curves, Ashman D and bimodality coefficient. hai palette.

Grouped bar chart comparing humanitarian funding requested, received, and actual expenditure across five geographic regions, FY 2024.

Force-directed network diagram showing how humanitarian organisations connect to AI capabilities and operational domains.

Interactive Nightingale Rose (Coxcomb) chart showing humanitarian AI deployment activity by month. Petal radius encodes value; an area-correction toggle reveals the distortion inherent to the chart form.

Open-High-Low-Close chart of Chicago Wheat futures. January selloff of 9.6% peak-to-trough before February recovery. Daily price bars with 10-session SMA overlay.

Parallel coordinates plot comparing 28 humanitarian AI programs across 7 performance dimensions. Brush axes to filter. Drag axis headers to reorder.

Parallel Sets: proportional ribbon flows across Education, Employment Status, and Income Bracket dimensions, revealing how categorical variables jointly distribute across a survey population.

Interactive pictogram chart comparing energy source adoption across five regions. Each icon represents 2% of a region

Interactive D3 pie chart showing proportional composition. hai palette. Click slices to explode, hover for values, direct arc labels. Max 5 slices enforced.

Point and Figure Chart: time-independent X and O columns reveal supply-demand breakouts, support and resistance levels, and trend changes without time-scale distortion.

Interactive population pyramid showing age and sex distribution for two countries side by side, with shape interpretation and animated transitions between datasets.

Interactive proportional area chart comparing AI for Good investment by world region. Circle area encodes value. A radius-error toggle demonstrates the common implementation mistake of using radius instead of area.

Radar chart comparing humanitarian response capability across six dimensions for three regions: Sub-Saharan Africa, MENA, and South Asia.

Bars arranged around a central point, each extending outward. An eye-catching alternative to a conventional bar chart for cyclic or part-to-whole data.

Radial bar chart showing humanitarian aid delivery volume across 12 months. November peaks at 318,000 MT; June troughs at 188,000 MT. Polar coordinate aesthetic with honest distortion acknowledgement.

Columns arranged on a circular axis. Variation on radial bar — good for showing cyclic patterns like time-of-day or month-of-year data.

Radial Column Chart: monthly average temperatures plotted on a polar coordinate system, with bars extending outward from the centre on concentric circle value rings, revealing the cyclical seasonal pattern as a visual shape.

Interactive Sankey diagram showing global energy flow from sources through conversion processes to end uses. Flow width proportional to energy quantity (EJ).

Interactive D3 scatterplot with OLS trend line, brush selection, group colour filter, and live Pearson r readout. hai palette. Correlation is not causation.

Horizontal span chart comparing the performance range of 12 leading AI models across eight humanitarian task domains. Each bar spans from the worst to the best model score. Crisis detection and conflict risk show the widest spread.

Spiral plot showing monthly humanitarian aid disbursements over four years. The Archimedean spiral layout reveals the Q4 peak and Q2 trough seasonal pattern aligned across all four annual arms.

Stacked area chart of humanitarian funding across five sectors, Jan 2022–Dec 2024. Food Security dominates throughout. Shelter spikes in mid-2022. Total peaks at $1.14B in Nov 2023.

Stacked bar chart showing humanitarian AI program funding by source from 2020 to 2024. Toggle between absolute and 100% stacked views.

Stem and Leaf Plot: exam scores for two class sections arranged by place value, preserving every raw data point while revealing distribution shape, mode, outliers, and the median in a single typographic display.

Interactive stream graph showing the rise and fall of music genre popularity by streaming volume from 2000 to 2023. Organic flowing shapes reveal trend patterns over time.

Interactive D3 sunburst diagram. Click any arc to zoom into that branch. Breadcrumb trail tracks your position. Arc angles proportional to value. hai palette.

Animated tally chart showing AI incident report frequency by category for Q3 2024. Marks appear one by one using D3

Multi-track scaled timeline showing key events in humanitarian response history across legal frameworks, data and technology, major operations, and humanitarian financing — 1991 to 2024.

Visual timetable of humanitarian aid convoys across seven Kenya corridors. Monday shows one delayed convoy, one cancellation, and two concurrent northeast services requiring coordination.

Collapsible tree diagram of the humanitarian AI capability taxonomy. Four branches: Data Collection, Analysis & Prediction, Decision Support, and Delivery & Accountability.

Treemap: global R&D spending by sector and subcategory, rendered as nested squarified rectangles. Area encodes proportion of total spend. Click any parent sector to zoom into its subcategories.

Interactive Venn diagram with 3 sets showing overlapping relationships between domain expertise, data literacy, and communication skills required for AI collaboration.

Combines a box plot with a kernel density estimate. The shape shows the full distribution — wider sections indicate higher density of values.

Words positioned and sized by frequency or importance. A quick visual summary of term prominence in a corpus — best for orientation, not precision.