# Newsroom Data Graphics & Scrollytelling

> The house style of newspaper graphics desks since about 2009–2011 (the New York Times graphics desk, D3.js, the Guardian Datablog): conventional charts drawn from the data, on a white or pale paper ground with light grey gridlines and no axis titles, lines labelled directly in place of a legend where possible and short annotations saying what to look at. A flush-left title states the finding and a source line closes the chart; one highlight colour picks out the story against grey context. In long-form pieces the graphic stays pinned while the text scrolls past and steps it through its states.

- Period: 2009–present
- Where: North America, Western Europe
- Origin: The graphics desks of New York and London newspapers in the early 2010s. At Stanford, Jeffrey Heer, Mike Bostock and Vadim Ogievetsky built the JavaScript library Protovis (2009) and then D3.js (released 18 February 2011), with which Bostock wrote data-rich stories for The New York Times' graphics department until 2015; the Times' Snow Fall (December 2012) and scroll-driven graphics such as 'A Game of Shark and Minnow' (2013) set the pattern for long-form pieces. The institutional start came a little earlier: The Guardian launched its Datablog under Simon Rogers in March 2009, which Wikipedia calls the first recorded use of data journalism by a major news organisation, after decades of informal computer-assisted reporting; for its war-logs coverage it mapped every incident in which someone died with free tools such as Google Fusion Tables. Newsrooms then codified the look in shared chart vocabularies (the Financial Times' Visual Vocabulary), house chart themes and frames (the BBC News data team's bbplot, 2019; the FT's g-chartframe for D3) and open-source tools (the Times' ai2html, 2015, which exports one Illustrator artboard per screen width and keeps the chart text as HTML; Scrollama), while the visual-essay publication The Pudding (since 2017) carried scrollytelling outside the newspapers. Its rules for stripping a chart to the data restate Edward Tufte's: he coined 'chartjunk' in The Visual Display of Quantitative Information (1983) for chart elements not needed to understand the information, and popularised small multiples for comparing many series on the same scale. It inherits Isotype's aim of bringing statistics to life for ordinary citizens, but uses conventional statistical charts drawn from the data instead of counted pictograms
- Branch: Digital native
- Also known as: Data-journalism graphics, Visual journalism, Scrollytelling, Interactive news graphics, Visual essays
- Page: https://stylogeny.com/styles/newsroom-data-graphics/

## Use it with care

The look signals checked, sourced reporting: never use it to present invented, unsourced or AI-generated figures as data, always name the source, and do not copy a newspaper's proprietary typefaces, masthead or logo. Give every chart a text summary and do not let colour alone carry the meaning, for readers who use screen readers or cannot tell the highlight colours apart. In a mock-up or generated image the figures are invented: label them plainly as illustrative (for example 'Source: illustrative data'), and never attribute them to a real newspaper, agency, survey or person.

## How it works

