Skip to main content
SimilarExport ZIP
100%

Cohort Trails

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 31, 2017
Created on Mar 31, 2017

Cohort Trails visualizes U.S. census population data, tracking five-year birth cohorts from 1850 to 2010. Animated dots represent each cohort’s population, with trailing lines showing decline as cohorts age; increases reflect net immigration exceeding mortality. The animation runs on a slider, toggled by the space bar. Built with d3.v4 and rendered using both SVG and Canvas, the code employs d3.nest for data aggregation and d3.scaleThreshold for year interpolation. Data originates from the Minnesota Population Center.

AI-generated description

Block-a-Day #15. An alternative presentation of data from Mike Bostock's Population Pyramid block. Census observations of population cohorts, those born in the same five-year span, are shown as dots animated over time, with trailing lines showing the decline in population as the cohort ages (increases correspond to net immigration exceeding mortality for the cohort).

Space bar toggles animation.

Data Source: Minnesota Population Center via Mike Bostock.

What I Learned: The animation/slider logic was a good exercise in boiling down more complex code to the bare necessities (all in, it's about 50 lines). The most fiddly bit is at line 177, where we adjust the slider width to account for the extra space to the left and right of the bar.

What I'd Do With More Time: Highlight a cohort to emphasize it trajectory over time. Break out male and female population. Could be very cool to toggle between absolute and relative (i.e. mortality) values.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

  1. Ideas over implementation. Do something novel, don't sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

Previously

forked from <a href='http://bl.ocks.org/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/48f76b7b7e8c482e1d227ab5410fcdcb'>Cohort Trails</a>

mit Licensed

Similar vizzes

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…

transition of bar chart

This interactive bar chart displays the top 10 U.S. states by population share for a selected age bracket, with data from 2008 Census estimates. A dropdown menu lets users switch between seven age groups, triggering animated transitions where bars reorder, resize, and update their value labels. Built with D3 v4, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for bar widths, and chained transitions with `.duration()` to animate enter, update, and exit selections. The SVG rendering includes hover effects that change bar color to brown.

TThanaporn-sk
68% match
Loading thumbnail…

transition of bar chart

This interactive bar chart displays the top 10 U.S. states by population share for a selected age bracket, with data from 2008 Census estimates. A dropdown menu lets users switch between seven age groups, triggering animated transitions where bars reorder, resize, and update their value labels. Built with D3 v4, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for bar widths, and chained transitions with `.duration()` to animate enter, update, and exit selections. The SVG rendering includes hover effects that change bar color to brown.

TThanaporn-sk
68% match
Loading thumbnail…

d3 time series small multiples

This example visualizes population growth in the top five North American countries from 1990 to 2010 using small multiples, with each of the 15 charts representing a unique country-year combination. It shows the trends and comparisons of population growth rates across these nations. The visualization uses D3 v7 with SVG rendering, employing a color scale from ColorBrewer for country distinction and a legend from Susie Lu’s d3-legend library. The data comes from the Global Development dataset, simplified for clarity. Each small multiple displays a line chart with axes, and a tooltip provides interactive details on hover.

AAndrew
68% 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
68% match
Loading thumbnail…

stacked/grouped

This interactive visualization compares U.S. state population distributions across seven age groups, with radio buttons toggling between grouped and stacked bar chart layouts. Built with D3.js version 3.5, it uses ordinal and linear scales, categorical color encoding, and SVG transitions. The animation shifts bars between stacked and side-by-side arrangements over 500 milliseconds. Population data comes from a CSV file, and hover tooltips are implemented through SVG text elements.

TThanaporn-sk
68% match
Loading thumbnail…

Population Pyramid

This population pyramid visualizes the distribution of U.S. male and female populations across five-year age brackets from 1850 to 2000. Overlapping translucent bars show both sexes simultaneously, with blue for males and pink for females, while arrow keys animate the displayed year. The D3 v3 code builds an SVG with sliding birthyear groups, using `d3.nest` to structure data from the Minnesota Population Center and `transition` to smoothly update bar heights and positions.

MMTClass
67% match
Loading thumbnail…

Module6

This visualization uses birth-rate data from 2000–2013 for 39 countries to show how national rates change over time. A time slider scrubs through the years, with each country represented by a small circle positioned along a vertical axis. The current year is highlighted in a large display, and country labels fade or emphasize as the user drags the slider. The chart is rendered using D3 v3 with SVG, presenting a clean, static-scale line-and-dot layout that lets viewers compare relative birth rates across countries and track temporal trends.

CClevejones
67% match