Dutch Population Dashboard
Age Groups
Select a year to view the age distribution in that year. Alternatively you can use the buttons below the chart to select the previous or next year.
option.toLowerCase().includes($refs.input.value.toLowerCase()));
"
@keydown="
if ($event.key == 'Enter') selectValue(filteredOptions[0]);
if ($event.key == 'Escape') resetInput();
"
name="year-select-value"
class="w-full py-3 px-4 cursor-pointer rounded
input outline outline-stone-500 focus:rounded-t sh"
placeholder="search..."
value="2024"
autocomplete="off"
hx-post="/select"
hx-trigger="selectedByClick"
hx-swap="none"
hx-include="
previous [name=csrfmiddlewaretoken]
"
hx-indicator="#age-distribution-bar-chart-wrapper"
/>
Population Growth
Select a population group to view the growth in population for that group over time.
option.toLowerCase().includes($refs.input.value.toLowerCase()));
"
@keydown="
if ($event.key == 'Enter') selectValue(filteredOptions[0]);
if ($event.key == 'Escape') resetInput();
"
name="group-select-value"
class="w-full py-3 px-4 cursor-pointer rounded
input outline outline-stone-500 focus:rounded-t sh"
placeholder="search..."
value="Total"
autocomplete="off"
hx-post="/select"
hx-trigger="selectedByClick"
hx-swap="none"
hx-include="
previous [name=csrfmiddlewaretoken]
"
hx-indicator="#population-growth-line-chart-wrapper"
/>
Data
Code
The data comes from the Dutch Centraal Bureau voor de Statistiek (CBS). The data is retrieved periodically through the StatLine API. The population dataset can be found here.
The code that implements this dashboard is licensed under the open-source MIT license and can be found on the GitHub page.