Age pyramid

100%

✓ Published0🌍 Public

Last edited Jan 19, 2024

Created on Jan 19, 2024

Forked from Temperature: from ObservableHQ

This visualization shows the age distribution of a population, separated by sex and marital status. The pyramid displays males on the left and females on the right, with the y-axis showing age from 0 to 90 and the x-axis representing population counts in thousands. Each age group is broken down by marital status (single, married, divorced, widowed), with different colors representing each category. The chart uses the Observable Plot library, with `Plot.plot`, `Plot.areaX`, and `Plot.ruleX`/`Plot.ruleY` to construct the pyramid, while D3's `d3.csv` loads the population data.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Plot

This example displays a population pyramid using horizontally stacked areas, showing age distribution by sex and marital status across German population data from the Federal Institute for Population Research. Men are plotted to the left of the central axis, women to the right, with translated category labels for single, married, divorced, and widowed individuals. The primary plot uses Observable Plot’s `Plot.areaX` with negative and positive x-values to mirror the sexes, while a second version applies separate marks with shifted axes. Both render as SVG with an animated legend.

SStefan Apostol

79% match

Loading thumbnail…

Population Pyramid

This visualization shows the changing distribution of the U.S. population by age and sex from 1850 to 2000, using a population pyramid where blue bars represent males and pink bars represent females. Interactive arrow keys animate the display through decennial census years. The code uses D3 v3 with SVG rendering, employing `d3.svg.axis`, `d3.nest`, and `transition.attr` to slide bars by birth year and update heights. Data comes from the Minnesota Population Center.

Mmbostock

77% match

Loading thumbnail…

2015-2100 Population Data

This visualization presents global population dynamics from 2015 to 2100 using an animated population pyramid. The chart displays age structure (0-19 years) on the vertical axis and population counts on the horizontal axis, with male and female data rendered as two back-to-back horizontal bar series. The animation steps through each year, updating the bars to reflect changing age distributions over time. The design uses a muted color palette to distinguish sexes, with male and female data shown on opposite sides of the central axis. The SVG rendering in D3.v3 creates a smooth, continuously updating transition that allows viewers to observe demographic shifts across the 85-year period at a glance.

BBukenyae

72% match

Loading thumbnail…

Untitled

This animated population pyramid uses Icelandic census data from Hagstofa Íslands to display the distribution of males and females across ages for each year from 1841 to 2015. Two mirrored bar charts show the populations, with the year and age axes controlled by sliders. Built with D3 v3 and React, the visualization relies on `d3.scale.linear` for axes and `d3.svg.axis` for tick marks, while data is fetched via `d3.json` and `d3.xhr` in a custom `load_px_data` function. The animation updates the bar heights and axis ranges as the year changes.

BBTumbler

72% match

Loading thumbnail…

Fork D3 Tarea

This animated population pyramid uses D3 v7 to display demographic data from a CSV file across birth cohorts and years. The visualization shows population counts by age and gender, with bars representing different birth years that slide horizontally as the displayed year changes via arrow key navigation. The code employs d3.scale.linear, d3.nest for data aggregation, and transition methods with duration to animate the bar heights and container position smoothly between years.

Wwandrest

69% match

Loading thumbnail…

Population and age

An interactive bar chart displays population distribution across age groups for selected years, with a slider controlling the year from 2015 to 2019. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, and `scaleQuantile` for positioning and color encoding, with SVG rectangles animated via `transition`. Data is loaded from CSV files using `d3.queue` and `d3.csv`, while React state is not actually implemented despite the framework metadata.

Hhamzavg

69% match

Loading thumbnail…

Population and age

This visualization shows the U.S. population distribution across age groups from 2010 to 2019, using a slider to animate between years. It renders an SVG bar chart with D3 v4, where each bar’s height and color encode population size via `d3.scaleLinear` and `d3.scaleQuantile`. Transitions smoothly update bars and axes over two seconds. Data is loaded from ten CSV files using `d3.queue` and `d3.csv`. The code relies on D3’s `scaleBand`, `axisBottom`, `axisLeft`, and `transition` APIs.

Hhamzavg

69% match

Loading thumbnail…

3D BAR GRAPH

This 3D bar graph visualizes population data by age group, with bar height encoding male population values in millions. The visualization uses the d3-x3d library to render three-dimensional bars within an X3DOM scene, while D3 v5 handles CSV parsing and data binding. The chart initially displays random test data before loading the actual population dataset from a GitHub gist, then updates the scene with the real values. The page includes a light green title and sky blue background for visual context.

Kkakumanusreya

68% match