3e:null 3f:["$","title",null,{"children":"Playfair’s Wheat and Wages | Jo Wood | Observable"}] 45:T449,## 4. Creating a title panel with a custom mark The main title is enclosed in an elliptical panel in the chart space. Plot doesn't have an ellipse mark so we can instead create a custom mark to draw one. Marks in Plot are just functions that produce SVG, so to create a custom mark we simply have to specify our own function (and helpfully SVG has a simple [ellipse command](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse)). SVG requires pixel coordinates to position marks, but we have been specifying locations in 'data space' (i.e. horizontal position determined by dates and vertical position determined by price). Usefully, custom marks can capture the x- and y- [scales](https://observablehq.com/plot/features/scales) used to convert from data space to screen space, so we can express the dimensions of the SVG ellipse with data values making positioning much more robust should we need to change chart dimensions. To create the panel with a thicker line on the upper and lower boundary we can draw two ellipses with very slightly different dimensions and stroke widths:46:T4d8,const annotation = [ Plot.text(["Weekly Wages of a Good Mechanic"], { x: 1626, y: 8.4, rotate: -1.3 }), Plot.text(["Weekly Wages"], {x: 1741, y: 16.5, rotate: -7}), Plot.text(["of a Good Mechanic"], {x: 1762, y: 19.6, rotate: -12}), Plot.text(["№1"], { x: 1700, y: 105, fontFamily: fnt.serif, fontSize: 20 }), Plot.text(["CHART"], { x: 1652, y: 81.5, fontFamily: fnt.display, fontSize: 20 }), Plot.text(["Shewing at One View\nThe Price of The Quarter of Wheat,"], { x: 1652, y: 75, fontSize: 17 }), Plot.text(["& Wages of Labour by the Week,"], { x: 1652, y: 68.5, fontFamily: fnt.serif, fontSize: 12 }), Plot.text(["— from —"], { x: 1652, y: 66, fontFamily: fnt.serif, fontSize: 8 }), Plot.text(["The Year 1565 to 1821,"], { x: 1652, y: 63.5, fontSize: 14 }), Plot.text(["— by —"], { x: 1652, y: 60.5, fontFamily: fnt.serif, fontSize: 8 }), Plot.text(["WILLIAM PLAYFAIR,"], { x: 1652, y: 57.75, fontFamily: fnt.display, fontSize: 12 }), Plot.text( ["For a Particular Explanation, See Letter to the Lords & Commons"], {x: 1700, y: 0, dy: 40} ) ];47:Ta9d,Of course it's not a perfect reproduction. A few elements would benefit from improvements: - The typography is not ideal, with Pinyon Script a rather poor match with that used by Playfair. This is especially so for the Roman numerals following monarchs' names (e.g. George III). Unicode symbols Ⅰ, Ⅱ, Ⅲ and Ⅳ could be used, but they are not supported by this particular font. While Fredericka The Great provides something of the slightly imprecise text decoration used by Playfair, its modern design is a little jarring. There are commercial fonts available that would be improvements such as [Antiquarian Scribe](https://fonts.adobe.com/fonts/antiquarian-scribe), but licensing would restrict sharing on Observable. - ${await FileAttachment("layering.jpg").image({ height: 60 })} As with most modern visualization and graphics systems, Observable Plot specifies marks in _layers_ (z-value). This works well for most designs, but cannot capture the hand-crafted layering the title panel being 'under' the bars, 'over' the grid, yet the grid is over the bars. - ${await FileAttachment("axisLabels.jpg").image({ height: 120 })} The double axis labelling is achieved by providing a single centred label and padding the midpoint with spaces (`" ".repeat(20)` etc.). This doesn't reproduce the off-centre labelling used by Playfair and results in a poorly spaced right axis label.

