Public
Edited
Sep 27, 2023
parseDate = d3.timeParse("%m/%d/%Y")
function processDataFn(symbol) {
function processData(values, symbol) {
// https://d3js.org/d3-array/sort#sort
const sorted = d3.map(values, obj => ({...obj, Date: parseDate(obj.Date)}))
.sort((a, b) => d3.ascending(a.Date, b.Date));
return d3.map(sorted, ({Date, Price}) => ({Date, Close: Price, Symbol: symbol}));
}
return values => processData(values, symbol);
}
dubai = FileAttachment("dubai_crude_oil_2014-2023.csv").csv({typed: true}).then(processDataFn("Dubai"))
brent = FileAttachment("brent_oil_2014-2023.csv").csv({typed: true}).then(processDataFn("Brent"))
wti = FileAttachment("crude_oil_wti_2014-2023.csv").csv({typed: true}).then(processDataFn("WTI"))
data = [dubai, brent, wti].flat()
// https://observablehq.com/@observablehq/plot-labeled-multi-line-chart?intent=fork
Plot.plot({
width: 1000,
style: "overflow: visible",
y: {grid: true},
color: {legend: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: "Date", y: "Close", stroke: "Symbol"}),
Plot.text(data, Plot.selectLast({x: "Date", y: "Close", stroke: "Symbol", text: "Symbol", textAnchor: "start", dx: 3}))
]
})
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.
