Scatter canvas (d3v4)

Data

This chart is good for

• Correlation

Usage

This template was used in Health state life expectancy by 2011 Census wards, England and Wales: 2009 to 2013

Instructions for creating a scatter plot

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

Data file

To make a responsive line chart save your data in csv form of the following format:

name	var1	var 2	var 3	LE	HLE
A
B
C
D

It’s important to insure the column names match exactly. LE is used as the x-axis variable and HLE is the y-axis variable

config.json

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.

essentials

These contain the main variables which the chart will need and will possibly need changing for each new chart.

"sourceText":"Statistics",
"sourceURL":"http://www.ons.gov.uk",

set the source at the bottom of the chart but at the moment the link doesn't work.

"xAxisLabel":"Life expectancy",
"yAxisLabel":"Healthy life expectancy",

Add text for the axis labels

Annotations are set with

"annotations":false,
            "textAnnotations":[{
               "x":70,
               "y":75,
               "text":"example annotation text"
             },{
               "x":88,
               "y":55,
               "text":"example annotation text"
               }],
           "textAnnotationWrap":100

where annotations must be true for annotation to show. x and y why set the position of the annotations. textAnnotationWrap set the length for when annotations should wrap.

optional

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],

Set line annotations on with "annotation_line" : true,

The start and end point of line annotations are set with x and y positions in an array, e.g.

"annotateLineX1_Y1_X2_Y2" : [ [[70, 50],[92, 80]], [[200, 200],[400, 400]] ],

Rectangle annotations are set with "annotateRect" : true,

The top left and bottom right corners of the rectangle are set with annotateRectX_Y and colour and opacity set with rectColor_opcty, e.g.

"annotateRectX_Y" : [ [[88, 55],[92, 46]], [[68, 80],[72, 70]] ],
"rectColor_opcty" : [["#ABCDEF", 0.2], ["#888", 0.4]]

Hard coded bits

Because this chart uses canvas some bits can't be changed from the config. These are listed below

• Dot colour Set in context.fillStyle = "#3B7A9E";

• Dot opacity Set in context.globalAlpha= 0.25;

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