- ${await FileAttachment("barGrads.jpg").image({ height: 70 })}The bar shading gradient doesn't reproduce the hand painted gradients of the original that create regions of bars that tend to emphasise monarchs' ruling periods. - ${await FileAttachment("rotatedText.jpg").image({ height: 60 })}Plot rotates text around an anchor point so it cannot reliably follow a curve. This was somewhat simplistically addressed above by splitting the line annotation midway and rotating each element at a slightly different angle. As a consequence, the approach would not be adaptable to different aspect ratios (where the line it follows could be at a different angle). An alternative would be to define an SVG [textPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath), but one of the satisfying elements of this reproduction has been that it (largely) uses core Plot marks and transforms.48:[{"id":"c45bde9b98efdb284bc144d0c75ce112752985316acc78cef89a6e2aa3c551bed8e9c3c2172932ad6fd3e7977896d6246766afa8de8d4d1f40b50476f00202d1","href":"https://static.observableusercontent.com/files/c45bde9b98efdb284bc144d0c75ce112752985316acc78cef89a6e2aa3c551bed8e9c3c2172932ad6fd3e7977896d6246766afa8de8d4d1f40b50476f00202d1","name":"barGrads.jpg","type":"image/jpeg","lastModified":1689784540126.319,"size":34446},{"id":"fe78b18a16ccf8d3fae7ad91c834a3d78ba5b98492bdf67085c1f5722756e5bb79d0bfdd226d0176e1a54442ffb69bf0bdc53495ac0dd33012ffa9f21f88b5d7","href":"https://static.observableusercontent.com/files/fe78b18a16ccf8d3fae7ad91c834a3d78ba5b98492bdf67085c1f5722756e5bb79d0bfdd226d0176e1a54442ffb69bf0bdc53495ac0dd33012ffa9f21f88b5d7","name":"layering.jpg","type":"image/jpeg","lastModified":1689782660617.332,"size":35405},{"id":"386a6cffd49a6dfb05a67a959a84d50c84e14294f36a12f8b30cf0ccc77ffd2f2b3b933c3f4ccfd26929d75e1491fe6ff8da1c84b6dc23fe47b10c5fe283a8bd","href":"https://static.observableusercontent.com/files/386a6cffd49a6dfb05a67a959a84d50c84e14294f36a12f8b30cf0ccc77ffd2f2b3b933c3f4ccfd26929d75e1491fe6ff8da1c84b6dc23fe47b10c5fe283a8bd","name":"rotatedText.jpg","type":"image/jpeg","lastModified":1689785178475.041,"size":44842},{"id":"750b35c68026b38717e74a3f7934510fc4b6f6aa5e0ee82d77a07c06fb8a0cd877fffcd2e6293cd4ef7c79f469186af24d60e9cc0ef1cbd946b25d67f0af6ba0","href":"https://static.observableusercontent.com/files/750b35c68026b38717e74a3f7934510fc4b6f6aa5e0ee82d77a07c06fb8a0cd877fffcd2e6293cd4ef7c79f469186af24d60e9cc0ef1cbd946b25d67f0af6ba0","name":"wheatAndWagesOrig.jpg","type":"image/jpeg","lastModified":1689597778825.528,"size":191165},{"id":"f84641863f8366c2c1cffef099b583125ee54dd32810671eb7166b36ab8a7a50107d2467008b6dbe3bf18cbe76afa76ecf178dfa490d7e7ea21aa61b7c27ca23","href":"https://static.observableusercontent.com/files/f84641863f8366c2c1cffef099b583125ee54dd32810671eb7166b36ab8a7a50107d2467008b6dbe3bf18cbe76afa76ecf178dfa490d7e7ea21aa61b7c27ca23","name":"axisLabels.jpg","type":"image/jpeg","lastModified":1689784105709.817,"size":19915}] 43:{"id":"c53972bd8aca151e","slug":"wheat-and-wages","title":"Playfair’s Wheat and Wages","thumbnail":"eb02d4c5ce147c9da9acbda67379a9db90713487dfe9d58895ef05c99ba936a8","access_level":"public","create_time":"$D2023-07-17T12:28:20.364Z","update_time":"$D2026-09-12T15:29:56.955Z","view_time":null,"first_public_time":"$D2023-07-19T16:55:28.136Z","has_unpublished_edits":null,"fork":false,"stars":49,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","bio":"Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking."},"version":1250,"publish_version":1250,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"bio":"Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking."}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[{"id":"dd09b5c5c8e6a9b7","reply_to_id":null,"content":"to avoid Mary being on a dark line:\n lineHeight: 0.82,","create_time":"$D2023-07-19T21:55:26.548Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"d9df4fb5263ace62","slug":"visualization","title":"Visualization","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Playfair’s Wheat and Wages","cells":[{"id":0,"value":"# Playfair's Wheat and Wages\n\n_A design reproduction exercise with Plot, originally written in 2022 but since updated to work with Observable 2.0._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"[William Playfair](https://friendly.github.io/HistDataVis/ch05-playfair.html) was an important figure in the development of data visualization through his pioneering use of graphics to represent quantities. One of his best-known, created in 1822, is this time-series composite comparing the price of wheat and typical skilled manual wages in the context of ruling monarchs.\n\n${await FileAttachment(\"wheatAndWagesOrig.jpg\").image()}\n\nIt can be a useful design exercise to attempt to reproduce existing graphics in whatever visualization package you have available. It helps both to understand the expressive capabilities of the package as well as focus on the details of design choices that have been made in the original. Historic examples can be particularly interesting because they highlight how convention in datavis design has changed over the years.\n\nBelow I explore how [Observable Plot](https://observablehq.com/plot/) can be used to recreate this graphic.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"## 1. Wheat and wage data\n\nData on wheat prices and wage growth can be found [here](https://cdn.jsdelivr.net/npm/vega-datasets@2/data/wheat.json).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"const data = (\n await d3.json(\"https://cdn.jsdelivr.net/npm/vega-datasets@2/data/wheat.json\")\n).map((d) => ({...d, year: Number(d.year)}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"To start with, let's simply show the data (bar chart of wheat prices and area chart of wage growth) with minimal customising of Plot's default style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"Plot.plot({\n marks: [\n Plot.rectY(data, {x1: \"year\", x2: (d) => d.year + 5, y: \"wheat\"}),\n Plot.areaY(data, {x: \"year\", y: \"wages\", fill: \"rgb(205,215,210)\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"This immediately reveals that the wage data stop in 1810 but the wheat data appear to stop in 1820. We see a slight misalignment in the two datasets that also appears in the original graphic – the bars have a 5 year interval projecting to the right of the start date, whereas the area chart is made up of instances in time that coincide with the left of each bar. This results in the steep sloping line at the right edge of the area mark.\n\nThe original graphic also reveals that the last wheat value is only for the period 1820-1821 and not the 5 year period of the other bars (the chart was published in 1822). \n\nWe can handle both problems by filtering the area data up to 1810 and providing a conditional bar width for the wheat data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"Plot.plot({\n marks: [\n Plot.rectY(data, {\n x1: \"year\",\n x2: (d) => (d.year === 1820 ? 1821 : d.year + 5), // 1820 data only extends to 1821\n y: \"wheat\"\n }),\n Plot.areaY(data, {\n filter: (d) => d.year <= 1810, // Prevent the absent data beyond 1810 being treated as 0s.\n x: \"year\",\n y: \"wages\",\n fill: \"rgb(205,215,210)\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## 2. Styling the chart area\n\nTo mimic the style of the original, we need to fade the black bar colours downward. Setting fill gradients can be achieved with some [SVG styling](https://observablehq.com/@observablehq/plot-gradient-bars). The original shows a mixture of shading relative to each bar's height and relative to the entire chart height. We can experiment with both here by setting [gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientUnits) to either `userSpaceOnUse` (relative to chart dimensions) or `objectBoundingBox` (relative to bar height).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"const gradientUnits = view(\n Inputs.radio([\"userSpaceOnUse\", \"objectBoundingBox\"], {\n label: \"gradientUnits\",\n value: \"userSpaceOnUse\"\n })\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n const gradientFill = () =>\n htl.svg`\n \n \n \n \n `;\n\n display(\n Plot.plot({\n marks: [\n gradientFill, // Add the SVG gradient definition as (invisble) mark\n Plot.rectY(data, {\n x1: \"year\",\n x2: (d) => (d.year === 1820 ? 1821 : d.year + 5),\n y: \"wheat\",\n fill: \"url(#gradient1)\" // Here we link to that invisible gradient definition mark\n })\n ]\n })\n );\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"While neither exactly match the original, the smoother `userSpaceOnUse` gives less distracting, smoother design. Let's get a little closer by setting a faded yellow 'paper' colour for the whole chart, match the aspect ratio of Playfair's chart and add a margin around the edge.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":917,"value":"const bgClr = \"rgb(250,244,230)\";\nconst [w, h, margin] = [1000, 515, 50];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"Adding the red and black upper boundary to the area chart is simple, as it is simply a matter of adding a couple of line marks. To provide the red highlight above but not below the black line, we can plot three elements in order of thick red line – area – thin black line, with a stroke cap of `butt` to ensure the line does not bleed outside of the area x-bounds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"const barsAndArea = [\n () =>\n htl.svg`\n \n \n \n \n `,\n\n Plot.rectY(data, {\n x1: \"year\",\n x2: (d) => (d.year === 1820 ? 1821 : d.year + 5),\n y: \"wheat\",\n fill: \"url(#vFade)\"\n }),\n Plot.line(data, {\n x: \"year\",\n y: \"wages\",\n strokeWidth: 6,\n strokeLinecap: \"butt\",\n stroke: \"rgb(204,78,91)\"\n }),\n Plot.areaY(data, {\n filter: (d) => d.year <= 1810,\n x: \"year\",\n y: \"wages\",\n fill: \"rgb(205,215,210)\"\n }),\n Plot.line(data, {x: \"year\", y: \"wages\", strokeLinecap: \"butt\"})\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"Plot.plot({\n width: w,\n height: h,\n margin: margin,\n style: `background:${bgClr}`,\n marks: barsAndArea\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"## 3. Customising the axes and grid\n\nThe original chart uses what are, by modern standards, a set of rather idiosyncratic styles – a repeated vertical axis on the left and right with different labelling; alternating use of only the last significant digit for numbers on the left vertical axis; double labelling of the horizontal axis and a mixture of rotated and unrotated labels on the right vertical axis. We also see some quite dominating grid lines in the main chart area.\n\nWith a single horizontal axis, we can customise the x-channel so that the full year is displayed every 50 years and we have a double label by centring it with some spaces between the two blocks of text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"const xAxis = {\n tickFormat: (d) => d3.format(\"d\")(d % 50 === 0 ? d : d % 100),\n tickSize: 0,\n tickSpacing: 30,\n tickPadding: 4,\n label: `5 Years each division${\" \".repeat(100)}5 Years each division`,\n labelAnchor: \"center\",\n labelArrow: \"none\",\n labelOffset: 24\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"For the y axes we have to take a different approach as we need to show two of them (left and right) with slightly different labelling on each. We can do this by specifying some [custom axis marks](https://observablehq.com/plot/marks/axis) that alternate between full and last-digit axis labels on the left (20, 5, 30, 5, 40, 5...etc) and mixed vertical and horizontal labelling on the right axis. Other changes from the default axis style include removing tick marks (`tickSize: 0`), placing the labels closer to the chart area (`tickPadding: 4`), removing the axis arrow (`labelArrow: \"none\"`) and shrinking the text size (`fontSize: 7`):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"const yAxes = [\n Plot.axisY({\n anchor: \"right\",\n tickFormat: (d) =>\n d === 0 || d > 100\n ? \"\"\n : d === 5 || d === 50 || d === 100\n ? `${d} Shillings`\n : d,\n tickSize: 0,\n tickSpacing: 20,\n tickPadding: 4,\n fontSize: 7,\n labelArrow: \"none\",\n labelOffset: 30,\n labelAnchor: \"center\",\n label: `Price of the Quarter ${\" \".repeat(25)} of Wheat in Shillings`\n }),\n Plot.axisY({\n anchor: \"left\",\n tickFormat: (d) => (d === 0 || d > 100 ? \"\" : d % 10 === 0 ? d : 5),\n tickSize: 0,\n tickSpacing: 20,\n tickPadding: 4,\n fontSize: 7\n })\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"Plot.plot({\n width: w,\n height: h,\n margin: margin,\n style: `background:${bgClr}`,\n x: xAxis,\n marks: [barsAndArea, yAxes]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"For the grid lines, we can simply add some [grid marks](https://observablehq.com/plot/marks/grid) – two representing the 'major' vertical and horizontal grid lines and two representing their 'minor' counterparts. We can use [d3.range()](https://observablehq.com/@d3/d3-range) to generate the tick label numbers explicitly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"const grid = [\n Plot.gridX(d3.range(1600, 1830, 50), {\n y1: 0,\n y2: 100,\n strokeWidth: 1.5,\n strokeOpacity: 1\n }),\n Plot.gridX(d3.range(1565, 1830, 5), {\n y1: 0,\n y2: 100,\n strokeWidth: 0.2,\n strokeOpacity: 1\n }),\n Plot.gridY(d3.range(0, 101, 10), {strokeWidth: 2, strokeOpacity: 1}),\n Plot.gridY(d3.range(5, 90, 10), {strokeWidth: 0.2, strokeOpacity: 1})\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"Plot.plot({\n width: w,\n height: h,\n margin: margin,\n style: `background:${bgClr}`,\n x: xAxis,\n marks: [barsAndArea, yAxes, grid]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":847,"value":"const titlePanel = [\n // x and y are the horizontal and vertical scale functions\n (_, {x, y}) =>\n htl.svg`\n \n `\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"Plot.plot({\n width: w,\n height: h,\n margin: margin,\n style: `background:${bgClr}`,\n x: xAxis,\n marks: [barsAndArea, yAxes, grid, titlePanel]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"## 5. Adding the monarchs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":361,"value":"Along the top of the chart are some alternating bars indicating the reigns of the monarchs (and Cromwell) over the period of the chart. The data recording their names and reigns can be stated explicitly as below. The vertical position (in data space) of the bars can be calculated programmatically by determining whether the monarch is in an odd or even position in the list. The only exception being Cromwell's commonwealth, so we deal with that explicitly in the positioning rules. The horizontal positioning of each bar is referenced by its centre, which will make labelling a little easier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"const monarchData = [\n {name: \"Elizabeth\", start: 1565, end: 1603},\n {name: \"James I\", start: 1603, end: 1625},\n {name: \"Charles I\", start: 1625, end: 1649},\n {name: \"Cromwell\", start: 1649, end: 1660, commonwealth: true},\n {name: \"Charles II\", start: 1660, end: 1685},\n {name: \"James II\", start: 1685, end: 1689},\n {name: \"William\\nand\\nMary\", start: 1689, end: 1702},\n {name: \"Anne\", start: 1702, end: 1714},\n {name: \"George I\", start: 1714, end: 1727},\n {name: \"George II\", start: 1727, end: 1760},\n {name: \"George III\", start: 1760, end: 1820},\n {name: \"George IV\", start: 1811, end: 1821},\n {name: \"\", start: 1821, end: 1830, future: true}\n].map((d, i) => ({\n ...d,\n x: d.start + (d.end - d.start) / 2,\n y: (d.future || (!d.commonwealth && i % 2) ? -1 : 1) + 96\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"To create outline rectangles for Cromwell and for the unknown continuation of George IV’s reign beyond the chart’s data in 1821, we can make the fill colour conditional. Adjacent bars that change vertical position are joined with vertical [rule marks](https://observablehq.com/plot/marks/rule), except for the period where George IV was 'Prince Regent' during the latter part of George III's reign.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"const monarchs = [\n Plot.rect(monarchData, {\n x1: \"start\",\n x2: \"end\",\n y1: \"y\",\n y2: (d) => d.y + 1.0,\n fill: (d) => (d.commonwealth || d.future ? bgClr : \"black\"),\n stroke: \"black\"\n }),\n Plot.ruleX(monarchData, {\n x: \"end\",\n y1: (d) => (d.y < 96 ? d.y : d.y + 1),\n y2: (d) =>\n d.end > 1800 || d.name === \"Charles I\" || d.commonwealth\n ? d.y\n : d.y < 96\n ? d.y + 3\n : d.y - 2\n }),\n Plot.text(monarchData, {\n x: \"x\",\n y: \"y\",\n fontSize: 9,\n textAnchor: \"middle\",\n lineAnchor: \"top\",\n lineHeight: 0.82, // For more compact 'William and Mary' (thanks @Fil)\n dy: 4,\n text: \"name\"\n })\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"Plot.plot({height: 45, axis: null, y: {domain: [90, 100]}, marks: monarchs})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"## 6. Customising typography\n\nAn obvious and jarring difference between the original and new versions of the chart is the use of type. We can [customise fonts](https://observablehq.com/@dla/fonts) to use antique styles that more closely match the original. Sticking to publicly available fonts served on the web keeps distribution simple, but does require some compromise when matching the originals.\n\nWe can identify three categories of type used by Playfair:\n\n- An italic script for most axis labels and annotations.\n- A serif font for century labels and some of the title.\n- A display font for selected parts of the title.\n\nTo use external fonts we first create a link to their [web source](https://fonts.google.com) somewhere on the page:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":778,"value":"For convenience, store the font names:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":780,"value":"const fnt = {\n script: \"Pinyon Script\",\n serif: \"Old Standard TT\",\n display: \"Fredericka The Great\"\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"and then set the default font as a CSS style within the Plot specification.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"Plot.plot({\n width: w,\n height: h,\n margin: margin,\n style: `background:${bgClr}; font-family: ${fnt.script}; font-weight:900;`,\n x: xAxis,\n marks: [barsAndArea, yAxes, grid, monarchs, titlePanel]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"## 7. Century markers\n\nThe very top of the original chart shows a series of curved braces marking each century. Because they have variable extents, it is probably simplest to create a small dataset containing vertices that trace the shape. We can keep this simple as we can interpolate along curved lines to generate the more gentle shapes required.\n\nHere are the data defining the basic shape of the century braces remembering coordinates are in 'data space' (i.e. years determining x-position and price determining y-position):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"const cCurves = [\n [1565, 108, 107],\n [1590, 102, 102],\n [1600, 100, 100],\n [1605, 101, 101],\n [1650, 108, 107],\n [1695, 101, 101],\n [1700, 100, 100],\n [1705, 101, 101],\n [1750, 108, 107],\n [1795, 101, 101],\n [1800, 100, 100],\n [1805, 102, 102],\n [1810, 103.5, 103.5],\n [1830, 108, 107]\n].map(([year, y1, y2]) => ({year, y1, y2}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"By having both an upper (`y1`) and lower (`y2`) boundary, we can simulate the thickening of the lines towards the top of each curve. We can cap the left and right of the markers with a left- and right-anchored frame line that also serves to provide the thicker vertical axis lines.\n\nAs the century labelling doesn't use the default italic script, we specify it specifically for the century text marks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"const centuryData = [1575, 1650, 1750, 1820].map((x, i) => ({\n x,\n y: 102,\n cent: `${16 + i}ᵗʰ Century`\n}));\n\nconst century = [\n Plot.areaY(cCurves, {\n x: \"year\",\n y1: \"y1\",\n y2: \"y2\",\n curve: \"monotone-x\",\n stroke: \"black\",\n fill: \"black\",\n strokeWidth: 2\n }),\n Plot.text(centuryData, {x: \"x\", y: \"y\", text: \"cent\", fontFamily: fnt.serif}),\n Plot.frame({anchor: \"left\", strokeWidth: 2}),\n Plot.frame({anchor: \"right\", strokeWidth: 2})\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"Plot.plot({width: 900, height: 70, axis: null, margin: 15, marks: century})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"## 8. Text annotation\n\nFinally we need to add the text to the chart, comprising the annotation of the wages (area) chart and the main title. Annotation is straightforward in Plot, although here we have a range of font families, sizes and orientations to specify.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":692,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"---\n\n## The final chart\n\nAnd there we have it! Combining all the elements gives us a reasonable reproduction of Playfair's chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"Plot.plot({\n width: w,\n height: h,\n margin,\n style: `background:${bgClr}; font-family: ${fnt.script};`,\n x: xAxis,\n marks: [barsAndArea, yAxes, grid, monarchs, century, titlePanel, annotation]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1054,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"2"}} 44:"$43:body"