Public
Edited
Feb 19, 2023
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1200,
//y: {domain: [-5000,5000]},
marks: [
Plot.areaY(rekeningdataperweek, {x: 'datetime', y: 'balance',fill: 'Account'}),
Plot.ruleY([0])
]
});
Insert cell
Insert cell
rekeningdata
SELECT date_trunc('day',datetime) datetime, last(balance) balance, Account
FROM rekeningdata
GROUP BY date_trunc('day',datetime), Account
ORDER BY Account,datetime
Insert cell
rekeningdataperday = d3.flatRollup(rekeningdata,
v => d3.sum(v, d=>d.amount),
d => d.Account,
d => d.amount>=0?'pos':'min',
d => {
const formatDay = d3.timeFormat("%Y-%m-%d");
return formatDay(d.datetime);
});
Insert cell
rekeningdatapermonth = d3.flatRollup(rekeningdata,
v => d3.sum(v, d=>d.amount),
d => d.Account,
d => d.amount>=0?'pos':'min',
d => {
const formatMonth = d3.timeFormat("%Y-%m");
return formatMonth(d.datetime);
});
Insert cell
Plot.barY(rekeningdatapermonth, {
x: d=>new Date(d[2]),
y: d=>d[3],
z: d=>d[1],
fill: d=>d[0],
title: d=>d[0] + ' ' + parseInt(d[3])
}).plot({width: 1200, y: {grid: true,domain: [-20000,20000]}});
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1200,
x: {},
y: {grid: true, domain: [-10000,10000]},
marks: [
Plot.barY(spaardatapermonth.sort((a,b)=>a[0]>b[0]), {x: d=>new Date(d[0]), y: d=>d[1], fill: 'steelBlue',title: d=>new Date(d[0])}),
//Plot.rectY(spaardata, Plot.stackY(Plot.binX({y: "count"}, {x: d=>d.datetime, fill: "Account"}))),
]
});
Insert cell

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.
Learn more