Stacked bar horizontal
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
Save your data in csv form of the following format:
| group | Under occupied | Just right | Over occupied |
|---|---|---|---|
| Owner occupied | 82.7 | 15.1 | 2.3 |
| Private rented | 49.5 | 41.9 | 8.6 |
| Social rented | 39.4 | 51.9 | 8.7 |
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
"dateFormat":"", sets the time format for reading the data and annotations. See the D3 wiki on time format for more details. Can be set to blank if dealing with non time groups in the data.
"legendLabels" : ["Under occupied","Standard occupied","Over occupied"], specifies the text for the legend.
"sourceText":["Labour Market Statistics, February 2015, Table A02"],
"sourceURL":["http://www.ons.gov.uk/ons/publications/re-reference-tables.html?edition=tcm%3A77-350752"],
The source text and link is set with the above options.
"annotationChart": ["Example annotation"],
"annotationBullet": ["Example annotation"],
"annotationXY":[[50,"Private rented" ]],
"annotationAlign":["middle"],
Annotations can be set using the above options. annotationChart lists the words to display on the annotation. annotationBullet is the words listed as a bullet point in the small version of the graph.annotationXY specifies the x and y position of the annotation. annotationAlign sets the text-anchor attribute of the annotation.
Circle annotation can be set if circles is true and annotationCXCY specifies the x y position of the centre of the circle.
"circles" : true,
"annotationCXCY":[["60","Social rented"]],
"xAxisLabel":"%",sets the label of the x axis
"xAxisScale":"auto_zero_max", sets the scale of the x axis. Can be set manually. auto_min_max cannot be used here.
"xAxisBreak": true, if true, draw the symbol for a shortened axis.
"xAxisBreak_sm_md_lg": [65,65,65] sets the width of the chart in the three different sizes.
"margin_sm": [20, 10, 55, 30],
"margin_md": [20, 10, 45, 30],
"margin_lg": [20, 10, 45, 30],
sets the margin for the three view sizes.
"aspectRatio_sm" : [16,13],
"aspectRatio_md" : [16,12],
"aspectRatio_lg" : [16,10],
sets the aspect ratio for the three view sizes.
"mobileBreakpoint" : 610, sets the width for the mobile/small view.
"x_num_ticks_sm_md_lg" : [6,8,10], set the preference for the number of ticks on the x axis.