Heat map
This template is useful for data that has the following relations
- correlation
- change over time
It's good for data that has several dimensions with patterns in two dimensions. The values from the third are the least important and used for colour.
This chart was used in
- Estimating the value of service exports abroad from different parts of the UK: 2011 to 2016.
- Energy, goods and services used by UK businesses: 2016
The files for each chart should be of the following format:
The config file contains all the variables which you can adjust. Inside the folder for your multiline chart there are .csv files which contain the data for your graph. The lib folder contains javascript libraries used. You'll also need the images folder.
If you’re making several charts they can share the same “lib” file as follows
The data should be in the following format
| yvals | NE | NW | YR |
|---|---|---|---|
| Construction | 463 | 754 | 635 |
| Telecoms | 342 | 375 | 654 |
| Research | 435 | 457 | 297 |
The yvals set the labels for the horizontal rows. The column titles are used to title the columns in the heatmap.
Open the “config.json” file in your favourite text editor.
These contain the main variables which the chart will need and will possibly need changing for each new chart.
"graphic_data_url": "data.csv",
where data.csv is the name of the data file, must be in csv form.
Add text that will be used as a source, the data used with the date published and the specific table if there are multiple tables
"sourceText":["Labour Market Statistics, February 2015, Table A02"],
Link to source
"sourceURL":["http://www.ons.gov.uk/ons/publications/re-reference-tables.html?edition=tcm%3A77-350752"],
"varcolour": is either an array of colours or a string to a colourbrewer palette e.g. BuPu.
numberBreaks sets the number of breaks for the legend and the heatmap.
breaks is either "jenks" or an array of breaks. For an array of 4 break, you need five data points, e.g. [0,5,10,40,70].
brickRatio_S_M_L sets the ratio of the bricks for different widths. A ratio of 1 will give you a brick with as aspect ratio 2:1 length:height. A ratio of 0.5 will give you a brick of a square. This is useful for mobile and making the bricks taller for thinner screens.
"unittext" specifies the text to be added at the top for the unit.
"tooltipFormat" sets the d3.number format for the number that is displayed when squared are hovered over.
These variables are ones that may require slight adjustment for a new chart however will remain the same for the majority of charts.
The margins for the chart can be adjusted here. [top, right, bottom, left] there are options for each screen size, small (mobile), medium (tablet) and large (desktop). The margins should be as small as possible whilst still displaying the text as there are a second set of margins once it is iframed on visual.ons. Generally these should not require adjusting for line charts but will almost certainly need adjusting for bar charts.
"margin_sm": [20, 10, 35, 30],
"margin_md": [20, 10, 35, 30],
"margin_lg": [20, 10, 35, 30],
Two breakpoints are set through the following options.
"mobileBreakpoint" : 610,
"tabletBreakpoint" : 600
Check final chart on as many browsers as possible (Firefox, IE, Chrome and Safari) and at the three window sizes. Also check on ipads, iphone and android phones (as owned in team).
Once the chart is in its final state screenshot it and save the cropped image (approx. 645 × 490) with the file name fallback.png