Public
Edited
Apr 19
Fork of Streamgraph
Insert cell
Insert cell
0x7f206e4f4a455299e7830417d38e3879ebd4cdb0 transactions 10_03_2023 01 43 from Zerion.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
balanceChanges = {

let dict = {}
return txsSendReceive
// .sort((a,b) => Date.parse(a.timestamp) < Date.parse(b.timestamp))
.map(e => {
const out = {}
if(e["Transaction Type"] == "send"){
out.change = e["Sell Fiat Amount"] * -1
out.token = e["Sell Currency"]
}else{
out.change = e["Buy Fiat Amount"]
out.token = e["Buy Currency"]
}
out.timestamp =
// Date.parse(
e["Timestamp"]
// )
// .toString()
// .getDate()

let dictTemp = dict
if(dict[out.token]){
console.log("Add tobalance change to token")
dict[out.token] += out.change
}else{
dict[out.token] = out.change
}

out.diff = dict[out.token]
// dict = dictTemp
return out
}).filter(e => e.token != "")
}
Insert cell
dict = ({})
Insert cell
Insert cell
data = FileAttachment("unemployment.csv").csv({typed: true})
Insert cell
import {Swatches} from "@d3/color-legend"
Insert cell
Insert cell
Plot.plot({
marginLeft: 60,
y: {grid: true},
color: {legend: true, columns: 6},
marks: [
// Plot.areaY(data, {x: "date", y: "unemployed", fill: "industry", offset: "wiggle"})
Plot.areaY(balanceChanges, {x: "timestamp", y: "diff", fill: "token", offset: "center"}), //offset: "wiggle" ]
]
})
Insert cell
Plot.plot({
style: "overflow: visible;",
y: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(balanceChanges, {x: "timestamp", y: "diff", stroke: "token"}),
// Plot.text(balanceChanges, Plot.selectLast({x: "timestamp", y: "diff", z: "diff", text: "Symbol", textAnchor: "start", dx: 3}))
]
})
Insert cell
Plot.plot({
marks: [
Plot.areaY(balanceChanges.slice(-365), {x: "timestamp", y: "diff"})
]
})
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(balanceChanges, {x: "timestamp", y: "diff"}),
Plot.dot(balanceChanges, {date: "timestamp"}),
Plot.dot(balanceChanges, Plot.pointerX({x: "timestamp", y: "diff", stroke: "red"})),
Plot.text(balanceChanges, Plot.pointerX({px: "timestamp", py: "diff", dy: -17, frameAnchor: "top-left", fontVariant: "tabular-nums", text: (d) => [`Date ${Plot.formatIsoDate(d.timestamp)}`, `Diff ${d.diff.toFixed(2)}`].join(" ")}))
]
})
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(balanceChanges, {x: "timestamp", y: "change"})
]
})
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(balanceChanges, {x: "timestamp", y: "diff", stroke: "token", marker: false}),
// Plot.areaY(balanceChanges, {x: "timestamp", y: "diff", stroke: "token", marker: false}),
Plot.areaY(balanceChanges, {x: "timestamp", y: "diff", fill: "token", title: "diff"})

]
})
Insert cell
Plot.plot({
marginLeft: 50,
width: 928,
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(balanceChanges, {x: "timestamp", y: "diff", fill: "token", title: "industry"}),
// Plot.ruleY([0])
]
})
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