Published
Edited
Sep 22, 2020
Insert cell
md`# CredGraph Visualizer`
Insert cell
depths = [5, 3, 3]
Insert cell
Insert cell
Insert cell
Insert cell
import { select, checkbox } from "@jashkenas/inputs"
Insert cell
sc = (await require(await FileAttachment("api@8.js").url())).default
Insert cell
credGraph = {
const f = `https://raw.githubusercontent.com/decentralion/random-playground/master/credGraph.json`;
const raw = await (await fetch(f)).json();
return sc.core.credGraph.CredGraph.fromJSON(raw);
}
Insert cell
Insert cell
seed = sc.core.markovProcessGraph.SEED_ADDRESS
Insert cell
hasPrefix = sc.core.graph.NodeAddress.hasPrefix
Insert cell
type = addr => {
if (hasPrefix(addr, seed)) return "SEED";
if (hasPrefix(addr, sc.core.markovProcessGraph.EPOCH_PREFIX))
return "USER_EPOCH";
if (scoringAddresses.has(addr)) return "PARTICIPANT";
return "CONTRIBUTION";
}
Insert cell
typeScale = d3.scaleOrdinal(
["SEED", "USER_EPOCH", "PARTICIPANT", "CONTRIBUTION"],
["#EFA558", "#FFBFD3", "#42B9FD", "#7FB84E"]
)
Insert cell
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("stroke", "red")
.attr("visibility", "visible");
g.append("text")
.text("hello world")
.attr("x", 10)
.attr("y", 15);
return svg.node();
}
Insert cell
clamp = (a, b) => Math.max(0, Math.min(a, b))
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
height = 500
Insert cell
removeMd = require('https://bundle.run/remove-markdown@0.3.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