- Choose the chart type by the relationship the story has to show (deviation, correlation, ranking, distribution, change over time, part-to-whole, magnitude, spatial or flow), from a vocabulary of conventional charts readers already know, rather than inventing a new form; when many series compete, split them into small multiples on shared axes instead of overlaying them.
- Strip the chart down to the data: a white or pale paper ground, light grey gridlines on one axis only, no ticks, axis lines, axis titles, 3D effects or decorative fills, and a single darker baseline at zero.
- Write on the chart instead of beside it: name each series at the end of its line in place of a legend whenever possible, add short annotations that point to what matters, and frame the graphic with a title that states the finding, a subtitle giving the measure and a source line, all set flush left.
- Grey out the context and colour the story: draw most series in neutral greys and keep one or two saturated highlight colours for the data the story is about.
- Draw the graphic from the data, in code (D3, R) or in Illustrator with a separate artboard for each screen width (ai2html), and keep labels as live text at a readable size rather than shrinking a picture.
- In long-form pieces, pin the graphic in the viewport while the text scrolls past in steps, and move it to a new state at each step; keep scrolling fast, incremental and reversible.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Column grid](https://stylogeny.com/design-choices/column-grid/) (defining)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (occasional)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (occasional)

### Space & hierarchy
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (defining)
- [Sequential narrative](https://stylogeny.com/design-choices/sequential-narrative/) (characteristic)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (characteristic)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)

### Typography
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (defining)
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (occasional)
- [Transitional serif](https://stylogeny.com/design-choices/transitional-serif/) (occasional)
- [Slab serif](https://stylogeny.com/design-choices/slab-serif/) (occasional)

### Colour
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (defining)
- [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (defining)
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (characteristic)

### Form & shape
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (characteristic)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (characteristic)
- [Non-representational](https://stylogeny.com/design-choices/non-representational/) (characteristic)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (defining)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (defining)
- [Rules & bars](https://stylogeny.com/design-choices/rules-and-bars/) (occasional)

### Imagery
- [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (defining)
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (occasional)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (occasional)

### Medium & production
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (characteristic)
- [Generative & AI](https://stylogeny.com/design-choices/generative-and-ai/) (occasional)
- [Offset printing](https://stylogeny.com/design-choices/offset-printing/) (occasional)

### Tone & intent
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (defining)
- [Authoritative & institutional](https://stylogeny.com/design-choices/authoritative-and-institutional/) (characteristic)
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (occasional)

Avoids: Abundant decoration, Chrome & 3D render, Gloss & highlights, Skeuomorphic material, Full polychrome, Fluorescent & neon, Ornamented display, Experimental & distorted, Collage & layering

Palette: #ffffff, #fff1e0, #222222, #cbcbcb, #1380a1, #faab18

Typefaces: Helvetica, Arial, Georgia, NYT Franklin and NYT Cheltenham, Financier Display and Financier Text (Klim, drawn for the FT's 2014 redesign), with Klim's Metric (2011) as the FT's sans, Guardian Egyptian and Guardian Sans

Known for: The Guardian Datablog, launched in March 2009 and edited by Simon Rogers, which Wikipedia calls the first recorded use of data journalism by a major news organisation, after decades of informal computer-assisted reporting; D3.js (Mike Bostock, Jeffrey Heer and Vadim Ogievetsky; released 18 February 2011), the successor to Stanford's Protovis (2009), a library for drawing SVG graphics from data that The New York Times uses; Mike Bostock and colleagues at The New York Times graphics department, D3 graphics such as '512 Paths to the White House' (2 November 2012), 'A Game of Shark and Minnow' (27 October 2013) and 'Is It Better to Rent or Buy?' (22 May 2014); Bostock shared the Gerald Loeb Award for Images/Visuals in 2013, 2014 and 2015; The New York Times, 'Snow Fall: The Avalanche at Tunnel Creek' (John Branch, 20 December 2012), built by eleven graphics and design staff under Graphics Director Steve Duenes, with a terrain animation that Graphics Editor Jeremy White generated from a virtual model built on LIDAR elevation data and satellite imagery; it won the 2013 Pulitzer Prize for Feature Writing and a Peabody Award, and gave the industry the verb 'to snowfall'; Mike Bostock, 'How To Scroll' (3 November 2014), five rules for scroll-driven graphics: prefer scrolling to clicking; allow rapid, incremental, reversible scrolling; give instantaneous, consistent feedback; avoid unwanted disruptions; support standard keyboard controls; ai2html (Archie Tse, The New York Times; on GitHub since February 2015, Apache licence), an Illustrator script that exports one artboard per screen width to HTML and keeps the chart text as HTML so it stays readable as the artwork scales; Financial Times Visual Journalism Team, Visual Vocabulary: a poster and website for choosing a chart by the relationship it shows, in nine categories (deviation, correlation, ranking, distribution, change over time, part-to-whole, magnitude, spatial, flow), inspired by Jon Schwabish and Severino Ribecca's Graphic Continuum and used in newsroom-wide chart-literacy training; BBC News data team, bbplot and the BBC Visual and Data Journalism cookbook for R graphics (2019): a ggplot2 theme in Helvetica with a bold #222222 title, no axis titles, ticks or axis lines, light grey (#cbcbcb) horizontal gridlines only, a #333333 baseline at zero, and the title, subtitle and source aligned left; the theme keeps an untitled legend at the top, while the cookbook advises removing it and labelling data directly with text annotations, picks out one bar in #1380A1 against #dddddd grey, and splits data into small multiples by faceting

## Where it comes from, and what it’s close to

- Grew out of: [Isotype Pictorial Statistics](https://stylogeny.com/styles/isotype.md) (1925–1971)
- Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975)
- Alike in its design choices: [GOV.UK Design (GDS Style)](https://stylogeny.com/styles/govuk-design-system.md) (2012–present), 78% alike
- Alike in its design choices: [HfG Ulm Systematic Design](https://stylogeny.com/styles/ulm-school.md) (1953–1968), 75% alike
- Alike in its design choices: [Neo-Swiss Revival](https://stylogeny.com/styles/swiss-revival.md) (2005–present), 69% alike
- Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 67% alike
- Alike in its design choices: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present), 66% alike
- Alike in its design choices: [British Road Signage (Kinneir & Calvert)](https://stylogeny.com/styles/british-road-signage.md) (1958–present), 64% alike

## Sources

- Wikipedia, 'Data journalism' (https://en.wikipedia.org/wiki/Data_journalism): 'Although data journalism has been used informally by practitioners of computer-assisted reporting for decades, the first recorded use by a major news organization is The Guardian, which launched its Datablog in March 2009'; Simon Rogers; the Guardian's war-logs coverage used free tools such as Google Fusion Tables for an interactive map of every incident where someone died; notable teams at Reuters, ProPublica, La Nación and Berliner Morgenpost
- Wikipedia, 'D3.js' (https://en.wikipedia.org/wiki/D3.js): initial release 18 February 2011; Bostock, Heer and Ogievetsky; Protovis, Stanford Visualization Group, 2009; users include The New York Times
- Wikipedia, 'Mike Bostock' (https://en.wikipedia.org/wiki/Mike_Bostock): data-rich stories for the Times with D3, left in 2015, Gerald Loeb Awards 2013–2015
- Mike Bostock, personal site (https://bost.ocks.org/mike/): list of his New York Times graphics with dates, including '512 Paths to the White House' (2 November 2012), 'A Game of Shark and Minnow' (27 October 2013) and 'Is It Better to Rent or Buy?' (22 May 2014)
- Mike Bostock, 'How To Scroll' (3 November 2014) (https://bost.ocks.org/mike/scroll/)
- Wikipedia, 'Snow Fall' (https://en.wikipedia.org/wiki/Snow_Fall): published 20 December 2012; a graphics and design team of eleven staffers; Steve Duenes, Jeremy White, Andrew Kueneman; White 'gathered LIDAR elevation data and satellite imagery for the terrain', 'created a virtual model and then generated the animation'; Pulitzer Prize and Peabody Award; 'to snowfall'
- Wikipedia, 'John Branch (journalist)' (https://en.wikipedia.org/wiki/John_Branch_(journalist)): 2013 Pulitzer Prize in Feature Writing
- ai2html, GitHub repository and documentation (https://github.com/newsdev/ai2html): created by Archie Tse, The New York Times; Apache licence; repository created 24 February 2015; font table mapping NYT Franklin to 'nyt-franklin,arial,helvetica,sans-serif' and NYT Cheltenham to 'nyt-cheltenham,georgia,serif'; text kept as HTML so it stays readable as the artwork scales between phone and desktop widths
- Financial Times, Visual Vocabulary README, chart-doctor repository (https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary): Financial Times Visual Journalism Team; nine categories; newsroom-wide chart-literacy training; inspired by the Graphic Continuum by Jon Schwabish and Severino Ribecca
- Financial Times, g-chartframe, 'FT styled frames for D3 graphics' (https://github.com/Financial-Times/g-chartframe/; npm 5.3.3, src/webframe-m.js and src/printframe.js at https://unpkg.com/g-chartframe@5.3.3/): web frames on a #FFF1E0 paper background, the print frame on #FFF, subtitle and source in #66605C
- BBC, bbplot repository (https://github.com/bbc/bbplot), R/bbc_style.R and R/finalise_plot.R: Helvetica, #222222 bold title, no axis titles, ticks or axis lines, #cbcbcb major y gridlines, left-aligned title, subtitle and source, legend.position = "top" with its title and background removed; repository created 15 January 2019
- BBC Visual and Data Journalism cookbook for R graphics (https://bbc.github.io/rcookbook/, source https://github.com/bbc/rcookbook/blob/master/index.Rmd, last updated 24 January 2019): 'it's better to label data directly with text annotations'; baseline geom_hline(yintercept = 0, colour = "#333333"); one bar picked out with fill=ifelse(country == "Mauritius", "#1380A1", "#dddddd"); two-line chart in "#FAAB18" and "#1380A1"; 'Work with small multiples: Small multiple charts are easy to create with ggplot: it's called faceting'
- Dezeen, 'FT coronavirus updates "allow people to make an informed decision" says data visualisation journalist' (19 May 2020) (https://www.dezeen.com/2020/05/19/coronavirus-data-visulations-financial-times-interview-john-burn-murdoch/): first version in early March 2020, made in R, later moved to D3; annotations moved nightly in Illustrator
- Royal Statistical Society, 'Statistical Excellence in Journalism Awards 2021 winners' (https://rss.org.uk/news-publication/news-publications/2021/general-news/statistical-excellence-in-journalism-awards-2021-w/): FT 'Covid-19: The global crisis — in data', Explaining the Facts winner; John Burn-Murdoch highly commended
- Wikipedia, 'Flattening the curve' (https://en.wikipedia.org/wiki/Flattening_the_curve), reference to Harry Stevens, 'These simulations show how to flatten the coronavirus growth curve', The Washington Post, 14 March 2020 (https://www.washingtonpost.com/graphics/2020/world/corona-simulator/)
- The Pudding, About (https://pudding.cool/about/): visual essays since 2017; collective; Polygraph
- The Pudding, Jan Diehm and Amber Thomas, 'Women's Pockets are Inferior' (August 2018) (https://pudding.cool/2018/08/pockets/); Elaina Natario and Russell Samora, 'Easier scrollytelling with position sticky' (June 2018) (https://pudding.cool/process/scrollytelling-sticky/)
- Scrollama, GitHub repository (https://github.com/russellsamora/scrollama): 'Scrollytelling with IntersectionObserver', repository created October 2017
- Lisa Charlotte Muth, 'What to consider when choosing colors for data visualization', Datawrapper blog (29 May 2018) (https://www.datawrapper.de/blog/colors): grey for context and less important elements, highlight colours for the most important data; rainbow scales can confuse readers
- Wikipedia, 'Chartjunk' (https://en.wikipedia.org/wiki/Chartjunk): 'The term chartjunk was coined by Edward Tufte in his 1983 book The Visual Display of Quantitative Information'; 'all visual elements in charts and graphs that are not necessary to comprehend the information'
- Wikipedia, 'Edward Tufte' (https://en.wikipedia.org/wiki/Edward_Tufte): 'One method Tufte encourages to allow quick visual comparison of multiple series is the small multiple'; the data-ink ratio as an argument against excessive decoration
- Wikipedia, 'Small multiple' (https://en.wikipedia.org/wiki/Small_multiple): 'a series of similar graphs or charts using the same scale and axes, allowing them to be easily compared'; 'The term was popularized by Edward Tufte'
- Wikipedia, 'Isotype (picture language)' (https://en.wikipedia.org/wiki/Isotype_(picture_language)): to bring 'dead statistics' to life; exhibitions and books 'designed to inform ordinary citizens (including schoolchildren) about their place in the world'
- Wikipedia, 'Cheltenham (typeface)' (https://en.wikipedia.org/wiki/Cheltenham_(typeface)): the Times' 2003 headline palette, Matthew Carter
- Luc Devroye, 'The New York Times' and 'Carter & Cone' type design information pages (https://luc.devroye.org/fonts-95929.html, https://luc.devroye.org/fonts-26319.html): NYT Franklin (2012–2014) and NYT Cheltenham by Carter and Cone
- Klim Type Foundry, Financier Display (https://klim.co.nz/retail-fonts/financier-display/): 'Drawn for the redesign of the Financial Times (FT) in 2014', released 2016, Kris Sowersby; in use at the Financial Times with 'Financier Display, Financier Text & Metric'
- Klim Type Foundry, Metric (https://klim.co.nz/retail-fonts/metric/): released 2011, Kris Sowersby; 'a geometric, humanist sans serif inspired by lettering on West Berlin street signs', 'designed alongside Calibre'; the page does not mention the FT
- Wikipedia, 'Guardian Egyptian' (https://en.wikipedia.org/wiki/Guardian_Egyptian): Paul Barnes and Christian Schwartz, 2004–2005; slab serif; Guardian Sans and Guardian Text Sans in the family

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Newsroom Data Graphics & Scrollytelling”, https://stylogeny.com/styles/newsroom-data-graphics/