Calendar chart Since 0.7.0

Show activity over the course of a long span of time, such as months or years.

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.calendar', { "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 attributes
columns - As with many of the visualisation types you can optionally add virtual columns.
colours - Define some visualisation-specific named colours.
value - The title of the column that will be used to set the colour of the day. This can be a hex code or a number if used with scale.
key - The title of the column that contains the dates. These should be formatted in ISO8601 format e.g. "2024-02-06"
scale - A colour scale to use to colour the days based on the value.
min - Used with scale and max to define the colour scale.
max - Used with scale and min to define the colour scale.
tooltip - This is to add tooltips to days. Either provide the name of an existing/virtual column in the data or construct one using string templates.
order - Set the order of the years to either chronological (earliest year first) or reverse (latest year first).
startofweek - Set the first day of the week. Use 0 for Sunday, 1 for Monday etc.
attribution - Add a line of attribution text under the visualisation.

1. Basic calendar chart§

Embeddable version

This is a basic calendar chart showing a dataset with daily data.

This example was made with config:

YAML

data:
  - date: '2021-10-04'
    colour: '#FF6700'
  - date: '2021-10-06'
    colour: '#FF6700'
  - date: '2021-10-18'
    colour: '#FF6700'
  - date: '2021-10-19'
    colour: '#FF6700'
  - date: '2021-10-20'
    colour: '#FF6700'
  - date: '2021-11-04'
    colour: '#FF6700'
  - date: '2021-11-22'
    colour: '#FF6700'
  - date: '2021-12-22'
    colour: '#FF6700'
  - date: '2022-01-04'
    colour: '#FF6700'
  - date: '2022-01-05'
    colour: '#FF6700'
  - date: '2022-01-18'
    colour: '#FF6700'
  - date: '2022-01-20'
    colour: '#FF6700'
  - date: '2022-01-23'
    colour: '#FF6700'
  - date: '2022-01-24'
    colour: '#FF6700'
  - date: '2022-01-26'
    colour: '#FF6700'
  - date: '2022-02-03'
    colour: '#FF6700'
  - date: '2022-02-16'
    colour: '#FF6700'
  - date: '2022-02-21'
    colour: '#FF6700'
  - date: '2022-02-28'
    colour: '#FF6700'
  - date: '2022-03-02'
    colour: '#FF6700'
  - date: '2022-03-07'
    colour: '#FF6700'
  - date: '2022-03-09'
    colour: '#FF6700'
  - date: '2022-03-10'
    colour: '#FF6700'
  - date: '2022-03-11'
    colour: '#FF6700'
  - date: '2022-03-15'
    colour: '#FF6700'
  - date: '2022-03-16'
    colour: '#FF6700'
  - date: '2022-03-17'
    colour: '#FF6700'
  - date: '2022-03-24'
    colour: '#FF6700'
  - date: '2022-03-28'
    colour: '#FF6700'
  - date: '2022-03-31'
    colour: '#FF6700'
  - date: '2022-04-05'
    colour: '#FF6700'
  - date: '2022-04-06'
    colour: '#FF6700'
  - date: '2022-04-12'
    colour: '#FF6700'
  - date: '2022-05-04'
    colour: '#FF6700'
  - date: '2022-05-05'
    colour: '#FF6700'
  - date: '2022-05-11'
    colour: '#FF6700'
  - date: '2022-05-18'
    colour: '#FF6700'
  - date: '2022-06-04'
    colour: '#FF6700'
  - date: '2022-06-07'
    colour: '#FF6700'
  - date: '2022-06-15'
    colour: '#FF6700'
  - date: '2022-06-20'
    colour: '#FF6700'
  - date: '2022-06-28'
    colour: '#FF6700'
value: colour
key: date

JSON

