Public
Edited
May 23, 2023
Insert cell
Insert cell
Plot.plot({
height: 600,
width: 800,
margin: 100,
color: {
legend: false,
type: "ordinal"
},
axis: null,
marks: [
//Plot.dot(nodes, {x: (d) => d.vis_dims[0], y: (d) => d.vis_dims[1], stroke: "score", fill: "score", fillOpacity: 0.66, title: (d) => d.title.split("|")[0].trim(), r: (d) => d.uniques / 1000}),
Plot.dot(topics, {x: (d) => d.center[0], y: (d) => d.center[1], stroke: "id", fill: "id", fillOpacity: 0.66, r: (d) => parseInt(d.nodes)*10, /*(d) => 200 d.uniques / 10*/}),
Plot.text(topics, {x: (d) => d.center[0], y: (d) => d.center[1], text: (d) => d.keywords, dy: -6, lineAnchor: "middle"}),
]
});

Insert cell
data = FileAttachment("node_link_data.json").json();
Insert cell
nodes = data.nodes.filter(n => n.hasOwnProperty("vis_dims"))
Insert cell
topics = FileAttachment("topics@5.csv").csv();
Insert cell
topics.map(t => {
// get the vis_dims for nodes in the topic / score)
const vis_dims = nodes.reduce((a,c) => {
if (c.score == Number(t.id)) a.push(c.vis_dims);
return a;
},
[]);
t.center = get_center(vis_dims);
t.uniques = Number(t.uniques);
return t;
});
Insert cell
function get_center(coords){
const xy = coords.reduce((a,c) => {
if (a[0]===null || c[0] < a[0]) a[0] = c[0];
if (a[1]===null || c[1] < a[1]) a[1] = c[1];
if (a[2]===null || c[0] > a[2]) a[2] = c[0];
if (a[3]===null || c[1] > a[3]) a[3] = c[1];
return a;
},
[null,null,null,null]);
console.log(xy);
const width = get_distance(xy[0],xy[1],xy[2],xy[1]);
const height = get_distance(xy[0],xy[1],xy[0],xy[3]);
return [xy[0] + (width / 2), xy[1] + (height / 2)];
//return [xy, width, height];
}
Insert cell
get_center([[5,5],[5,-5],[-2.5,-10]])
Insert cell
function get_distance(x1, y1, x2, y2){
let y = x2 - x1;
let x = y2 - y1;
return Math.sqrt(x * x + y * y);
}
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