Simple 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:
| name | value |
|---|---|
| North West | 58 |
| North East | 87 |
| Wales | 56 |
| South East | 12 |
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
"colour_palette": [ "#274796"] sets the colour of the bars. "negative_colour":["#D32F2F"] set the colour of bars if they are negative.
"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": ["Bar annotation words more words","Claws in your leg"],
"annotationBullet": ["The three troughs are due to the economic downturns in the early 1980s, early 1990s and late 2000s. The most recent downturn had less impact on the employment rate than previous downturns",
"Claws in your leg. Purr for no reason"],
"annotationXY":[["-5","London"],["60","Wales"]],
"annotationAlign":["middle","middle"],
Annotations are set up these options. annotationChart set the words for charts in medium and large view. A double space forces a new line. annotationBullet is the text displayed belowed the graph in bullet points in the small view. annotationXY specifies the positions of the annotations. annotationAlign sets the text-anchor attribute of the annotation.
"barHeight_sm_md_lg" : [30,30,30], set the height of the bar chart in the three different view sizes
"xAxisLabel":"%", sets the label of the x axis.
"xAxisScale":[-10,90] sets the range of the x axis. Other options include auto_min_max or auto_zero_max.
"margin_sm": [5, 20, 5, 135],
"margin_md": [5, 20, 5, 135],
"margin_lg": [5, 20, 5, 135],
sets the margin for the three view sizes.
"aspectRatio_sm" : [4,7],
"aspectRatio_md" : [1,1],
"aspectRatio_lg" : [16,10],
sets the aspect ratio for the three view sizes.
"mobileBreakpoint" : 510, 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. D3 can override these.
"vertical_line" : true,
"annotateLineX1_Y1_X2_Y2":[ [[25,"East"],[25,"South East"]]],
Vertical lines can be added using these variables although the y-placement is not accurate.
"annotateRect" : true,
"annotateRectX_Y" : [ [[40, "South West"],[75, "West Midlands"]]],
"lineColor_opcty" : [["#888", 0.2]],
Adds a rectangle to the chart if annotateRect is true. annotateRectX_Y sets the top left and bottom right position of the rectangle. The colour and opacity is specified with lineColor_opcty
"centre_line" : false,
"centre_line_value" : 0
If centre_line is true it draws a line across all the bars at the value specified in centre_line_value.