Published
Edited
Jan 26, 2021
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("rect")
.attrs({
height: height,
width: width,
fill: "#f7f7f7"
});
svg.selectAll("g")
.data(["topic_links", "topic_nodes", "topic_bars"]).enter()
.append("g")
.attrs({
"id": d => d
});
svg.select("#topic_nodes")
.selectAll("circle")
.data(topic_nodes).enter()
.append("circle")
.attrs({
cx: d => scales.m(d.m),
cy: d => scales.k(d.k),
r: 10,
fill: "black"
})
.on("mouseover", (d, e) => update_bars(d, e))
svg.select("#topic_links")
.selectAll("edges")
.data(W.objects()).enter()
.append("line")
.attrs({
x1: d => scales.m(d.m),
y1: d => scales.k(d.k),
x2: d => scales.m(d.m_next),
y2: d => scales.k(d.k_next),
stroke: "#d3d3d3",
"stroke-width": d => scales.w(d.w),
opacity: d => scales.w_alpha(d.w)
});
svg.select("#topic_bars")
.selectAll("rect")
.data(B0.objects(), d => d.w).enter()
.append("rect")
.attrs({
x: d => scales.v(d.w),
y: d => 300 - scales.b(d.b),
width: scales.v.bandwidth(),
height: d => scales.b(d.b),
fill: d => scales.b(d.b) > 1.5 ? "black" : "#f7f7f7"
})
function update_bars(event, elem) {
let B_ = B.objects().filter(d => d.m == elem.m & d.k == elem.k)
svg.select("#topic_bars")
.selectAll("rect")
.data(B_, d => d.w)
.transition()
.duration(1000)
.attrs({
y: d => 300 - scales.b(d.b),
height: d => scales.b(d.b),
fill: d => scales.b(d.b) > 1.5 ? "black" : "#f7f7f7"
})
}
return svg.node()
}
scales = {
return {
m: d3.scaleLinear().domain([0, M]).range([0, 0.75 * width]),
k: d3.scaleLinear().domain([0, K]).range([0, height]),
w: d3.scaleLinear().domain([0, w_max]).range([5, 25]),
w_alpha: d3.scaleLinear().domain([0, w_max]).range([0.2, 1]),
v: d3.scaleBand().domain(v).range([0.77 * width, 0.97 * width]),
b: d3.scaleLinear().domain([0, b_max]).range([0, 200])
}
}
B.view()
M = B.rollup({max: (d) => aq.max(d.m)}).objects()[0]["max"]
K = B.rollup({max: (d) => aq.max(d.k)}).objects()[0]["max"]
topic_nodes = B.groupby("m", "k").rollup().objects()
w_max = W.rollup({max: d => aq.max(d.w)}).objects()[0]["max"]
B0 = B.filter(d => d.k == 1 & d.m == 1)
W.filter(d => d.w > 0.2).objects()
v = B.rollup({v: d => op.unique(d.w)}).objects()[0].v
b_max = B.rollup({b_max: d => op.max(d.b)}).objects()[0].b_max
aq.table({test: [1], test2: [3]})
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.
