Scatterplot with Convex Hulls
This template is useful for data that has the following relations
- correlation
- distribution
It's good for data that can be distinctly grouped together.
This chart was used in Inclusive growth: measures and trends.
This template uses a voronoi grid to help with mouseover. It also uses the d3-annotation library for the tooltip.
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
| name | group | x var | y var |
|---|---|---|---|
| London | grp1 | 0.45 | 145 |
| United Kingdom | grp1 | 3.8 | 101 |
| London | grp2 | 0.97 | 125 |
| United Kingdom | grp2 | 2.7 | 87 |
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": "data.csv",
where data.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.
"fills":["#1983ac","#3b7b5c","#4ab5dd"], is an array of colours and these correspond to the different groups in the data.
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"],
"legendText":"Regional values for different time periods", specifies the text to be added to the legend after a dot for each of the groups.
"highlight":"UnitedKingdom", set the class for the dot to be highlighted in the plot. This refers to the name of the row(s) in data but without space.
"highlightLegendText":"UK values", specifies the text to be added to the legend for the highlighted data points.
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 tooltip that comes on with hover.
tooltipX and tooltipY set the text to be used in the tooltip.
tooltipXformat and tooltipYformat set the number to be used in the tooltip.
The axis labels are set with yAxisLabel and xAxisLabel.
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).
Once the chart is in its final state screenshot it and save the cropped image (approx. 645 × 490) with the file name fallback.png