From print paradigm charts to interactive charts in

From print paradigm charts to interactive charts in publications Timo Laurmaa Bank for International Settlements Basel, Switzerland timo. laurmaa@bis. org www. bis. org @BIS_org Seminar on "Innovative Approaches to Turn Statistics into Knowledge" 2 -4 December 2013 Aguascalientes, Mexico Restricted

Publications of the BIS The basics do not change l Foundation: analytical text and statistical charts l Joint effort of economists, statisticians and publishing l Global expert audience . . . but evolution is inevitable l Print l A 4 paper size l Text adapts to display size l Chart layouts do not adapt Restricted 2

Objectives for website and publications Medium term objectives for www. bis. org l All HTML pages to be mobile friendly l All new publications to be mobile friendly l No negative surprises for occasional visitors . . . but surely nobody wants to read a 50 -page research report on an i. Phone? l Google may take you there anyway l When sitting on a bus or a train, the best time could be right there l With options "now" or "sometime later", the later may never come Restricted 3

Google search results for BIS Quarterly Review Restricted 4

Mobile readers: 50% annual growth Restricted 5

Innovative Approaches: Let us modernize. . . but… Restricted 6

Flagship publications are deeply rooted in the institution lots of team work …and workflows in place Restricted 7

Minimise intrusion to existing workflows Now: Restricted 8

Responsive design … is quickly gaining popularity in web page design: Smaller (mobile) displays will only show the key content marked with green. The rest (marked in red) will show upon request (click/tap) Restricted 9

Responsive design for charts? (1) Charts designed for an A 4 size page will not show nicely on mobile displays. Restricted 10

Responsive design for charts? (2) How to achieve the same? “Smaller (mobile) displays will only show the key content marked with green. The rest (marked in red) will show upon request (click/tap)” ? ? ? Restricted 11

Exploring functionality of a line chart PDF: SVG: Restricted 12

Exploring functionality of a line chart (now SVG) Restricted 13

Exploring functionality of a line chart (now SVG) Restricted 14

Exploring functionality of a line chart (now SVG) Restricted 15

Exploring functionality of a line chart (now SVG) Restricted 16

Summary Open technologies in use l SVG - Scalable Vector Graphics l HTML 5 - Enables reading offline Redefining readability of publication charts l Less is more: focus on "data ink" l Successful charts will be used out of context l Intuitive toolbar to see data + more Restricted 17