Skip to Content
🗺️ Using the MapTimeline And Playback

Last Updated: 4/7/2026

The Timeline & Play Button

The timeline slider and play button let you explore how Kansas populations and infrastructure changed from 1860 to 2020. This guide explains how to use these controls to watch history unfold across 160 years.

The Timeline Slider

The timeline slider appears at the top of the application, spanning the full width of the interface. It controls which year of data the map displays.

Slider Range and Steps

  • Minimum year: 1860
  • Maximum year: 2020
  • Step size: 10 years

The slider moves in 10-year increments, matching the U.S. Census Bureau’s decennial census schedule. You can select any of these 17 time points: 1860, 1870, 1880, 1890, 1900, 1910, 1920, 1930, 1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010, or 2020.

Using the Slider

Drag to a specific year: Click and drag the slider handle to any position. As you drag, the year label updates immediately to show the selected decade. Release the mouse button to load data for that year.

Click to jump: Click anywhere on the slider track to jump directly to that decade. The handle moves to the clicked position and the map updates.

Keyboard control: Click the slider to focus it, then use arrow keys to move forward or backward by 10-year increments.

The Year Label

The year label displays below the slider, showing the currently selected decade in large, clear text. When you change the slider position, the label updates instantly to reflect the new year. This provides constant feedback about which time period you’re viewing.

What Changes When You Move the Slider

Moving the slider triggers several updates across the map:

County Borders and Populations

The map loads new county boundary data for the selected year. County shapes changed over time as new counties were created or boundaries were redrawn. If you have the County Population Heat Map filter enabled, the color intensity updates to reflect population levels for the new year.

Infrastructure Layers

Railroads: Only railroad lines that were in operation by the selected year remain visible. Lines constructed after that year fade out. For example, at 1870, you’ll see only the earliest rail lines; by 1920, the network is much denser.

Interstates: Interstate highways appear only after their construction year. Most interstates were built between 1950 and 1980, so earlier decades show no interstate highways at all.

Rivers and Lakes: These natural features remain constant across all years.

Community Layers

Cities: City locations update to reflect the geographic data available for each decade. City population labels (visible on hover at state level or always visible at county level) show the population for the selected year, but only for years 1970–2020 where population data is available.

Schools, Healthcare, Tracts: These layers show current data and do not change based on the timeline slider in the current version of the application.

The Play Button

The play button sits to the right of the timeline slider. It automates the process of advancing through time, letting you watch Kansas history unfold without manual interaction.

Starting Playback

Click the play button (▶ icon) to begin automatic playback. The button icon changes to a pause symbol (⏸) to indicate playback is active.

How Playback Works

When playback is active:

  1. The slider advances by one step (10 years) every 3,500 milliseconds (3.5 seconds)
  2. The year label updates to show the new decade
  3. The map loads and displays data for the new year
  4. After 3.5 seconds, the slider advances again
  5. This continues until the slider reaches 2020 (the maximum year)

The 3.5-second interval gives you enough time to observe changes in population density, railroad expansion, interstate construction, and city growth before the next decade loads.

Pausing Playback

Click the pause button (⏸ icon) to stop automatic advancement. The slider remains at the current year, and you can manually adjust it or resume playback.

Playback at Maximum Year

When the slider reaches 2020 during playback, it stops automatically. Click the pause button to reset, then manually drag the slider back to an earlier year if you want to replay the sequence.

Watching Historical Patterns

Playback mode is especially powerful for observing long-term trends:

Railroad Expansion (1860–1920)

Start at 1860 and watch as green dashed lines spread across Kansas. Notice how railroads reached the eastern counties first, then extended westward. Observe which counties gained rail access early and which remained unconnected until later decades.

Interstate Construction (1950–1980)

Begin at 1950 and watch the blue interstate highways appear. I-70 and I-35 were among the first to be built, creating major transportation corridors. Notice how interstate access concentrated in certain regions while bypassing others.

Population Shifts (1860–2020)

Enable the County Population Heat Map filter and start playback at 1860. Watch as the blue shading intensifies in some counties (indicating population growth) while fading in others (indicating population decline). Eastern counties and those along major transportation routes often show darker blue, while rural western counties show lighter shades.

Tips for Effective Timeline Use

Start at the beginning: Begin at 1860 to understand the baseline before railroads and modern infrastructure existed.

Use playback for overview: Let the play button run through all decades to get a sense of major trends.

Pause for details: Stop playback when you notice an interesting change, then zoom into specific counties to investigate.

Replay key periods: Manually drag the slider back and forth across critical decades (like 1880–1920 for railroad expansion or 1950–1980 for interstate construction) to closely examine those transitions.

Combine with filters: Turn layers on and off during playback to isolate specific factors. For example, show only railroads and the population heat map to focus on the relationship between rail access and population growth.

Technical Note

The timeline slider updates the inputValue reactive property in the Vue application. This triggers a cascade of updates across all data components, each of which fetches or filters data based on the new year. The 750-millisecond transition duration for most animations ensures smooth visual updates without overwhelming the viewer.

What’s Next

Now that you understand the timeline controls:

State View And FiltersAccessibility