2f:Td51,Plot.plot({ marginLeft: 10,// don’t need left-margin since labels are inset marginRight: 150, marginTop: 50, width: 800, height: 450, style: { fontSize: "14px", background: "transparent", }, x: { label: null, }, y: { //label: "Funds raised ($)", }, marks: [ // Draw title // Plot.text(['Growth in CAF funding by school year'], { // frameAnchor: "top-left", // dy: -60, // fontSize: "30px", // fontWeight: "600", // }), // Draw area curves for Total amount raised & Employee matching Plot.areaY(data, { x: "date", y: "total", fill: "rgba(3, 110, 176, 0.75)", }), Plot.areaY(data, { x: "date", y: "matching", fill: "rgba(255,255,255,0.5)", }), Plot.gridY({ strokeDasharray: "0.5,3", // dashed strokeOpacity: 1 // opaque }), Plot.axisY({ tickSize: 0, // don’t draw ticks dx: 45, // offset right dy: -6, // offset up lineAnchor: "bottom", // draw labels above grid lines tickFormat: (d, i, _) => formatLabel(d, i, _) }), // Draw dots for all Total amount raised & Emplloyee matching values // Plot.dot(data, { // x: "date", // y: d => Math.max(d.total), // fill: "#036eb0", // r: 3, // }), // Plot.dot(data, { // x: "date", // y: d => Math.max(d.matching), // fill: "rgba(255,255,255,0.5)", // r: 3, // }), // Draw vertical line for most recent value Plot.ruleX(data, Plot.selectLast({ x: "date", y: d => Math.max(d.total), stroke: "#ba4657", })), // Draw dots for most recent Total amount raised & Emplloyee matching values Plot.dot(data, Plot.selectLast({ x: "date", y: d => Math.max(d.total), fill: "#ba4657", r: 5, })), Plot.dot(data, Plot.selectLast({ x: "date", y: d => Math.max(d.matching), fill: "#ba4657", r: 5, })), // Draw label for most recent School year Plot.text(data, Plot.selectLast({ x: "date", y: "total", text: d => `2022-23\nSchool Year`, textAnchor: "start", dx: 10, dy: -32, fontSize: "20px", fontWeight: "600", })), // Draw labels for most recent Total amount raised value Plot.text(data, Plot.selectLast({ x: "date", y: "total", text: d => `Total Amount\nRaised`, textAnchor: "start", dx: 10, dy: 15, fontSize: "18px", fontWeight: "400", color: "#000", })), Plot.text(data, Plot.selectLast({ x: "date", y: "total", text: d => d3.format("($,")(d.total), textAnchor: "start", dx: 10, dy: 48, fontSize: "18px", fill: "#ba4657", fontWeight: "600", })), // Draw labels for most recent Employee matching value Plot.text(data, Plot.selectLast({ x: "date", y: "matching", text: d => `Employer\nMatching`, textAnchor: "start", dx: 10, dy: 0, fontSize: "18px", fontWeight: "400", color: "#000", })), Plot.text(data, Plot.selectLast({ x: "date", y: "matching", text: d => d3.format("($,")(d.matching), textAnchor: "start", dx: 10, dy: 32, fontSize: "18px", fill: "#ba4657", fontWeight: "600", })), ] })30:[{"id":"5d97651f75bd417ce57dfa1c120eef7952cb2b4a7cae9322e990924cad97c7ecf816f89c2bcfb26fe9cfdb26963b8eec8e7fdd2ef16232ee345fc80f6467cb5d","href":"https://static.observableusercontent.com/files/5d97651f75bd417ce57dfa1c120eef7952cb2b4a7cae9322e990924cad97c7ecf816f89c2bcfb26fe9cfdb26963b8eec8e7fdd2ef16232ee345fc80f6467cb5d","name":"CAF About quick facts - Sheet1.csv","type":"text/csv","lastModified":1690486829809.683,"size":619},{"id":"61d98a73622f63dd386181a292c1bff391c46fde257f2785d1ce88efb831c3ff437ad942bb0edb96034ce5abc1644807f85ce5f8403ddf01753fcca8484a203a","href":"https://static.observableusercontent.com/files/61d98a73622f63dd386181a292c1bff391c46fde257f2785d1ce88efb831c3ff437ad942bb0edb96034ce5abc1644807f85ce5f8403ddf01753fcca8484a203a","name":"CAF About quick facts - Sheet1(1).csv","type":"text/csv","lastModified":1690487144965.426,"size":634},{"id":"fd4471f79351fb12f0a72f54620a159a0614072c790db993985240b97dd36c9b3cf731049e693ad224aa969cdf438ae61539401b77d17b24fa389531a96dcd90","href":"https://static.observableusercontent.com/files/fd4471f79351fb12f0a72f54620a159a0614072c790db993985240b97dd36c9b3cf731049e693ad224aa969cdf438ae61539401b77d17b24fa389531a96dcd90","name":"CAF About quick facts - Sheet1(2).csv","type":"text/csv","lastModified":1690489466664.767,"size":438},{"id":"fd4471f79351fb12f0a72f54620a159a0614072c790db993985240b97dd36c9b3cf731049e693ad224aa969cdf438ae61539401b77d17b24fa389531a96dcd90","href":"https://static.observableusercontent.com/files/fd4471f79351fb12f0a72f54620a159a0614072c790db993985240b97dd36c9b3cf731049e693ad224aa969cdf438ae61539401b77d17b24fa389531a96dcd90","name":"CAF About quick facts - Sheet1(3).csv","type":"text/csv","lastModified":1690489541849.551,"size":438}] 2d:{"title":"Plot: Area chart","cells":[{"id":0,"value":"

Plot: Area chart

Observable Plot › Gallery

\n\n# Area chart\n\nThe [area](https://observablehq.com/plot/marks/area) mark draws the region between a baseline (**x1**, **y1**) and a topline (**x2**, **y2**) as in an area chart. Often the baseline represents _y_ = 0, and because the area mark interpolates between adjacent data points, typically both the x and y scales are quantitative or temporal.","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"fundraising = FileAttachment(\"CAF About quick facts - Sheet1(3).csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"data = fundraising.map(d => {\n return {\n date: new Date(d.Date),\n total: parseInt(d[\"Total amount funded\"]),\n matching: parseInt(d[\"Employer matching\"]),\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"formatLabel = (d, i, _) => {\n if (i === 0) {\n return \"\";\n } else if (i === _.length - 1) {\n return `$${d3.format(\".2s\")(d)}`;\n } else {\n return d3.format(\".2s\")(d);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}