28:null 29:["$","title",null,{"children":"Plot Gallery: Area Charts | Jo Wood | Observable"}] 2e:T586,{ // ---- Data loading and shaping const data = await readData( "profiles.csv", "https://gicentre.github.io/data/lakeDistrict/" ); const skyHeight = 700; const skyData = [ {x: 0, y: skyHeight}, {x: 1, y: skyHeight} ]; // Custom gradient function const skyFill = () => htl.svg` `; display( // ---- Visualization specification Plot.plot({ width, height: width * 0.5, x: {axis: null}, y: {domain: [0, skyHeight], axis: null}, color: {scheme: "Greys", domain: d3.range(-1, 7)}, // -- Mark and channel specification marks: [ skyFill, Plot.areaY(skyData, {x: "x", y2: "y", fill: "url(#sun)"}), Plot.areaY(skyData, {x: "x", y2: "y", fill: "url(#cloud)"}), Plot.areaY(data, { x: "x", y2: (d) => d.elev / Math.pow(5 - d.profileID, 1.2), fill: "profileID", curve: "basis" }) ] }) ); }2f:T583,{ // ---- Data loading and shaping const data = await readData("unemployment-across-industries.json").then((d) => d.map((d) => ({ date: new Date(d.date), sector: d.series, unemployed: d.count })) ); // ---- Visualization specification const bands = 5; // Try changing the number of bands here. // Unemployment bands rounded to up to a multiple of 100 const step = Math.ceil(d3.max(data, (d) => d.unemployed) / bands / 100) * 100; display( Plot.plot({ // -- Channel customisation height: 700, axis: null, x: {axis: "top"}, y: {domain: [0, step]}, color: { scheme: "oranges", legend: true, type: "ordinal", tickFormat: (i) => (i + 1) * step }, facet: {data: data, y: "sector"}, // -- Mark and channel specification marks: [ d3.range(bands).map((i) => Plot.areaY(data, { x: "date", y: (d) => d.unemployed - i * step, fill: i, clip: true }) ), d3.range(bands).map((i) => Plot.line(data, { x: "date", y: (d) => d.unemployed - i * step, strokeWidth: 0.2, clip: true }) ), Plot.text( data, Plot.selectFirst({text: "sector", frameAnchor: "top-left"}) ) ] }) ); }30:T43e,{ // ---- Data loading and shaping const formatter = d3.utcFormat("%m-%d,"); const data = await readData( "googleTrends2020.csv", "https://gicentre.github.io/data/" ).then((d) => d .filter((d) => d.qType !== "search" && d.week < new Date(2020, 11, 27)) .map((d) => ({...d, datedQ: formatter(d.peakDate) + d.question})) ); display( // ---- Visualization specification Plot.plot({ width: 640, height: 600, marginRight: 200, axis: null, x: {axis: "bottom", label: "week", ticks: 12}, y: {domain: [0, d3.max(data, (d) => d.relFreq) * 0.5]}, marks: [ Plot.lineY(data, { x: "week", y: "relFreq", fy: "datedQ", fill: "white", stroke: "black", strokeWidth: 1, curve: "basis-open" }), Plot.text( data, Plot.selectLast({ x: "week", fy: "datedQ", text: "question", textAnchor: "start", dy: 6 }) ) ] }) ); }31:T46c,{ // ---- Data loading and shaping const decade = ({year}) => `${Math.floor(year / 10) * 10}s`; const songs = ( await readData("thousandSongs.csv", "https://gicentre.github.io/data/") ).filter(({year}) => year >= 1960); const songCounts = d3.rollup( songs, (rows) => rows.length, decade, ({theme}) => theme ); const songsData = d3.cross( new Set(songs.map(decade)), new Set(songs.map(({theme}) => theme)), (x, y) => ({x, y, count: songCounts.get(x)?.get(y) ?? 0}) ); display( Plot.plot({ width: 820, height: 600, label: null, x: {ticks: 10, tickFormat: "%"}, y: {ticks: 10, tickFormat: "%"}, marks: [ Plot.rect( songsData, marimekko({ x: "x", y: "y", value: "count", fill: "y", fillOpacity: 0.5 }) ), Plot.text( songsData, marimekko({ x: "x", y: "y", value: "count", text: ({count, y, x}) => `${count}\n${y}\n${x}` }) ) ] }) ); }32:[] 2c:{"id":"78e8b0eb7e35ff30","slug":"plot-gallery-area","title":"Plot Gallery: Area Charts","thumbnail":"8986bdc5401010003186c92f9559e67fe53ffbd88f71011552291cc3fbab6c96","access_level":"public","create_time":"$D2026-09-02T08:50:54.975Z","update_time":"$D2026-09-02T17:47:10.730Z","view_time":null,"first_public_time":"$D2026-09-02T17:47:42.491Z","has_unpublished_edits":null,"fork":{"id":"220b7db084a48c87","slug":"plot-gallery-scatter","title":"Plot Gallery: Scatter and Strip Plots","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":201,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"},{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"604ea4fe08905762","slug":"plot-gallery-2026","title":"Plot Gallery 2026","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Plot Gallery: Area Charts","cells":[{"id":1,"value":"# Plot Gallery: Area Charts\n\n_Various charts that use area-based fills positioned by some data value(s)._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"There are often several ways in which the same visualization can be specified in JavaScript code. Even though some might be more compact than those given here, I try to use a consistent approach so it becomes easier to learn the 'shape' of a fully specified plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Area Chart\n\nTaking a simple line chart and changing the mark from [line](https://observablehq.com/plot/marks/line) to [area](https://observablehq.com/plot/marks/area) will fill the region between a baseline and a top line. Useful when the area under a line has some meaning to the viewer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"{\n // ---- Data loading and shaping\n const data = await readData(\"unemployment-across-industries.json\");\n\n\n display(\n // ---- Visualization specification\n Plot.plot({\n y: {label: \"People unemployed (thousands)\"},\n marks: [\n Plot.areaY(data, {\n x: \"date\",\n y: \"count\", // Unemployment stored in field 'count' (not the count aggregating function).\n interval: \"month\", // Aggregate unemployment values over each month\n reduce: \"sum\", // Calculate the sum of y field values in each month.\n fill: \"tan\"\n })\n ]\n })\n );\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Area chart with gradient fill\n\nProviding a linear gradient to the area fill colour emphasises the upper line while retaining partial emphasis on the area under it. This can be achieved by providing a function that generates a [custom SVG definition](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) and then referencing it as the mark's fill colour.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"{\n // ---- Data loading and shaping\n const data = await readData(\"unemployment-across-industries.json\");\n\n function gradientFill() {\n return htl.svg`\n \n \n \n \n `;\n }\n\n display(\n Plot.plot({\n // ---- Visualization specification\n y: {label: \"People unemployed (thousands)\"},\n marks: [\n gradientFill, // Declare the custom gradient mark\n Plot.areaY(data, {\n x: \"date\",\n y: \"count\",\n interval: \"month\",\n reduce: \"sum\",\n fill: \"url(#gradient)\", // Use the custom gradient as fill\n stroke: \"tan\"\n }),\n Plot.ruleY([0])\n ]\n })\n );\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"We can adapt this approach to create a landscape image using data describing elevation profiles and then constructing an area chart of each profile. The sky uses the colour gradient approach while the profiles are standard area charts. By using `y2` for the area height, multiple areas are not stacked. And by using a colour scheme that fades from dark to light, we create a sense of increasing distance of each profile.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$2e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Stacked area chart\n\nA stacked area chart is similar to a stacked bar chart except it uses the [area mark](https://observablehq.com/plot/marks/area). It creates a continuous set of stacked regions. Here showing unemployment numbers across industries.\n\nCreating large numbers of categorical colour encodings can be problematic (hard to distinguish between some similar colours). To some extent this can be mitigated by choosing adjacent colours that are dissimilar. Here such a custom colour scheme is [generated randomly](https://observablehq.com/@jotasolano/random-n-color-generation-for-categorical-color-scales) ensuring no similar colours are adjacent.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const clrs14 = [\n // See https://observablehq.com/@jotasolano/random-n-color-generation-for-categorical-color-scales\n \"rgb(0, 189, 247)\",\n \"rgb(196, 150, 63)\",\n \"rgb(100, 123, 223)\",\n \"rgb(255, 119, 137)\",\n \"rgb(255, 165, 84)\",\n \"rgb(154, 159, 48)\",\n \"rgb(10, 168, 95)\",\n \"rgb(181, 140, 170)\",\n \"rgb(40, 186, 138)\",\n \"rgb(198, 153, 148)\",\n \"rgb(199, 125, 61)\",\n \"rgb(168, 146, 187)\",\n \"rgb(10, 161, 184)\",\n \"rgb(205, 86, 186)\"\n]\n\nconst unempData = await readData(\"unemployment-across-industries.json\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Plot.plot({\n width,\n y: {label: \"People unemployed (thousands)\"},\n color: {legend: true, columns: 4, range: clrs14}, // Custom colour scheme via the scale range\n marks: [\n Plot.areaY(unempData, {\n x: \"date\",\n y: \"count\",\n interval: \"month\",\n reduce: \"sum\",\n fill: \"series\" // Colour by industry type (called 'series' in the dataset)\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## Normalised stacked area chart\n\nAs above but this time normalising the height of the area in order to allow comparison of proportions of unemployed people in each sector. Adding `offset: \"normalize\"` normalises each monthly stack so that it sums to 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"Plot.plot({\n width,\n y: {label: \"Percent unemployed by sector\", tickFormat: \"%\"},\n color: {legend: true, columns: 4, range: clrs14},\n marks: [\n Plot.areaY(unempData, {\n x: \"date\",\n y: \"count\",\n interval: \"month\",\n reduce: \"sum\",\n fill: \"series\",\n offset: \"normalize\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Streamgraph\n\nAs above but stacked categories are centred and lines curved to create a [streamgraph](https://datavizcatalogue.com/methods/stream_graph.html).\n\nRather than the alphabetical ordering of categories above (better for 'lookup' tasks), here they are ordered vertically by their `sum` (i.e. the total count of unemployed people) making it clearer that the blue `Construction` and green `Manufacturing` sectors were particularly hit by unemployment since the 2008 financial crisis (far more so than the orange `Finance` category).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Plot.plot({\n width,\n y: {ticks: 0, label: \"People unemployed by sector\", labelAnchor: \"center\"},\n color: {legend: true, columns: 4, range: clrs14}, // Custom colour scheme via the scale range\n marks: [\n Plot.areaY(unempData, {\n x: \"date\",\n y: \"count\",\n interval: \"month\",\n reduce: \"sum\",\n fill: \"series\",\n curve: \"natural\",\n offset: \"wiggle\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"To calculate a smoother transition between values in a streamgraph an estimate of their density over some time period can be calculated. Here, films are grouped by release month and genre across all years in the dataset. A natural curve smooths the transitions between the monthly counts. Note the bulge of 'Oscar season' drama released in November-December each year, the 'Halloween' bulge of horror releases and the 'summer blockbuster' action/adventure releases.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n // ---- Data loading and shaping\n const parse = d3.utcParse(\"%b %d %Y\"); // Expected date format (three-letter month, day, year)\n const genres = [\"Action\", \"Adventure\", \"Comedy\", \"Drama\", \"Horror\"];\n const data = await readData(\"movies.json\").then((d) =>\n d\n .map((d) => ({date: parse(d[\"Release Date\"]), genre: d[\"Major Genre\"]}))\n .filter((d) => genres.includes(d.genre))\n );\n\n display(\n // ---- Visualization specification\n Plot.plot({\n x: {ticks: 12, tickFormat: Plot.formatMonth(\"en\", \"short\")},\n color: {legend: true},\n marks: [\n Plot.areaY(\n data,\n Plot.binX(\n {y: \"count\"},\n {\n x: (d) => d.date.getUTCMonth(),\n fill: \"genre\",\n offset: \"center\",\n curve: \"natural\"\n }\n )\n )\n ]\n })\n );\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Horizon Chart\n\nHorizon charts allow vertically compact designs to be created by slicing an area chart into bands and overlaying them on top of each other in increasingly darker colours.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"{\n // ---- Data loading and shaping\n const data = [\n 28, 55, 43, 91, 81, 53, 19, 87, 52, 48, 24, 49, 87, 66, 17, 27, 68, 16, 49,\n 15\n ].map((d, i) => ({x: i + 1, y: d}));\n\n const bands = 4;\n const step = 25;\n\n display(\n Plot.plot({\n height: 100,\n y: {domain: [0, step]},\n color: {scheme: \"oranges\", domain: [0, bands - 1]},\n marks: d3\n .range(bands)\n .map((i) =>\n Plot.areaY(data, {\n x: \"x\",\n y: (d) => d.y - i * step,\n fill: i,\n stroke:\"black\",\n strokeWidth:0.2,\n clip: true\n })\n )\n })\n );\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"For a single chart, there may be little benefit in the compact layout, but it becomes more useful when comparing multiple charts, such as those produced when faceting by some data field. In the example below, the process is generalised to generate any number of bands (determined by the `bands` value).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$2f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## Joy Plot\n\nSo-called after the iconic [Joy Division album cover](https://blogs.scientificamerican.com/sa-visual/pop-culture-pulsar-origin-story-of-joy-division-s-unknown-pleasures-album-cover-video/), joy plots show multiple lines but with vertically offset positions for each line. To avoid multiple lines in overlapping space, a solid area fill in the background colour is used to block occluded parts of lines. This design therefore works best where peaks in the lines are relatively narrow so that the lines 'behind' them can be largely seen.\n\nIn the example below, top Google searches in the UK during 2020 are shown, ordered vertically by when in the year the peak time for that search query occurred. It tells an interesting story of the impact of Covid and lockdowns through the year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## Mosaic Chart\n\nAlso known as [Marimekko charts](https://datavizcatalogue.com/methods/marimekko_chart.html), mosaic plots are similar to stacked bar charts except the width of each 'bar' is proportional to the total number of the items in the bar and the height of each item in the bar proportional to the item's relative proportion within the bar. This allows both relative proportions in two variables to be read in the same chart.\n\nThe specification required to create a Marimekko/mosaic chart is a little more complex, but it is provided on one of the Observable pages, so we can simply import it here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import { marimekko } from \"observable:@observablehq/plot-marimekko\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Mosaic charts require data containing two categorical variables and a count of the number of observations associated with each combination of the two variables. Your data may already be in this form, but in this example The Guardian's [1000 songs to hear before you die](https://www.theguardian.com/news/datablog/2009/mar/20/1) just stores the actual song details so we need to build up the 2d frequency table. To keep things readable, it also filters only songs created since 1960:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$31","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"To read data from an external source into an object, I've imported a function `readData()` that reads a file with a given filename and optionally a URL path (defaulting to the [Vega data repository](https://cdn.jsdelivr.net/npm/vega-datasets@2/data/)). File reading is an asynchronous process, meaning when called in the same cell as some plotting it should be preceded with `await` to ensure file reading is complete before starting the plotting.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import {defaultStyle, readData} from \"observable:@jwolondon/utilities-cdt-2026\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}} 2d:"$2c:body"