Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Horizontal Clustered Bar
Instructions for creating a responsive horizontal clustered bar chart
The files for each chart should be of the following format:
If you’re making several charts they can share the same “lib” file as follows
To make a responsive line chart save your data in csv form of the following format:
|state||var1||var 2||var 3||var 4|
For each category, there will be 4 bars drawn from vars 1-4. It’s important to insure the first column is named exactly “state”.
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.
where data.csv is the name of the data file, must be in csv form
"colour_palette": [ "#274796" , "pink", "#E73F40", "#7BCAE2" ],
specifies the colour to draw the bars. See the Style.ons on colour for guidance.
"dateFormat":"%Y-%y", Tell the chart what format to expect the numbers in the csv to be interpreted at dates. See the D3 wiki about time formatting.
"legendLabels" :[ "Education for under-fives" , "Primary education" , "Secondary education" , "Tertiary education" ],
These are the labels for the legend.
"legendStyle": can either be
"rect" for rectangles or blank where it will draw squares
"sourceText":["Source information"], "sourceURL":["http://www.ons.gov.uk/ons"],
Tell what words to make the source and where to link that too.
Annotation can be added in
annotationBullet for annotation that appear as bullet points in the mobile view. Use double spaces to cause a line break.
annotationXY tells where to plot the annotations and take an array of a x-position, y-position.
annotationAlign tells it how to align the annotation and takes the same options as text-anchor attribute of SVG. In total this could look like
"annotationChart": ["The proportion of spending on each education category has remained broadly stable over the past five years"], "annotationBullet": ["annotationBullet1"], "annotationXY":[[30, "2013-14"]], "annotationAlign":["start"],
Circles can be added by setting
circles to be true.
annotationCXCY then takes an array of arrays with values [X,Y] where the circles need to go.
"xAxisLabel":"%", add the unit to x-axis
"xAxisScale":[0,50], sets the range for the x-axis. Other options include
"barHeight_sm_md_lg" : [60,70,80] sets the dimensions for the chart height for the small, medium and large views.