Localised article for Doncaster

This is a short text description of the article that might take up a couple of lines

DD MMM YYYY

Animation on

Change selected place using the selection box below

Doncaster

Scroll to begin

This is a large text caption. This template has captions and selections that are specific to Doncaster.

This is a section title

This is a short paragraph of text to demonstrate the standard "medium" column width, font size and line spacing of the template.

This is a second short paragraph of text to demonstrate the size of the paragraph spacing in the template.

"This is an example of a large embedded quotation."—A. Person

Embedded charts or media

Below is an embedded chart. It is set to the same width as the column, "medium" (680px), but could also be "narrow" (540px), "wide" (980px) or "full" width. All options are responsive to fit the width of narrow screens.

The chart highlights Yorkshire-Humber , the parent region/nation of Doncaster.

Population by region/nation, 2020

Source: ONS mid-year population estimates.

Gridded charts or media

Below is a grid that can contain charts or any other kind of visual media. The grid can fit in a medium, wide or full-width column, and the media width itself can be narrow (min 200px), medium (min 300px), wide (min 500px) or full-width. The grid is responsive, and will re-flow on smaller screens.

South East

Scotland

East Midlands

Northern Ireland

North West

South West

London

West Midlands

North East

Yorkshire-Humber

East

Wales

Source: ONS mid-year population estimates.

This is a dynamic chart section

The chart below will respond to the captions as you scroll down. The "Scroller" component is set to "splitscreen" mode, which means the captions will be on the left side on larger screens.

The interactions are via Javascript functions that are called when each caption scrolls into view.

This chart shows the area in square kilometres of each local authority district in the UK. Each circle represents one district. The scale is logarithmic.

The radius of each circle shows the total population of the district.

The vertical axis shows the density of the district in people per hectare.

The colour of each circle shows the part of the country that the district is within.

Select a district

Use the selection box below or click on the chart to select a district. The chart will also highlight the other districts in the same part of the country.

Doncaster

This is a full-width chart demo

Below is an example of a media grid where the column with is set to "full". This allows for full width images and charts.

Mid-year population by district, 2001 to 2020

This is an optional caption for the above chart or media. It can contain HTML code and hyperlinks, and wrap onto multiple lines.

This is a dynamic map section

The map below will respond to the captions as you scroll down. The scroller is not set to splitscreen, so captions are placed over the map on any screen size.

This map shows population density by district. Districts are coloured from least dense to most dense . You can hover to see the district name and density.

The map now shows median age, from youngest to oldest .

The map is now zoomed on Doncaster , which has a median age of 43.2 years.

Select a district

Use the selection box below or click on the map to select and zoom to a district.

Doncaster

How to use this template

You can find the source code and documentation on how to use this template in this Github repo.

This is a section title

Embedded charts or media

Gridded charts or media

This is a dynamic chart section

Select a district

This is a full-width chart demo

This is a dynamic map section

Select a district

Other versions of this article

How to use this template