Public
Edited
Feb 20
tabularData = originalData.result.rechargesDetail.flatMap(detail => { const ddate = new Date(detail.date.start); return [ {date: ddate, type: 'without reservation', count: detail.rechargesWithoutReservation}, {date: ddate, type: 'with reservation', count: detail.rechargesByReservation}]})
Plot.plot({
y: {
tickFormat: "l"
},
marks: [
Plot.areaY(tabularData, {
x: "date",
y: "count",
fill: "type",
tip: true,
sort: (d) => {
return d.type === "with reservation" ? 1 : -1;
}
}),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.rectY(tabularData, {x: "date", y: "count", fill: "type", interval: d3.utcDay}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
type: "log",
domain: [1, 1500],
grid: true
},
x: { grid: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.lineY(tabularData, {
fy: "type",
x: "date",
y: "count",
stroke: "type",
tip: true
})
],
color: { legend: true }
})
Plot.plot({
y: { grid: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.rectY(tabularData, {
x: "date",
y: "count",
fy: "type",
fill: "#65a7ff",
interval: d3.utcDay
})
]
})
Plot.plot({
y: {
type: "sqrt",
domain: [1, 2000],
grid: true
},
marks: [
Plot.frame({ strokeOpacity: 0.3 }),
Plot.rectY(
tabularData.filter((d) => d.type === "without reservation"),
{
x: "date",
y: "count",
fill: "type",
interval: d3.utcDay,
tip: true
}
),
Plot.rectY(
tabularData.filter((d) => d.type === "with reservation"),
{
x: "date",
y: "count",
fill: "type",
interval: d3.utcDay,
tip: true
}
)
]
})
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.