{
	"data": [{
			"date": "2021-10-04",
			"colour": "#FF6700"
		},{
			"date": "2021-10-06",
			"colour": "#FF6700"
		},{
			"date": "2021-10-18",
			"colour": "#FF6700"
		},{
			"date": "2021-10-19",
			"colour": "#FF6700"
		},{
			"date": "2021-10-20",
			"colour": "#FF6700"
		},{
			"date": "2021-11-04",
			"colour": "#FF6700"
		},{
			"date": "2021-11-22",
			"colour": "#FF6700"
		},{
			"date": "2021-12-22",
			"colour": "#FF6700"
		},{
			"date": "2022-01-04",
			"colour": "#FF6700"
		},{
			"date": "2022-01-05",
			"colour": "#FF6700"
		},{
			"date": "2022-01-18",
			"colour": "#FF6700"
		},{
			"date": "2022-01-20",
			"colour": "#FF6700"
		},{
			"date": "2022-01-23",
			"colour": "#FF6700"
		},{
			"date": "2022-01-24",
			"colour": "#FF6700"
		},{
			"date": "2022-01-26",
			"colour": "#FF6700"
		},{
			"date": "2022-02-03",
			"colour": "#FF6700"
		},{
			"date": "2022-02-16",
			"colour": "#FF6700"
		},{
			"date": "2022-02-21",
			"colour": "#FF6700"
		},{
			"date": "2022-02-28",
			"colour": "#FF6700"
		},{
			"date": "2022-03-02",
			"colour": "#FF6700"
		},{
			"date": "2022-03-07",
			"colour": "#FF6700"
		},{
			"date": "2022-03-09",
			"colour": "#FF6700"
		},{
			"date": "2022-03-10",
			"colour": "#FF6700"
		},{
			"date": "2022-03-11",
			"colour": "#FF6700"
		},{
			"date": "2022-03-15",
			"colour": "#FF6700"
		},{
			"date": "2022-03-16",
			"colour": "#FF6700"
		},{
			"date": "2022-03-17",
			"colour": "#FF6700"
		},{
			"date": "2022-03-24",
			"colour": "#FF6700"
		},{
			"date": "2022-03-28",
			"colour": "#FF6700"
		},{
			"date": "2022-03-31",
			"colour": "#FF6700"
		},{
			"date": "2022-04-05",
			"colour": "#FF6700"
		},{
			"date": "2022-04-06",
			"colour": "#FF6700"
		},{
			"date": "2022-04-12",
			"colour": "#FF6700"
		},{
			"date": "2022-05-04",
			"colour": "#FF6700"
		},{
			"date": "2022-05-05",
			"colour": "#FF6700"
		},{
			"date": "2022-05-11",
			"colour": "#FF6700"
		},{
			"date": "2022-05-18",
			"colour": "#FF6700"
		},{
			"date": "2022-06-04",
			"colour": "#FF6700"
		},{
			"date": "2022-06-07",
			"colour": "#FF6700"
		},{
			"date": "2022-06-15",
			"colour": "#FF6700"
		},{
			"date": "2022-06-20",
			"colour": "#FF6700"
		},{
			"date": "2022-06-28",
			"colour": "#FF6700"
		}],
	"value": "colour",
	"key": "date"
}

2. Colour using a defined scale§

Embeddable version

In this example we've processed a dataset from Data Mill North to find the total daily counts for the St Peters Street (Lane 1) cycle counter in Leeds. We set the value of each day to the Counts field in the data and then colour each day using a defined colour scale (Viridis). If min and max are not set, the scale will use the range in the data.

Data: processed (Open Innovations); source (Leeds City Council)

This example was made with config:

YAML

attribution: >
  Data: <a
  href="https://open-innovations.github.io/traffic-growth/data/leeds/cycle-100642-1.csv">processed</a>
  (Open Innovations); <a
  href="https://datamillnorth.org/dataset/leeds-annual-cycle-growth-">source</a>
  (Leeds City Council)
data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis

JSON

{
	"attribution": "Data: <a href=\"https://open-innovations.github.io/traffic-growth/data/leeds/cycle-100642-1.csv\">processed</a> (Open Innovations); <a href=\"https://datamillnorth.org/dataset/leeds-annual-cycle-growth-\">source</a> (Leeds City Council)\n",
	"data": "test.data.cycle-100643-1",
	"value": "Counts",
	"key": "Date",
	"scale": "Viridis"
}

3. Add a tooltip§

Embeddable version

A tooltip can be set as either the name of a column/virtual column in the data or be a string template. The string template can contain replacement values and other content. For instance, we've included a bicycle icon (from Bootstrap Icons) and formated the Date value using {{ Date | strftime("%e %B %Y") }}.

This example was made with config:

YAML

data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis
tooltip: >-
  <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px"
  fill="currentColor" class="bi bi-bicycle" viewBox="0 0 16 16"
  style="margin:auto;display:block;" preserveAspectRatio="xMidYMid slice"><path
  d="M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11
  4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1 1-.848.53l-.508-.812-2.076
  3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-3.274L5 5.856V5h-.5a.5.5 0 0
  1-.5-.5zm1.5 2.443-.508.814c.5.444.85 1.054.967 1.743h1.139L5.5 6.943zM8 9.057
  9.598 6.5H6.402L8 9.057zM4.937 9.5a1.997 1.997 0 0
  0-.487-.877l-.548.877h1.035zM3.603 8.092A2 2 0 1 0 4.937 10.5H3a.5.5 0 0
  1-.424-.765l1.027-1.643zm7.947.53a2 2 0 1 0 .848-.53l1.026 1.643a.5.5 0 1
  1-.848.53L11.55 8.623z"/></svg>{{ Date | strftime("%e %B %Y") }} <br />{{
  Counts }} counts

