The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Sep 8, 2023
Plot.plot({
marginLeft: 50,
title: "Cash Flow",
subtitle: htl.html`<h4><span style="color:green">Operating</span> + <span style="color:gold">Investing</span> + <span style="color:red">Financing</span></h4>`,
caption: "Black line is net cash",
grid: true,
x: {interval: "year"},
y: {line: true},
marks: [
Plot.barY(data, {x: "FY", y1: "Investing", y2: "Operating", fill: "green", opacity: 0.7}),
Plot.barY(data, {x: "FY", y1: "Financing", y2: "Investing", fill: "gold", opacity: 0.7}),
Plot.barY(data, {x: "FY", y: "Financing", fill: "red", opacity: 0.7}),
Plot.barY(data, {x: "FY", y: (d) => (+d.Operating + +d.Investing + +d.Financing), stroke: "black"}),
Plot.lineY(data, {x: "FY", y: (d) => (+d.Operating + +d.Investing + +d.Financing), stroke: "black"}),
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 50,
title: "Cash Flow",
subtitle: htl.html`<h4><span style="color:green">Operating</span> + <span style="color:gold">Investing</span> + <span style="color:red">Financing</span></h4>`,
caption: "Black line is net cash",
grid: true,
y: {line: true},
marks: [
Plot.rectY(data, {x: "FY", y1: "Investing", y2: "Operating", fill: "green", opacity: 0.7, interval: "year"}),
Plot.rectY(data, {x: "FY", y1: "Financing", y2: "Investing", fill: "gold", opacity: 0.7, interval: "year"}),
Plot.rectY(data, {x: "FY", y: "Financing", fill: "red", opacity: 0.7, interval: "year"}),
Plot.rectY(data, {x: "FY", y: (d) => (+d.Operating + +d.Investing + +d.Financing), stroke: "black", interval: "year"}),
Plot.lineY(data, {x: "FY", y: (d) => (+d.Operating + +d.Investing + +d.Financing), stroke: "black"}),
Plot.ruleY([0])
]
})
data = d3.csvParse(text, (d) => ({
FY: parseDate(d.FY),
Operating: +d.Operating,
Investing: +d.Investing,
Financing: +d.Financing,
}))
datau = d3.csvParse(text)
text = `FY,Operating,Investing,Financing
2015/03/31,159,-552,551
2016/03/31,78,-1384,1892
2017/03/31,-40,2814,-411
2018/03/31,-158,7853,-388
2019/03/31,410,-7326,-2043
2020/03/31,-196,2316,6
2021/03/31,73,-731,53
2022/03/31,-702,5906,894
2023/03/31,-177,12555,-12096
`
parseDate = d3.utcParse("%Y/%m/%d")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
