Marimekko
This chart type shows both the magnitude (y axis) and and part-to-whole relationship (x axis) simultaneously.
The file 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 | Financial | Real estate, professional, scientific and technical | Travel | Information and communication |
|---|---|---|---|---|
| Greater Manchester CA | 1406 | 1014 | 887 | 506 |
| Edinburgh and South East Scotland CR | 1981 | 449 | 1516 | 520 |
| West Midlands CA | 1858 | 526 | 909 | 339 |
| Glasgow CR | 1554 | 568 | 435 | 287 |
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.
"legendLabels" : ["Financial","Real estate, professional, scientific and technical", "Travel", "Information and communication"], specifies the text for the legend.
"legendXAnnotation" : "% of total value of service exports",
"legendYAnnotation" : "total value of service exports",
set the explainers for x and y axis on the legend (see below).
"colour_palette" : ["#8165a6", "#3f0057", "#c3c9f4", "#60327e"], specifies colours for each bar.
"cat_hover" : ["Greater Manchester Combined Authority", "Edinburgh and South East Scotland City Region", "West Midlands Combined Authority", "Glasgow City Region"], sets the text of the category displayed in the hover over tooltip. These have to be in the same order as they are in the csv file.
"sourceText":["Office for National Statistics"],
"sourceURL":["http://www.ons.gov.uk"],
The source text and link is set with the above options.
"xAxisLabel":"%",sets the label of the x axis.
"margin_sm": [20, 50, 35, 130],
"margin_md": [20, 80, 35, 155],
"margin_lg": [20, 80, 35, 155],
sets the margin for the three view sizes.
"aspectRatio_sm" : [1,4],
"aspectRatio_md" : [16,20],
"aspectRatio_lg" : [16,16],
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" : [4,4,4], set the preference for the number of ticks on the x axis.