JSON

{
	"data": "test.data.cycle-100643-1",
	"value": "Counts",
	"key": "Date",
	"scale": "Viridis",
	"tooltip": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" fill=\"currentColor\" class=\"bi bi-bicycle\" viewBox=\"0 0 16 16\" style=\"margin:auto;display:block;\" preserveAspectRatio=\"xMidYMid slice\"><path d=\"M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1 1-.848.53l-.508-.812-2.076 3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-3.274L5 5.856V5h-.5a.5.5 0 0 1-.5-.5zm1.5 2.443-.508.814c.5.444.85 1.054.967 1.743h1.139L5.5 6.943zM8 9.057 9.598 6.5H6.402L8 9.057zM4.937 9.5a1.997 1.997 0 0 0-.487-.877l-.548.877h1.035zM3.603 8.092A2 2 0 1 0 4.937 10.5H3a.5.5 0 0 1-.424-.765l1.027-1.643zm7.947.53a2 2 0 1 0 .848-.53l1.026 1.643a.5.5 0 1 1-.848.53L11.55 8.623z\"/></svg>{{ Date | strftime(\"%e %B %Y\") }} <br />{{ Counts }} counts"
}

4. Reverse the order of the years§

Embeddable version

We can set the order of the years to either chronological (earliest year first) or reverse (latest year first).

This example was made with config:

YAML

data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis
order: reverse
tooltip: '{{ Date | strftime("%e %B %Y") }} <br />{{ Counts }} counts'

JSON

{
	"data": "test.data.cycle-100643-1",
	"value": "Counts",
	"key": "Date",
	"scale": "Viridis",
	"order": "reverse",
	"tooltip": "{{ Date | strftime(\"%e %B %Y\") }} <br />{{ Counts }} counts"
}

5. Set the first day of the week§

Embeddable version

By default we start the week on a Monday but sometimes you may want to use a different day. You can set the startofweek value to 0 for Sunday, 1 for Monday etc. Let's start the week on a Sunday.

This example was made with config:

YAML

data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis
startofweek: 0

JSON

{
	"data": "test.data.cycle-100643-1",
	"value": "Counts",
	"key": "Date",
	"scale": "Viridis",
	"startofweek": 0
}

6. Add a legend§

Embeddable version

In this example we will add a legend and therefore will also most likely need to specify a min and max.

100

200

300

This example was made with config:

YAML

data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis
min: 0
max: 300
legend:
  show: true
  position: top
  items:
    - value: 300
      label: '300'
    - value: 200
      label: '200'
    - value: 100
      label: '100'
    - value: 0
      label: '0'
tooltip: '{{ Date | strftime("%e %B %Y") }} <br />{{ Counts }} counts'

JSON

{
	"data": "test.data.cycle-100643-1",
	"value": "Counts",
	"key": "Date",
	"scale": "Viridis",
	"min": 0,
	"max": 300,
	"legend": {
		"show": true,
		"position": "top",
		"items": [{
				"value": 300,
				"label": "300"
			},{
				"value": 200,
				"label": "200"
			},{
				"value": 100,
				"label": "100"
			},{
				"value": 0,
				"label": "0"
			}]
	},
	"tooltip": "{{ Date | strftime(\"%e %B %Y\") }} <br />{{ Counts }} counts"
}

7. Limit rows used Since 0.16.5§

Embeddable version

In this example we will limit the data rows to only include those where the Date value is on or after the 1st January 2021.

100

200

300

This example was made with config:

YAML

data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis
min: 0
max: 300
legend:
  show: true
  position: top
  items:
    - value: 300
      label: '300'
    - value: 200
      label: '200'
    - value: 100
      label: '100'
    - value: 0
      label: '0'
tooltip: '{{ Date | strftime("%e %B %Y") }} <br />{{ Counts }} counts'
where: '"Date">="2021-01-01"'

JSON

{
	"data": "test.data.cycle-100643-1",
	"value": "Counts",
	"key": "Date",
	"scale": "Viridis",
	"min": 0,
	"max": 300,
	"legend": {
		"show": true,
		"position": "top",
		"items": [{
				"value": 300,
				"label": "300"
			},{
				"value": 200,
				"label": "200"
			},{
				"value": 100,
				"label": "100"
			},{
				"value": 0,
				"label": "0"
			}]
	},
	"tooltip": "{{ Date | strftime(\"%e %B %Y\") }} <br />{{ Counts }} counts",
	"where": "\"Date\">=\"2021-01-01\""
}