kapiResponse = fetchp(
"https://keys-api.lido.fi/v1/modules/1/operators"
).then(d => d.json())
rearrangedOperatorData = []
operatorData = kapiResponse.data.operators
{
rearrangedOperatorData.length = 0
operatorData.forEach((operator) => {
operator.activeKeys = parseInt(operator.usedSigningKeys - operator.stoppedValidators)
operator.depositableKeys = parseInt(operator.stakingLimit - operator.usedSigningKeys)
operator.depositedKeys = 0
rearrangedOperatorData.push(
{
operator: operator.name,
countType: "depositableKeys",
value: operator.depositableKeys
}
)
rearrangedOperatorData.push(
{
operator: operator.name,
countType: "depositedKeys",
value: 0
}
)
rearrangedOperatorData.push(
{
operator: operator.name,
countType: "activeKeys",
value: operator.activeKeys
}
)
})
}
initialDataSort = d3.groupSort(rearrangedOperatorData.filter(entry => (entry.countType === "activeKeys")), g => d3.sum(g, d => d.value), d => d.operator)
Plot.plot({
width,
color: {
legend: true,
type: "categorical",
domain: ["activeKeys", "depositedKeys", "depositableKeys"],
range: ["#FF5B82", "#3B39FC", "#9392FF"]
},
y: {grid: true},
x: {
tickRotate: -45,
domain: initialDataSort
},
marginBottom: 150,
marginLeft: 50,
marks: [
Plot.barY(
rearrangedOperatorData,
Plot.groupX(
{ y: "sum"},
{ x: "operator",
y: "value",
fill: "countType",
tip: true,
sort: {x: "y"},
order: ["activeKeys", "depositableKeys", "depositedKeys"]
}
)
),
Plot.ruleY([0])
]
})
viewof stakeInput = Inputs.text({label: "Stake amount (ETH)"})
newDepositedData = []
finalDepositedDataDomain = d3.groupSort(newDepositedData.filter(entry => (entry.countType === "activeKeys")), g => d3.sum(g, d => d.value), d => d.operator)
finalDepositedData = newDepositedData.filter(entry => (entry.countType != "activeKeys"))
Plot.plot({
width,
y: {grid: true},
x: {
tickRotate: -45,
domain: finalDepositedDataDomain
},
color: {
legend: true,
type: "categorical",
domain: ["prevActiveKeys", "depositedKeys", "depositableKeys"],
range: ["#FF5B82", "#3B39FC", "#9392FF"]
},
marginBottom: 150,
marginLeft: 50,
marks: [
Plot.barY(
finalDepositedData,
Plot.groupX(
{ y: "sum"},
{ x: "operator",
y: "value",
fill: "countType",
tip: true,
order: ["prevActiveKeys", "depositedKeys", "depositableKeys"]
}
)
),
Plot.ruleY([0])
]
})
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.
