Small examples of data driven graphics -- to be used as starting points.
JavaScript HTML CSS
Failed to load latest commit information.
Spine Update spine css Nov 7, 2016
area add x and y axes and add area chart Feb 10, 2017
bar-diverging-stacked bar-diverging-stacked video styles Oct 10, 2016
bar-grouped bar grouped video styles Oct 10, 2016
bar-ordered bar ordered video styles Oct 10, 2016
bar-stacked-proportional name-change Oct 24, 2016
bar-stacked add sorting options Nov 8, 2016
bar Change data in bar Oct 28, 2016
boxplot Add preflight labels to boxplot Oct 6, 2016
bubble loremmed-titles Nov 11, 2016
bullet-chart/bullet-chart Update to the index Jan 12, 2017
bump Add video styles to chart Jan 25, 2017
calendar-heat-map Basic lorem to Calendar heatmap Dec 4, 2016
circles-timeline More-ipsum Nov 11, 2016
column-diverging-stacked Add folder Jan 5, 2017
column-grouped column-grouped video style Oct 10, 2016
column-line-timeline Add linking lines to chart Oct 17, 2016
column-ordered column ordered video style and add stroke-linejoin: round; to line st… Oct 10, 2016
column-political column political video style Oct 10, 2016
column-stacked set default sort to none Dec 15, 2016
column-timeline column timeline video styles Oct 10, 2016
column bug fixes to line chart legend Oct 14, 2016
d3 spelling Sep 18, 2015
dot-plot Add text id to labels initially place above dots Oct 14, 2016
dot-stacked create-basic-dot-stack Dec 19, 2016
histogram histogram video styles Oct 10, 2016
icons Update icon Jan 25, 2017
line-dual-axis Fixes empty cell issue from bloomberg data Feb 17, 2017
line-interday Add labels on minore axis Jan 26, 2017
line-moving-average Added line-moving-average Dec 4, 2016
line Remove unused if statement Feb 17, 2017
lollipop-h lollipop video style Oct 10, 2016
lollipop-v lollipop-v video style Oct 10, 2016
map-us-choropleth add map and small multiples Jan 6, 2017
pie pie video styles Oct 10, 2016
priestley-timeline priestly timeline video styles Oct 10, 2016
proportional-squares tree map video styling Oct 10, 2016
pyramid Update figures Nov 4, 2016
sankey sankey video styles Oct 10, 2016
scatterplot-line Rename the finished folder Oct 17, 2016
scatterplot Update to scatterplot Nov 30, 2016
shared update colours Feb 15, 2017
slope fix default text on slope chart Feb 3, 2017
small-multiples-area tweak video padding Feb 10, 2017
small-multiples-bars add class for xAxisTint text labels Feb 10, 2017
small-multiples-column-category default colours override capability Feb 9, 2017
small-multiples-column-timeline change scales to ordinal, add rangebounds, add check for yMin > 0 Feb 8, 2017
small-multiples-multiple-line add map and small multiples Jan 6, 2017
small-multiples-single-line add map and small multiples Jan 6, 2017
treemap Update to tremor Jan 5, 2017
waterfall Remive console logs Nov 18, 2016
wrapper-starter reinstate-wrapper-starter Feb 7, 2017
xy-heatmap-cat Change style of banding on line chart Oct 12, 2016
xy-heatmap-quant Add row text labels to scatter gris Oct 20, 2016
zzz-old Change name of dot plot folder Aug 26, 2016
zzz-oldi-index Update index file Nov 3, 2016
.editorconfig ⭐️ New: Adds a .editorconfig file to help enforce consistency with in… Aug 8, 2016
.gitignore add trailing slashes to gitignore Jan 4, 2017 Fix broken links in Read me Oct 7, 2016
chartTypes.csv Update spelling mistake in chart inf.csv Jan 27, 2017
index.html Update index file Nov 3, 2016
mani.css Update index file Nov 3, 2016
universalStyles.js Update styles and ad xMin and xMax Jun 29, 2016
universalVariable.docx Add lustrous and decade as possible separators to interval Aug 19, 2016
v2-data.js fixed-descriptions Jan 24, 2017

Visual Vocabulary

Small examples of data driven graphics -- to be used as starting points for static graphics to be further refined through Illustrator. viewable here

Getting started

For ease of use we suggest you use srvlr to help you see your changes reflected immediately in your browser.

If you have srvlr installed using it is as simple as opening terminal, navigating to the location of you project and typing srvlr

Setting up a mac for editing the examples

  • install nodejs from here
  • open up terminal app
  • install srvlr npm install -g srvlr (if you see errors you may need to try sudo npm install -g srvlr which will then prompt you for your password)
  • make sure Git is installed, type git into the command line. if it's not installed your mac should take over and install it for you

Getting a local copy of the examples

i.e. copying them to your computer. either : Download them from here or in the terminal window type git clone TARGET-LOCATION

replacing TARGET-LOCATION with the name of the folder you wish to put the examples in.

Getting you graphic off the page and into illustrator

Use the SVG crowbar bookmark [which is available here]](


This software is published by the Financial Times under the MIT licence.

Please note the MIT licence includes only the software, and does not cover any FT content made available using the software, which is copyright © The Financial Times Limited, all rights reserved. For more information about re-publishing FT content, please contact our syndication department.