Ridgeline chart Since 0.13.0
Multiple series shown as a ridgeline chart/Joyplot.
This type of chart is sometimes known as a Joyplot after a version, showing pulses from the pulsar CP 1919 in the Cambridge Encyclopaedia of Astronomy, was featured on the cover of Joy Division's Unknown Pleasures album. They work well when there is a clear pattern to observe but they can also hide data where overlaps take place.Usage
To use this component in a Nunjucks template you would add the following (assumes you've loaded OI Lume Viz into componentNamespace: 'oi'):
{% comp 'oi.chart.ridgeline', { "config": config } %}{% endcomp %}where config is replaced by an object that contains some or all of these variables:
data- Either a reference to a CSV file in the Lume site or an array of rows with named attributescolumns- As with many of the visualisation types you can optionally add virtual columns.colours- Define some visualisation-specific named colours.width- Set a specific width for the visualisation.height- Set a specific height for the visualisation.axis- Define thex(horizontal) axis.legend- Define the legend.series- An ordered array of series. Each one is of the form:title- The display name of the series.x- The title of the column to use for the horizontal axis value.y- The title of the column to use for the vertical axis value.colour- The hex code to use to colour this series.tooltip- Either a string, template string, or the column heading to use to build a tooltip.fill- The hex code to use as a fill colour. Could also reference agradientusing e.g.url(#gradientName).fillOpacity- (0-1) The value to use for the opacity of the fill. Default0.8.line- Properties of the series line:stroke-width- The stroke-width.
gradient- Define some gradients:name- The name of the gradient that we will use elsewhere.stops- A list of colour stops e.g.#053061 0%, #2166ac 10%, #4393c3 20%, #92c5de 30%, #d1e5f0 40%, #f7f7f7 50%, #fddbc7 60%, #f4a582 70%, #d6604d 80%, #b2182b 90%, #67001f 100%.stroke-linecap.- The stroke-linecap
ridgeline- Properties of the ridgeline:height- The maximum vertical extent of the data as a multiple of the series spacing. A value closer to 0 will make shallower ridges. Default is2.curvature- You can apply a curvature (0 = none, 1 = maximum) to all the lines. Default is 0.
attribution- Add a line of attribution text under the visualisation.
Examples
- Basic
- Set the colour of each series
- Set the fill of each series
- Add tick marks and axis titles
- Add custom tooltips
- Scale the series
- Add curvature to the lines
- Big example
1. Basic§
Let's start with a dataset that contains the distribution of average daily temperature, by month, for Leeds (data from Weather Underground). We create multiple series that each have a title, an x column reference and a y column reference. These will be coloured using the site-wide default series colours. The series will be displayed with the first at the top and last at the bottom.
This example was made with config:
YAML
data: test.data.leeds-weather
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
- title: May 2023
x: Average temperature (C)
y: 2023-05
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
JSON
{
"data": "test.data.leeds-weather",
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09"
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10"
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11"
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12"
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01"
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02"
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03"
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04"
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05"
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06"
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07"
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08"
}]
}2. Set the colour of each series§
For each series we can set its colour.
This example was made with config:
YAML
data: test.data.leeds-weather
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
colour: '#005776'
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
colour: '#005776'
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
colour: '#005776'
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
colour: '#005776'
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
colour: '#005776'
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
colour: '#005776'
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
colour: '#005776'
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
colour: '#005776'
- title: May 2023
x: Average temperature (C)
y: 2023-05
colour: '#005776'
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
colour: '#005776'
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
colour: '#005776'
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
colour: '#005776'
JSON
{
"data": "test.data.leeds-weather",
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09",
"colour": "#005776"
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10",
"colour": "#005776"
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11",
"colour": "#005776"
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12",
"colour": "#005776"
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01",
"colour": "#005776"
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02",
"colour": "#005776"
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03",
"colour": "#005776"
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04",
"colour": "#005776"
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05",
"colour": "#005776"
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06",
"colour": "#005776"
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07",
"colour": "#005776"
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08",
"colour": "#005776"
}]
}3. Set the fill of each series§
By default, the fill of each series is set to #ffffff and the fillOpacity is set to 0.8. But you can over-ride those on a per-series basis. Note that the fill is made by joining up the two ends of the series so if they don't have the same value, or you have lower values in the series, you may get unexpected results.
This example was made with config:
YAML
data: test.data.leeds-weather
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
fill: '#000000'
fillOpacity: 0.25
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
fill: '#000000'
fillOpacity: 0.25
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
fill: '#000000'
fillOpacity: 0.25
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
fill: '#000000'
fillOpacity: 0.25
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
fill: '#000000'
fillOpacity: 0.25
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
fill: '#000000'
fillOpacity: 0.25
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
fill: '#000000'
fillOpacity: 0.25
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
fill: '#000000'
fillOpacity: 0.25
- title: May 2023
x: Average temperature (C)
y: 2023-05
fill: '#000000'
fillOpacity: 0.25
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
fill: '#000000'
fillOpacity: 0.25
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
fill: '#000000'
fillOpacity: 0.25
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
fill: '#000000'
fillOpacity: 0.25
JSON
{
"data": "test.data.leeds-weather",
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07",
"fill": "#000000",
"fillOpacity": 0.25
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08",
"fill": "#000000",
"fillOpacity": 0.25
}]
}4. Add tick marks and axis titles§
Sometimes it can be useful to add tick marks to the x-axis and axis titles.
This example was made with config:
YAML
data: test.data.leeds-weather
axis:
x:
title:
label: Average temperature (°C)
tick:
spacing: 5
'y':
title:
label: Months
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
- title: May 2023
x: Average temperature (C)
y: 2023-05
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
JSON
{
"data": "test.data.leeds-weather",
"axis": {
"x": {
"title": {
"label": "Average temperature (°C)"
},
"tick": {
"spacing": 5
}
},
"y": {
"title": {
"label": "Months"
}
}
},
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09"
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10"
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11"
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12"
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01"
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02"
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03"
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04"
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05"
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06"
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07"
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08"
}]
}5. Add custom tooltips§
As in other visualisations, you can set a tooltip per series that refers to a column (or virtual column) in the data. However, you can also pass a string template which can refer to that series' x, y, colour and title values using the shorthand {{ _x }}, {{ _y }}, {{ _title }} and {{ _colour }}.
This example was made with config:
YAML
data: test.data.leeds-weather
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: May 2023
x: Average temperature (C)
y: 2023-05
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
colour: '#005776'
tooltip: |-
<strong>{{ _title }}</strong>
{{ _y }} day(s) averaged {{ _x }}°C
JSON
{
"data": "test.data.leeds-weather",
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08",
"colour": "#005776",
"tooltip": "<strong>{{ _title }}</strong>\n{{ _y }} day(s) averaged {{ _x }}°C"
}]
}6. Scale the series§
By default, the maximum vertical extent of the data will be 2 times the spacing of the series. We can change that by setting ridgeline → height. A larger value will make the ridges taller and make the series closer together. A value closer to 0 will make the ridges shallower and the series further apart.
This example was made with config:
YAML
data: test.data.leeds-weather
ridgeline:
height: 4
axis:
x:
title:
label: Average temperature (°C)
tick:
spacing: 5
'y':
title:
label: Months
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
- title: May 2023
x: Average temperature (C)
y: 2023-05
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
JSON
{
"data": "test.data.leeds-weather",
"ridgeline": {
"height": 4
},
"axis": {
"x": {
"title": {
"label": "Average temperature (°C)"
},
"tick": {
"spacing": 5
}
},
"y": {
"title": {
"label": "Months"
}
}
},
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09"
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10"
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11"
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12"
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01"
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02"
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03"
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04"
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05"
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06"
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07"
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08"
}]
}7. Add curvature to the lines§
By default the data are joined by straight lines. You can apply a curvature (0 = none, 1 = maximum) to all the lines by setting ridgeline → curvature.
This example was made with config:
YAML
data: test.data.leeds-weather
ridgeline:
curvature: 0.75
series:
- title: Sep 2022
x: Average temperature (C)
y: 2022-09
- title: Oct 2022
x: Average temperature (C)
y: 2022-10
- title: Nov 2022
x: Average temperature (C)
y: 2022-11
- title: Dec 2022
x: Average temperature (C)
y: 2022-12
- title: Jan 2023
x: Average temperature (C)
y: 2023-01
- title: Feb 2023
x: Average temperature (C)
y: 2023-02
- title: Mar 2023
x: Average temperature (C)
y: 2023-03
- title: Apr 2023
x: Average temperature (C)
y: 2023-04
- title: May 2023
x: Average temperature (C)
y: 2023-05
- title: Jun 2023
x: Average temperature (C)
y: 2023-06
- title: Jul 2023
x: Average temperature (C)
y: 2023-07
- title: Aug 2023
x: Average temperature (C)
y: 2023-08
JSON
{
"data": "test.data.leeds-weather",
"ridgeline": {
"curvature": 0.75
},
"series": [{
"title": "Sep 2022",
"x": "Average temperature (C)",
"y": "2022-09"
},{
"title": "Oct 2022",
"x": "Average temperature (C)",
"y": "2022-10"
},{
"title": "Nov 2022",
"x": "Average temperature (C)",
"y": "2022-11"
},{
"title": "Dec 2022",
"x": "Average temperature (C)",
"y": "2022-12"
},{
"title": "Jan 2023",
"x": "Average temperature (C)",
"y": "2023-01"
},{
"title": "Feb 2023",
"x": "Average temperature (C)",
"y": "2023-02"
},{
"title": "Mar 2023",
"x": "Average temperature (C)",
"y": "2023-03"
},{
"title": "Apr 2023",
"x": "Average temperature (C)",
"y": "2023-04"
},{
"title": "May 2023",
"x": "Average temperature (C)",
"y": "2023-05"
},{
"title": "Jun 2023",
"x": "Average temperature (C)",
"y": "2023-06"
},{
"title": "Jul 2023",
"x": "Average temperature (C)",
"y": "2023-07"
},{
"title": "Aug 2023",
"x": "Average temperature (C)",
"y": "2023-08"
}]
}8. Big example§
Here is an example inspired by a BBC News article that uses world daily surface air temperature (ECMWF Reanalysis v5 from C3S). The original data is provided with average global temperature per day per year. For each day the temperature difference for that day compared with the 1991-2020 average is found and added to 0.1°C wide bins to get the data for the plot. We define a gradient with a name (BuRd) and a series of colour stops; the gradient is used as the fill value for each series. We set the line → stroke-width for each line to make them thinner.
This example was made with config:
YAML
data: test.data.era5_world_t2_year
width: 600
height: 800
ridgeline:
height: 10
curvature: 0.5
axis:
x:
title:
label: Temperature difference from the 1991-2020 average (°C)
tick:
spacing: 0.5
min: -1.5
max: 1.5
'y':
title:
label: Number of days each year
gradient:
- name: BuRd
stops: >-
#053061 0%, #2166ac 10%, #4393c3 20%, #92c5de 30%, #d1e5f0 40%, #f7f7f7
50%, #fddbc7 60%, #f4a582 70%, #d6604d 80%, #b2182b 90%, #67001f 100%
series:
- title: 1940
x: Temperature difference from 1991-2020 avg (°C)
y: 1940
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1940</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1941
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1941</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1942
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1942</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1943
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1943</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1944
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1944</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1945
x: Temperature difference from 1991-2020 avg (°C)
y: 1945
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1945</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1946
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1946</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1947
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1947</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1948
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1948</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1949
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1949</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1950
x: Temperature difference from 1991-2020 avg (°C)
y: 1950
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1950</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1951
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1951</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1952
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1952</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1953
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1953</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1954
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1954</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1955
x: Temperature difference from 1991-2020 avg (°C)
y: 1955
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1955</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1956
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1956</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1957
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1957</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1958
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1958</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1959
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1959</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1960
x: Temperature difference from 1991-2020 avg (°C)
y: 1960
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1960</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1961
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1961</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1962
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1962</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1963
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1963</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1964
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1964</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1965
x: Temperature difference from 1991-2020 avg (°C)
y: 1965
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1965</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1966
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1966</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1967
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1967</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1968
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1968</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1969
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1969</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1970
x: Temperature difference from 1991-2020 avg (°C)
y: 1970
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1970</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1971
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1971</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1972
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1972</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1973
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1973</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1974
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1974</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1975
x: Temperature difference from 1991-2020 avg (°C)
y: 1975
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1975</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1976
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1976</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1977
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1977</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1978
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1978</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1979
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1979</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1980
x: Temperature difference from 1991-2020 avg (°C)
y: 1980
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1980</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1981
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1981</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1982
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1982</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1983
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1983</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1984
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1984</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1985
x: Temperature difference from 1991-2020 avg (°C)
y: 1985
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1985</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1986
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1986</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1987
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1987</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1988
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1988</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1989
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1989</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1990
x: Temperature difference from 1991-2020 avg (°C)
y: 1990
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1990</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1991
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1991</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1992
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1992</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1993
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1993</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1994
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1994</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 1995
x: Temperature difference from 1991-2020 avg (°C)
y: 1995
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1995</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1996
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1996</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1997
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1997</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1998
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1998</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 1999
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>1999</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 2000
x: Temperature difference from 1991-2020 avg (°C)
y: 2000
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2000</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2001
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2001</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2002
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2002</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2003
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2003</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2004
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2004</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 2005
x: Temperature difference from 1991-2020 avg (°C)
y: 2005
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2005</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2006
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2006</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2007
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2007</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2008
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2008</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2009
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2009</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 2010
x: Temperature difference from 1991-2020 avg (°C)
y: 2010
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2010</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2011
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2011</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2012
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2012</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2013
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2013</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2014
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2014</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 2015
x: Temperature difference from 1991-2020 avg (°C)
y: 2015
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2015</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2016
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2016</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2017
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2017</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2018
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2018</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2019
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2019</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: 2020
x: Temperature difference from 1991-2020 avg (°C)
y: 2020
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2020</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2021
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2021</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2022
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2022</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
- title: ''
x: Temperature difference from 1991-2020 avg (°C)
y: 2023
colour: black
fill: 'url(#BuRd)'
tooltip: |-
<strong>2023</strong>
{{ _x }}°C: {{ _y }} days
line:
stroke-width: 1
JSON
{
"data": "test.data.era5_world_t2_year",
"width": 600,
"height": 800,
"ridgeline": {
"height": 10,
"curvature": 0.5
},
"axis": {
"x": {
"title": {
"label": "Temperature difference from the 1991-2020 average (°C)"
},
"tick": {
"spacing": 0.5
},
"min": -1.5,
"max": 1.5
},
"y": {
"title": {
"label": "Number of days each year"
}
}
},
"gradient": [{
"name": "BuRd",
"stops": "#053061 0%, #2166ac 10%, #4393c3 20%, #92c5de 30%, #d1e5f0 40%, #f7f7f7 50%, #fddbc7 60%, #f4a582 70%, #d6604d 80%, #b2182b 90%, #67001f 100%"
}],
"series": [{
"title": 1940,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1940,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1940</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1941,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1941</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1942,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1942</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1943,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1943</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1944,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1944</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1945,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1945,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1945</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1946,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1946</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1947,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1947</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1948,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1948</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1949,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1949</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1950,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1950,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1950</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1951,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1951</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1952,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1952</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1953,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1953</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1954,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1954</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1955,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1955,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1955</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1956,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1956</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1957,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1957</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1958,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1958</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1959,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1959</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1960,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1960,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1960</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1961,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1961</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1962,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1962</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1963,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1963</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1964,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1964</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1965,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1965,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1965</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1966,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1966</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1967,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1967</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1968,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1968</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1969,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1969</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1970,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1970,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1970</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1971,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1971</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1972,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1972</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1973,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1973</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1974,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1974</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1975,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1975,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1975</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1976,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1976</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1977,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1977</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1978,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1978</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1979,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1979</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1980,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1980,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1980</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1981,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1981</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1982,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1982</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1983,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1983</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1984,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1984</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1985,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1985,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1985</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1986,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1986</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1987,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1987</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1988,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1988</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1989,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1989</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1990,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1990,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1990</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1991,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1991</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1992,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1992</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1993,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1993</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1994,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1994</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 1995,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1995,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1995</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1996,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1996</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1997,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1997</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1998,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1998</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 1999,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>1999</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 2000,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2000,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2000</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2001,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2001</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2002,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2002</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2003,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2003</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2004,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2004</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 2005,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2005,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2005</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2006,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2006</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2007,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2007</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2008,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2008</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2009,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2009</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 2010,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2010,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2010</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2011,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2011</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2012,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2012</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2013,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2013</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2014,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2014</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 2015,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2015,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2015</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2016,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2016</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2017,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2017</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2018,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2018</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2019,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2019</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": 2020,
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2020,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2020</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2021,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2021</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2022,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2022</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
},{
"title": "",
"x": "Temperature difference from 1991-2020 avg (°C)",
"y": 2023,
"colour": "black",
"fill": "url(#BuRd)",
"tooltip": "<strong>2023</strong>\n{{ _x }}°C: {{ _y }} days",
"line": {
"stroke-width": 1
}
}]
}