graph.store.scaleNodeX(100)
function svgTransform(graph) {
// Return a function for mapping simulation space points to pixels.
// Plus an svg space transform that can be used to transform a whole group of elements.
const k = graph.store.transform[0];
const dx = graph.store.transform[6];
const dy = graph.store.transform[7];
const s = graph.config.spaceSize;
const screenSize = graph.store.screenSize;
const aspectRatio = graph.store.screenSize[1] / graph.store.screenSize[0];
const canvasWidthInSpace = s / k;
const canvasHeightInSpace = canvasWidthInSpace * aspectRatio;
// Return a transform from our graph that translates graph coordinates to pixel coordinates.
const t = {
translate: {
x: (dx * screenSize[0] / 2) + (screenSize[0] / 2),
y: - (dy * screenSize[1] / 2) + (screenSize[1] / 2)
},
scale: {
x: k,
y: -k
},
aspectRatio,
transform: graph.store.transform
}
// SVG Transform String
t.string = `translate(${t.translate.x} ${t.translate.y}) scale(${t.scale.x} ${t.scale.y})`
// Transformation Functions for clip space and pixel space
t.coordinatesToClip = (point) => {
return [
(point[0] - s/2) * aspectRatio / canvasWidthInSpace + dx,
(point[1] - s/2) / canvasWidthInSpace + dy,
]
}
t.coordinatesToPixels = (point, width, height) =>{
const p1 = t.coordinatesToClip(point);
return [
(p1[0] / 2 + 0.5) * width,
(-p1[1] / 2 + 0.5) * height,
]
}
return t
}
cosmo = import("https://cdn.skypack.dev/@cosmograph/cosmos@1")
// "https://cosmograph.app/data/jan99jac040sc.csv"
data = [
// a very simplified graph
{source: 1, target: 2, w: 1},
{source: 2, target: 3, w: 1},
{source: 2, target: 4, w: 1},
{source: 3, target: 4, w: 1},
{source: 4, target: 1, w: 1},
{source: 4, target: 5, w: 1},
]
nodes = [...new Set(data.flatMap((d) => [d.source, d.target]))].map(id => ({id}))
links = data
mutable clicked = null
config = ({
backgroundColor: "#151515",
nodeSize: 1,
nodeColor: "#984040",
linkWidth: 0.1,
linkColor: "#8C8C8C",
linkArrows: false,
spaceSize: 200,
pixelRatio: 2,
simulation: {
linkDistance: 4,
linkSpring: 2,
repulsion: 0.1,
gravity: 0.1,
decay: 10000
},
events: {
onClick: (node) => (mutable clicked = node)
}
})
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.
