31:T50e,{ const data = tidy( gapminder, filter(d => d.year.getFullYear() === 2007), mutate({lifeExpGrouped: d => d.lifeExp < 50 ? 'Under 50' : (d.lifeExp < 65 ? '50-65' : (d.lifeExp < 80 ? '65-80' : '80+'))}), groupBy(['continent', 'lifeExpGrouped'], [ summarize({ continentPop: sum('pop')}) ]), groupBy('continent', mutateWithSummary({ totalContinentPop: sum('continentPop') })), mutate({ percent: d => d.continentPop / d.totalContinentPop })) const plot = Plot.plot({ height: 250, width: 600, style: { fontFamily: "Helvetica, san-serif", fontSize: "14px", color: "#222222" }, x: { tickPadding: 15, tickSize: 0, label: null }, y: { percent: true, ticks: 5, tickSize: 0, grid: true, label: null, }, color: { legend: true, scheme: "viridis", domain: ["Under 50", "50-65", "65-80", "80+"], marginLeft: 50, style: { fontFamily: "Helvetica", fontSize: "12px" } }, marks:[ Plot.barY(data, Plot.stackY({x: "continent", y: "percent", fill: "lifeExpGrouped", order: ["Under 50", "50-65", "65-80", "80+"]})), Plot.ruleY([0], {stroke: "#333333", strokeWidth: 1}), ] }) return plot }32:T525,{ const data = tidy( gapminder, filter(d => d.year.getFullYear() === 1967 | d.year.getFullYear() === 2007), select(['country', 'year', 'lifeExp']), pivotWider({ namesFrom: 'year', valuesFrom: 'lifeExp' }), rename({ ['Sun Jan 01 1967 00:00:00 GMT+0000 (Greenwich Mean Time)']: '1967', ['Mon Jan 01 2007 00:00:00 GMT+0000 (Greenwich Mean Time)']: '2007' }), mutate({ gap: d => d['1967'] - d['2007'] }), arrange(['gap', desc('gap')]), slice(0, 5), pivotLonger({ cols: ['1967', '2007'], namesTo: 'year', valuesTo: 'lifeExp' }) ) const plot = Plot.plot({ height: 250, width: 600, marginRight: 80, style: { fontFamily: "Helvetica, san-serif", fontSize: "14px", color: "#222222" }, x: { axis: null }, y: { ticks: 5, tickSize: 0, grid: true, label: null }, color: { range: ["#1380A1", "#FAAB18"], legend: true, marginLeft: 50, style: { fontFamily: "Helvetica", fontSize: "12px" } }, facet: { data: data, x: "country", label: null }, marks:[ Plot.barY(data, Plot.groupX({y: "max"}, {x: "year", y: "lifeExp", fill: "year"})), Plot.ruleY([0], {stroke: "#333333", strokeWidth: 1}), ] }) return plot }33:T511,{ const data = tidy( gapminder, filter(d => d.year.getFullYear() === 1967 | d.year.getFullYear() === 2007), select(['country', 'year', 'lifeExp']), pivotWider({ namesFrom: 'year', valuesFrom: 'lifeExp' }), rename({ ['Sun Jan 01 1967 00:00:00 GMT+0000 (Greenwich Mean Time)']: '1967', ['Mon Jan 01 2007 00:00:00 GMT+0000 (Greenwich Mean Time)']: '2007' }), mutate({ gap: d => d['1967'] - d['2007'] }), arrange(['gap', desc('gap')]), slice(0, 10), pivotLonger({ cols: ['1967', '2007'], namesTo: 'year', valuesTo: 'lifeExp' }) ) const plot = Plot.plot({ height: 250, width: 600, marginLeft: 100, style: { fontFamily: "Helvetica, san-serif", fontSize: "14px", color: "#222222" }, x: { ticks: 4, tickSize: 0, label: null }, y: { domain: d3.sort(data, d => d.gap).map(d => d.country), grid: true, tickSize: 0, label: null }, color: { domain: ["1967", "2007"], range: ["#1380A1", "#FAAB18"] }, marks:[ Plot.ruleY(data, Plot.groupY({x1: "min", x2: "max"}, {x: "lifeExp", y: "country", stroke: "#dddddd", strokeWidth: 5})), Plot.dot(data, {x: "lifeExp", y: "country", r: 5, fill: "year"}) ] }) return plot }34:T49f,{ const data = gapminder.filter(d => ["China", "United States"].includes(d.country)) const plot = Plot.plot({ height: 250, width: 600, marginRight: 100, style: { fontFamily: "Helvetica, san-serif", fontSize: "14px", color: "#222222" }, x: { domain: [new Date("1950-01-01"), new Date("2007-01-01")], tickPadding: 15, tickSize: 0, label: null }, y: { domain: [0,80], ticks: 5, tickSize: 0, grid: true, label: null }, color: { range: ["#FAAB18", "#1380A1"], }, marks:[ Plot.line(data, {x: "year", y: "lifeExp", stroke: "country", strokeWidth: 3}), Plot.text(data, Plot.selectLast({x: "year", y: d => d.lifeExp, z: "country", text: (d) => `${d.country}`, textAnchor: "start", dx: 2, fill: "country"})), Plot.text(data, {x: [new Date(1980, 1, 1)], y: 45, text: () => "I'm quite a long\nannotation over\nthree rows", textAnchor: "start", fontSize: 18, fill: "#555555"}), Plot.ruleY([10], {stroke: "red", strokeDasharray: 8, strokeWidth: 2}), Plot.ruleY([0], {stroke: "#333333", strokeWidth: 1}) ] }) return plot }35:[{"id":"74aae32ff393bb835ddd3a3a2221f5f034d67c504db9ba48b1f59b98098b1002e00c125f4a353d26b069cdfc3d8f82169c4eb18a35908c1d5e218448b414e682","href":"https://static.observableusercontent.com/files/74aae32ff393bb835ddd3a3a2221f5f034d67c504db9ba48b1f59b98098b1002e00c125f4a353d26b069cdfc3d8f82169c4eb18a35908c1d5e218448b414e682","name":"gapminder.csv","type":"text/csv","lastModified":1643202844493.899,"size":82097}] 2f:{"title":"How to create BBC style graphics with Observable Plot","cells":[{"id":0,"value":"# How to create BBC style graphics with Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":973,"value":"A few years ago the BBC's Visual and Data Journalism team published an [R](https://cran.r-project.org) [cookbook](https://bbc.github.io/rcookbook) containing the code they use to create publication-ready graphics with [ggplot2](https://ggplot2.tidyverse.org). This is an attempt to recreate some of the graphics using [Observable Plot](https://observablehq.com/@observablehq/introducing-observable-plot). The [tidy.js](https://pbeshai.github.io/tidy) JavaScript library has been used to manipulate the underlying [gapminder](https://cran.r-project.org/web/packages/gapminder/index.html) data. ","pinned":false,"hidden":false,"mode":"md"},{"id":561,"value":"toc({selector: \".title\", heading: \"Jump to:\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"

Line chart

","pinned":false,"hidden":false,"mode":"html"},{"id":599,"value":"

Living Longer
\nLife expectancy in China, 1952-2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":12,"value":"{\n const data = gapminder.filter(d => d.country === \"China\")\n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginRight: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n domain: [new Date(\"1950-01-01\"), new Date(\"2007-01-01\")],\n tickPadding: 15,\n tickSize: 0,\n label: null\n },\n y: {\n domain: [0,75],\n ticks: 5,\n tickSize: 0,\n grid: true,\n label: null\n },\n marks:[\n Plot.line(data, {x: \"year\", y: \"lifeExp\", stroke: \"#1380A1\", strokeWidth: 3}),\n Plot.ruleY([0], {stroke: \"#333333\", strokeWidth: 1}),\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"

Multiple line chart

","pinned":false,"hidden":false,"mode":"html"},{"id":135,"value":"

Living Longer
\nLife expectancy in China and the US\n

","pinned":false,"hidden":false,"mode":"html"},{"id":117,"value":"{\n const data = gapminder.filter(d => [\"China\", \"United States\"].includes(d.country))\n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginRight: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n domain: [new Date(\"1950-01-01\"), new Date(\"2007-01-01\")],\n tickPadding: 15,\n tickSize: 0,\n label: null\n },\n y: {\n domain: [0,80],\n ticks: 5,\n tickSize: 0,\n grid: true,\n label: null\n },\n color: {\n legend: true,\n range: [\"#FAAB18\", \"#1380A1\"],\n marginLeft: 50,\n marginBottom: 30, \n style: { fontFamily: \"Helvetica\", fontSize: \"12px\" }\n },\n marks:[\n Plot.line(data, {x: \"year\", y: \"lifeExp\", stroke: \"country\", strokeWidth: 3}),\n Plot.ruleY([0], {stroke: \"#333333\", strokeWidth: 1})\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"

Bar chart

","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"

Reunion is highest
\nHighest African life expectancy, 2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":145,"value":"{\n const data = gapminder.filter(d => d.year.getFullYear() === 2007 && d.continent === \"Africa\")\n .sort((a, b) => b.lifeExp - a.lifeExp)\n .slice(0,5) \n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginRight: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n tickPadding: 15,\n tickSize: 0,\n label: null\n },\n y: {\n domain: [0,80],\n ticks: 5,\n tickSize: 0,\n grid: true,\n label: null,\n },\n marks:[\n Plot.barY(data, {x: \"country\", y: \"lifeExp\", fill: \"#1380A1\", strokeWidth: 3}),\n Plot.ruleY([0], {stroke: \"#333333\", strokeWidth: 1})\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"

Stacked bar chart

","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"

How life expectancy varies
\n% of population by life expectancy band, 2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":280,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"

Grouped bar chart

","pinned":false,"hidden":false,"mode":"md"},{"id":547,"value":"

We're living longer
\nBiggest life expectancy rise, 1967-2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":457,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"

Dumbbell chart

","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"

We're living longer
\nBiggest life expectancy rise, 1967-2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":766,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"

Histogram

","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"

How life expectancy varies
\nDistribution of life expectancy, 2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":244,"value":"{\n const data = gapminder.filter(d => d.year.getFullYear() === 2007)\n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginRight: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n tickPadding: 15,\n tickSize: 0,\n label: null\n },\n y: {\n domain: [0,30],\n ticks: 5,\n tickSize: 0,\n grid: true,\n label: null\n },\n marks:[\n Plot.rectY(data, \n Plot.binX({y: \"count\"}, {x: \"lifeExp\", thresholds: 10, stroke: \"#FFFFFF\", fill: \"#1380A1\"})),\n Plot.ruleY([0], {stroke: \"#333333\", strokeWidth: 1})\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"

Annotation

","pinned":false,"hidden":false,"mode":"html"},{"id":807,"value":"

Living Longer
\nLife expectancy in China and the US\n

","pinned":false,"hidden":false,"mode":"html"},{"id":793,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":839,"value":"

Reunion is highest
\nHighest African life expectancy, 2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":827,"value":"{\n const data = gapminder.filter(d => d.year.getFullYear() === 2007 && d.continent === \"Africa\")\n .sort((a, b) => b.lifeExp - a.lifeExp)\n .slice(0,5) \n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginLeft: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n domain: [0,80],\n grid: true,\n ticks: 5,\n tickPadding: 5,\n tickSize: 0,\n label: null\n },\n y: {\n domain: ['Tunisia', 'Reunion', 'Mauritius', 'Libya', 'Algeria'],\n tickSize: 0,\n label: null,\n },\n marks:[\n Plot.barX(data, {x: \"lifeExp\", y: \"country\", fill: \"#1380A1\", strokeWidth: 3}),\n Plot.text(data, {x: \"lifeExp\", y: \"country\", text: d => (d.lifeExp).toFixed(0), fontStyle: \"normal\", fill: \"#FFFFFF\", dx: -12}),\n Plot.ruleX([0], {stroke: \"#333333\", strokeWidth: 1})\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"

Facets

","pinned":false,"hidden":false,"mode":"html"},{"id":916,"value":"

Asia's rapid growth
\nPopulation growth by continent, 1952-2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":927,"value":"{\n const data = tidy(\n gapminder,\n filter(d => d.continent != \"Americas\"),\n groupBy(['continent', 'year'], [\n summarize({ pop: sum('pop')})\n ])\n ) \n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginLeft: 40,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n label: null,\n ticks: 0\n },\n y: {\n grid: true,\n label: null,\n ticks: 3,\n tickFormat: d3.format(\"0.2s\"), \n tickSize: 0\n },\n facet:{\n data: data, \n x: 'continent', \n label: null\n },\n color: {\n range: [\"#FAAB18\", \"#1380A1\",\"#990000\", \"#588300\"]\n },\n marks: [\n Plot.areaY(data, {x: \"year\", y2: \"pop\", fill: \"continent\"}),\n Plot.ruleY([0])\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"

Reordering

","pinned":false,"hidden":false,"mode":"html"},{"id":948,"value":"

Reunion is highest
\nHighest African life expectancy, 2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":946,"value":"{\n const data = gapminder.filter(d => d.year.getFullYear() === 2007 && d.continent === \"Africa\")\n .sort((a, b) => b.lifeExp - a.lifeExp)\n .slice(0,5) \n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginLeft: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n domain: [0,80],\n grid: true,\n ticks: 5,\n tickPadding: 5,\n tickSize: 0,\n label: null\n },\n y: {\n domain: data.sort((a,b) => b.lifeExp - a.LifeExp).map(d => d.country),\n tickSize: 0,\n label: null,\n },\n marks:[\n Plot.barX(data, {x: \"lifeExp\", y: \"country\", fill: \"#1380A1\", strokeWidth: 3}),\n Plot.ruleX([0], {stroke: \"#333333\", strokeWidth: 1})\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"

Highlighting

","pinned":false,"hidden":false,"mode":"html"},{"id":959,"value":"

Reunion is highest
\nHighest African life expectancy, 2007\n

","pinned":false,"hidden":false,"mode":"html"},{"id":957,"value":"{\n const data = gapminder.filter(d => d.year.getFullYear() === 2007 && d.continent === \"Africa\")\n .sort((a, b) => b.lifeExp - a.lifeExp)\n .slice(0,5) \n const plot = Plot.plot({\n height: 250,\n width: 600,\n marginLeft: 80,\n style: {\n fontFamily: \"Helvetica, san-serif\",\n fontSize: \"14px\",\n color: \"#222222\"\n },\n x: {\n domain: [0,80],\n grid: true,\n ticks: 5,\n tickPadding: 5,\n tickSize: 0,\n label: null\n },\n y: {\n domain: data.sort((a,b) => b.lifeExp - a.LifeExp).map(d => d.country),\n tickSize: 0,\n label: null,\n },\n color: {\n domain: [\"true\", \"false\"],\n range: [\"#1380A1\", \"#dddddd\"]\n },\n marks:[\n Plot.barX(data, {x: \"lifeExp\", y: \"country\", fill: d => d.country === \"Mauritius\" ? \"true\" : \"false\", strokeWidth: 3}),\n Plot.ruleX([0], {stroke: \"#333333\", strokeWidth: 1})\n ]\n })\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"
\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"import {tidy, select, rename, filter, mutate, mutateWithSummary, arrange, slice, pivotLonger, pivotWider, groupBy, desc, summarize, sum, rate, when} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"gapminder = (await FileAttachment(\"gapminder.csv\").csv()).map(d => ({\n country: d.country,\n continent: d.continent,\n year: d3.utcParse(\"%Y\")(+d.year),\n lifeExp: +d.lifeExp,\n pop: +d.pop,\n gdpPercap: +d.gdpPercap\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}

Line chart

Living Longer \nLife expectancy in China, 1952-2007\n

Multiple line chart

Living Longer \nLife expectancy in China and the US\n

Bar chart

Reunion is highest \nHighest African life expectancy, 2007\n

Stacked bar chart

How life expectancy varies \n% of population by life expectancy band, 2007\n

Grouped bar chart

We're living longer \nBiggest life expectancy rise, 1967-2007\n

Dumbbell chart

We're living longer \nBiggest life expectancy rise, 1967-2007\n

Histogram

How life expectancy varies \nDistribution of life expectancy, 2007\n

Annotation

Living Longer \nLife expectancy in China and the US\n

Reunion is highest \nHighest African life expectancy, 2007\n

Facets

Asia's rapid growth \nPopulation growth by continent, 1952-2007\n

Reordering

Reunion is highest \nHighest African life expectancy, 2007\n

Highlighting

Reunion is highest \nHighest African life expectancy, 2007\n

Living Longer
\nLife expectancy in China, 1952-2007\n

Living Longer
\nLife expectancy in China and the US\n

Reunion is highest
\nHighest African life expectancy, 2007\n

How life expectancy varies
\n% of population by life expectancy band, 2007\n

We're living longer
\nBiggest life expectancy rise, 1967-2007\n

We're living longer
\nBiggest life expectancy rise, 1967-2007\n

How life expectancy varies
\nDistribution of life expectancy, 2007\n

Living Longer
\nLife expectancy in China and the US\n

Reunion is highest
\nHighest African life expectancy, 2007\n

Asia's rapid growth
\nPopulation growth by continent, 1952-2007\n

Reunion is highest
\nHighest African life expectancy, 2007\n

Reunion is highest
\nHighest African life expectancy, 2007\n