Published
Edited
Jan 7, 2022
1 fork
MACD Chart
macd = FileAttachment("macd@1.json").json()
viewof start = Inputs.date({label: "Start Date", value: "2021-01-21"});
viewof end = Inputs.date({label: "End Date", value: "2021-12-02"});
d3 = require("d3")
Plot.plot({
height: 450,
width: 1000,
color: {
"scheme": "BuRd",
pivot: 0.0,
legend: true,
nice: true,
},
y: { grid: true },
x: { domain: [ start, end] },
marks: [
Plot.ruleY([0], {stroke: "black", strokeOpacity: 0.6 }),
Plot.ruleX(macd[2].values.filter( (d) => new Date(d.date).getUTCDate() == 1), { x:"date", strokeOpacity: 0.2} ),
Plot.ruleX(macd[2].values, { x: d => new Date(d.date), strokeOpacity: 0.1}),
Plot.rectY(macd[2].values, {x: d => new Date(d.date), y: "value", interval: d3.utcDay, fill: "value" }),
Plot.line(macd[0].values, {x: d => new Date(d.date), y: "value", stroke: '#ff0000',}),
Plot.line(macd[1].values, {x: d => new Date(d.date), y: "value", stroke: '#0000ff',}),
]
});
Still TODO
Start of month that isn't in the data isn't marked
Lines are too bold
'BuRd' Colour scheme goes through some very light colours, which are a bit tricky to see.
Would be nice to colour the bars based on whether they increased or decreased since last datapoint
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.
