40:null 41:["$","title",null,{"children":"Pretty area chart | SarahLightBourne | Observable"}] 47:T610,plot = Plot.plot({ marks: [ () => htl.svg` `, Plot.areaY(plot_data, { filter: (d) => d.series === 1, x: "x", y: "y", fill: "url(#section1)", curve: "catmull-rom", }), Plot.areaY(plot_data, { filter: (d) => d.series === 2, x: "x", y: "y", fill: "url(#section2)", curve: "catmull-rom", }), Plot.text(plot_data, { filter: (d) => d.series === 1, x: "x", y: "y", text: "y", fill: "#01B37E", dy: -20, fontSize: 25, fontWeight: 900, }), Plot.text(plot_data, { filter: (d) => d.series === 2, x: "x", y: "y", text: "y", fill: "#F06001", dy: 20, fontSize: 25, fontWeight: 900, }), Plot.ruleY([0], { stroke: "white", strokeWidth: 5 }), ], x: { ticks: 6, label: null, tickSize: 0, tickFormat: d3.timeFormat("%d.%-m"), }, y: { ticks: 0, label: null, domain: [-35, 35], }, })48:[{"id":"1f7c2087ad7d781c1da4781f1595b99d8160f139ca8f2a8c7916adfe29fa1792c425977594445f5cb1d988d71d36388be4a1a44f75ca6e5f1126d770b244ff35","href":"https://static.observableusercontent.com/files/1f7c2087ad7d781c1da4781f1595b99d8160f139ca8f2a8c7916adfe29fa1792c425977594445f5cb1d988d71d36388be4a1a44f75ca6e5f1126d770b244ff35","name":"b19820f5e592a44949e2c5de4574cfc0fec06f9f_2_1380x952.jpeg","type":"image/jpeg","lastModified":1694682640459.873,"size":79552},{"id":"9cfdf2ff1eeb384b9b54ea165e248fff8e4818617ee7ca85befec596338b3366f942978fb69ff18807824b11f2a8afc1ccee7a7dc32df5609cc9eb6bce2384dd","href":"https://static.observableusercontent.com/files/9cfdf2ff1eeb384b9b54ea165e248fff8e4818617ee7ca85befec596338b3366f942978fb69ff18807824b11f2a8afc1ccee7a7dc32df5609cc9eb6bce2384dd","name":"IMAGE 2566-09-14 16:41:23.jpg","type":"image/jpeg","lastModified":1694684511890.242,"size":38373}] 45:{"id":"427c018b1aed47a2","slug":null,"title":"Pretty area chart","thumbnail":"ea3c6c78a2d8edbe5ed1041694313cf7f17ca1c13b5d1f936d6483789735d081","access_level":"public","create_time":"$D2023-09-14T09:10:40.459Z","update_time":"$D2023-09-14T09:59:48.935Z","view_time":null,"first_public_time":"$D2023-09-14T09:43:10.230Z","has_unpublished_edits":null,"fork":{"id":"07b702910c6a5b1b","slug":null,"title":"Pretty area chart","owner":{"id":"5097ed23e9872f77","login":"cobus","name":"Cobus Theunissen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d8d63268bd28e025","login":"sarahlightbourne-ws","name":"SarahLightBourne","avatar_url":"https://avatars-next.observableusercontent.com/6af136a8902c13f6af5474aeb1b6c55584895f2de12e469619dea3a39edba630","tier":"starter_2024","bio":"","following":false},"version":197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3aa71cb80030563","login":"sarahlightbourne","name":"SarahLightBourne","avatar_url":"https://avatars-next.observableusercontent.com/fd6cb53f437dd613383d5522271394c475d731efa30a65e2078f248d5b3ea222","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d3aa71cb80030563","login":"sarahlightbourne","name":"SarahLightBourne","avatar_url":"https://avatars-next.observableusercontent.com/fd6cb53f437dd613383d5522271394c475d731efa30a65e2078f248d5b3ea222","tier":null,"role":"editor"},{"type":"team","id":"d8d63268bd28e025","login":"sarahlightbourne-ws","name":"SarahLightBourne","avatar_url":"https://avatars-next.observableusercontent.com/6af136a8902c13f6af5474aeb1b6c55584895f2de12e469619dea3a39edba630","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pretty area chart","cells":[{"id":0,"value":"# Pretty area chart\nIn response to a question in the [forum](https://talk.observablehq.com/t/how-to-create-this-graph/8270). Trying to recreate a chart like this with Plot. Not perfect, since the white 0 axis is on top of the areas, so they are not really representing the values correctly anymore.\n${await FileAttachment(\"b19820f5e592a44949e2c5de4574cfc0fec06f9f_2_1380x952.jpeg\").image({width: 600})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"data = [\n { series: 1, x: 0 , y: 23 },\n { series: 1, x: 1 , y: 17 },\n { series: 1, x: 2 , y: 21 },\n { series: 1, x: 3 , y: 13 },\n { series: 1, x: 4 , y: 21 },\n { series: 1, x: 5 , y: 9 },\n { series: 1, x: 6 , y: 11 },\n { series: 2, x: 0 , y: -3 },\n { series: 2, x: 1 , y: 0 },\n { series: 2, x: 2 , y: 0 },\n { series: 2, x: 3 , y: -3 },\n { series: 2, x: 4 , y: -19 },\n { series: 2, x: 5 , y: -4 },\n { series: 2, x: 6 , y: 0 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"Plot.plot({\n color: { legend: true },\n y: {\n domain: [-30, 30],\n label: null,\n ticks: 0\n },\n x: {\n label: null,\n ticks: 0\n },\n marks: [\n //Plot.frame(),\n Plot.areaY(data, {\n filter: (d) => d.series == 1,\n x: \"x\",\n y: \"y\",\n fill: \"#56BB89\",\n tip: true\n }),\n Plot.areaY(data, {\n filter: (d) => d.series == 2,\n x: \"x\",\n y: \"y\",\n fill: \"#E55C29\",\n tip: true\n }),\n Plot.text(data, {\n filter: (d) => d.series == 1,\n x: \"x\",\n y: \"y\",\n text: \"y\",\n fill: \"#56BB89\",\n dy: -20,\n fontFamily: \"Tahoma, sans-serif\",\n fontSize: 25,\n fontWeight: 900\n }),\n Plot.text(data, {\n filter: (d) => d.series == 2,\n x: \"x\",\n y: \"y\",\n text: \"y\",\n fill: \"#E55C29\",\n dy: 20,\n fontFamily: \"Tahoma, sans-serif\",\n fontSize: 25,\n fontWeight: 900\n }),\n Plot.ruleY([0], {stroke: \"white\", strokeWidth: 5})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"## I forked your solution and tried to improve it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"Added dates for the x axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"plot_data = [\n { series: 1, x: new Date(\"2023-02-15\"), y: 23 },\n { series: 1, x: new Date(\"2023-02-16\"), y: 17 },\n { series: 1, x: new Date(\"2023-02-17\"), y: 21 },\n { series: 1, x: new Date(\"2023-02-18\"), y: 13 },\n { series: 1, x: new Date(\"2023-02-19\"), y: 21 },\n { series: 1, x: new Date(\"2023-02-20\"), y: 9 },\n { series: 1, x: new Date(\"2023-02-21\"), y: 11 },\n { series: 2, x: new Date(\"2023-02-15\"), y: -3 },\n { series: 2, x: new Date(\"2023-02-16\"), y: 0 },\n { series: 2, x: new Date(\"2023-02-17\"), y: 0 },\n { series: 2, x: new Date(\"2023-02-18\"), y: -3 },\n { series: 2, x: new Date(\"2023-02-19\"), y: -19 },\n { series: 2, x: new Date(\"2023-02-20\"), y: -4 },\n { series: 2, x: new Date(\"2023-02-21\"), y: 0 },\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"Added styles to date labels (not sure if it's a good idea but I didn't find any other solution🤧)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"d3.select(plot).selectAll(`[aria-label=\"x-axis tick label\"]`).style('font-size', '18px').style('color', '#A9A9A9')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"### The only thing left to do is to round all the corners but I genuinely don't know how to do that (I attached the original graph)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"image25660914164123 = FileAttachment(\"IMAGE 2566-09-14 16:41:23.jpg\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"