Scatter voronoi zoom
This chart is good for
- Correlation
This template was used in
- Research Outputs: Estimating internal migration in England and Wales, year ending June 2016
- Regional and sub-regional productivity in the UK: February 2019
The files for each chart should be of the following format:
The config file contains all the variables which you can adjust. Data.csv contains 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
To make a responsive line chart save your data in csv form of the following format:
| name | var1 | var 2 | var 3 |
|---|---|---|---|
| A | |||
| B | |||
| C | |||
| D |
It’s important to insure the date column is named exactly “name”, with a lower case n.
Open the “config.json” file. You can open this in a text editor such as Notepad++ or TextEdit or download a code editor such as Atom, Dreamweaver, Brackets or Sublime Text 2.
These contain the main variables which the chart will need and will possibly need changing for each new chart.
"graphic_data_url": "dummydata.csv",
where dummmydata.csv is the name of the data file, must be in csv form.
pickxdata specifies the column name for the x axis. pickydata specifies the column name in the csv for the y axis.
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"],
Rectangle annotations are added using rectannotations. The x and y specify the top right position in data. The width and height are also specified in unit of data not pixel. The colour and opacity are also specified here.
"rectannotations":[{
"x":0,
"y":5000,
"width":5000,
"height":5000,
"colour":"grey",
"opacity":0.1
}
To add more rectangles, add more {} in the [] array.
Text annotations are specified in textAnnotations. You specific the x and y position of the text and then the text to display.
"textAnnotations":[{
"x":1000,
"y":4000,
"text":"example annotation text"
}
textAnnotationWrap sets the wrapping length for the annotation text.
d3AnnotationWrap sets the wrapping length for the annotation that comes on with hover.
The axis labels are set with yAxisLabel and xAxisLabel. These are also used in the tooltip.
Choose how the axes are drawn, auto_min_max is the default – this chooses the minimum and maximum values of the x and y axis automatically. Leave AxisScale blank if you want to manually specify the axis ranges using xAxisScale and yAxisScale.
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],
The aspect ratio of the chart can be set here. There are options for each screen size. Generally these should not require adjusting for line charts but will almost certainly need adjusting for bar charts.
"aspectRatio_sm" : [16,13],
"aspectRatio_md" : [16,12],
"aspectRatio_lg" : [16,10],
The point at which the chart changes from small (mobile) to medium (tablet) view is specified here. This should not normally require adjusting.
"mobileBreakpoint" : 610,
Specify a rough number of ticks to display on axes for small (mobile), medium (tablet) and large (desktop) views. NOTE: the d3 code which builds the chart uses the specified number as a suggestion only and may override this with what it determines to be the most clean and human-readable values
"x_num_ticks_sm_md_lg" : [7,17,17],
"y_num_ticks_sm_md_lg" : [7,17,17],
If you want lines drawn on to annotate something use annotateLineX1_Y1_X2_Y2. The array takes a start position [X1,Y1] followed by an end position [X2,Y2]. To add more lines, add in another array. Line colour and opacity are set using lineColor_opcty. The first element refers to the first annotation line drawn.
"annotateLineX1_Y1_X2_Y2":[[[-8000,-4000],[5000,2000]],[[-6000,2000],[0,0]]],
"lineColor_opcty" : [["#704C27", 1],["#36ADD9", 0.5]]
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).
Note: unless viewed via a webserver the chart will not be visible in any browser except Firefox because of security issues loading javascript libraries, therefore testing is best carried out on a mac.
Once the chart is in its final state screenshot it and save the cropped image (approx. 645 × 490) with the file name fallback.png