defaults = {
return {
..._defaults,
// extend with some defaults for this notebook
detail: "medium",
hist: true,
page_size: { parser: (s) => parseInt(s), value: 50 },
page_start: { parser: (s) => parseInt(s), value: 0 },
probe_id: { parser: (s) => parseInt(s), value: 1 }
};
}
// viewof af = Inputs.select(['IPv4', 'IPv6', 'Both'], {
// label: 'Address family:'
// })
lineChart = Plot.plot({
marginBottom: marginBottom,
marginRight: marginRight,
width: W, //w,
height: h,
x: {
domain: __domain.map((d) => d[0]),
tickRotate: +45,
tickSize: 10,
label: `← closer to probe ID ${probes[0]} ASN further away from probe ID ${probes[0]} →`,
tickFormat: (origin) => generateLabel(origin)
},
y: {
// domain: [0, 10],
label: "Latency [ms]",
grid: true,
zero: true
},
marks: probes
// one mark (Plot.line) per probe
.map((p, i) =>
Plot.line(__domain, {
x: ([origin, probesData]) => origin,
y: ([origin, probesData]) => probesData[i].min_rtt,
curve: "step",
fill: "none",
stroke: "rgb(19,32,72)", // ([origin, probesData]) => probesData[i].prb_id
strokeWidth: 3
})
)
//plus one mark for the tooltip
.concat(
Plot.tooltip(__domain, {
x: (d) => d[0],
y: (d) => d3.max(d[1].map((d) => d.min_rtt)),
content: ([origin, probesData]) => tooltipContent(origin, probesData),
direction: "up"
})
)
})
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.
