Public
Edited
Dec 15
1 fork
Importers
10 stars
Plot.plot({
style: "overflow: visible;",
y: { grid: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(stocks, { x: "Date", y: "Close", stroke: "Symbol" }),
Plot.text(
stocks,
Plot.selectLast({
x: "Date",
y: "Close",
z: "Symbol",
text: "Symbol",
textAnchor: "start",
dx: 3
})
)
]
})
stocks = [
["AAPL", await FileAttachment("aapl.csv").csv({ typed: true })],
["AMZN", await FileAttachment("amzn.csv").csv({ typed: true })],
["GOOG", await FileAttachment("goog.csv").csv({ typed: true })],
["IBM", await FileAttachment("ibm.csv").csv({ typed: true })]
].flatMap(([Symbol, values]) => values.map((d) => ({ Symbol, ...d })))
Inputs.table(stocks)
Inputs.table(stocks_rotated)
Plot.plot({
style: "overflow: visible;",
y: { grid: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(stocks_rotated, { x: "Date", y: "AAPL", stroke: "red" }),
Plot.lineY(stocks_rotated, { x: "Date", y: "GOOG", stroke: "blue" }),
Plot.lineY(stocks_rotated, { x: "Date", y: "IBM", stroke: "green" }),
Plot.lineY(stocks_rotated, { x: "Date", y: "AMZN", stroke: "orange" })
]
})
/**
* Data is your data, which is assumed to be an array of objects,
* and valueColumns is a list of property names which contain values.
* This will automatically create a _new row_ for each valueColumn,
* and new properties called value & key.
*
* So, say, if you have a table with 5 different data series in it,
* this'll result in 5x the rows of the original because it'll have a row
* per series at each point in time.
*/
function dataRotate(data, valueColumns) {
return data.flatMap((row) => {
const otherColumns = Object.fromEntries(
Object.entries(row).filter(([k, v]) => !valueColumns.includes(k))
);
return valueColumns.map((col) => {
return {
value: row[col],
key: col,
...otherColumns
};
});
});
}
stocks_unrotated = dataRotate(stocks_rotated, ["AAPL", "AMZN", "GOOG", "IBM"])
Inputs.table(stocks_unrotated)
Plot.plot({
style: "overflow: visible;",
y: { grid: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(stocks_unrotated, { x: "Date", y: "value", stroke: "key" }),
Plot.text(
stocks_unrotated,
Plot.selectLast({
x: "Date",
y: "value",
z: "key",
text: "key",
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.
