The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Aug 1, 2023
1 star
libor = FileAttachment("libor-projections.csv").csv({typed: true})
Plot.plot({
fy: { tickFormat: "d" },
y: {
percent: true,
nice: true,
grid: true,
axis: "right",
label: "rate (%)"
},
color: { legend: true },
marks: [
Plot.frame(),
Plot.lineY(libor, {
markerStart: true,
fy: (d) => d.on.getFullYear(),
x: "about",
stroke: (d) => "H" + (1 + d3.utcMonth.count(d3.utcYear(d.on), d.on)) / 3,
y: "value",
tip: true
})
]
})
PlotF.plot({
fy: { tickFormat: "d" },
y: {
percent: true,
nice: true,
grid: true,
axis: "right",
label: "rate (%)"
},
color: { legend: true },
marks: [
Plot.frame(),
Plot.lineY(libor, {
markerStart: true,
fy: (d) => d.on.getFullYear(),
x: "about",
stroke: (d) => "H" + (1 + d3.utcMonth.count(d3.utcYear(d.on), d.on)) / 3,
y: "value",
tip: true
})
]
})
Plot.lineY(industries, {
x: "date",
y: "unemployed",
fx: (d) => d.date.getDay(),
fy: (d) => d.date.getFullYear(),
stroke: "industry",
tip: true
}).plot()
PlotF.lineY(industries, {
x: "date",
y: "unemployed",
fx: (d) => d.date.getDay(),
fy: (d) => d.date.getFullYear(),
stroke: "industry",
tip: true
}).plot()
Plot.lineY(industries, {
x: "date",
y: "unemployed",
fx: (d) => d.date.getDay() > 3,
fy: (d) => d.date.getFullYear() % 3,
stroke: "industry",
tip: true
}).plot()
PlotF.lineY(industries, {
x: "date",
y: "unemployed",
fx: (d) => d.date.getDay() > 3,
fy: (d) => d.date.getFullYear() % 3,
stroke: "industry",
tip: true
}).plot()
PlotF = FileAttachment("plot.umd.min.js").url().then(require)
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.
