Notebooks 2.0 is here.
Published
Edited
Apr 1, 2021
md`# Viewport Bug`
container = html`<div/>`
{
const layoutOptions = {
nodeStrength: -500,
}
const renderOptions = {
width: width,
height: 600,
x: 100,
y: 0,
zoom: 1,
onViewportDrag: ({ viewportX, viewportY }) => {
renderOptions.x = viewportX
renderOptions.y = viewportY
render({ nodes, edges, options: renderOptions })
},
onNodeDoubleClick: ({ target }) => {
renderOptions.x = -target.x
renderOptions.y = -target.y
console.log(target, nodes, renderOptions)
render({ nodes, edges, options: renderOptions })
},
}
render({ nodes, edges, options: renderOptions })
}
render = {
const render = Graph.renderers.WebGL.Renderer({ container })
invalidation.then(() => render.delete())
return render
}
nodes = {
return [
{ id: 'a', x: 0, y: 0 },
{ id: 'b', x: 0, y: 100 },
{ id: 'c', x: 0, y: 200 },
{ id: 'd', x: 0, y: -100 },
{ id: 'e', x: 0, y: -200 },
{ id: 'f', x: 100, y: 0 },
{ id: 'g', x: 200, y: 0 },
{ id: 'h', x: -100, y: 0 },
{ id: 'i', x: -200, y: 0 },
{ id: 'j', x: 100, y: 100 },
{ id: 'k', x: -100, y: 100 },
{ id: 'l', x: 100, y: -100 },
{ id: 'm', x: -100, y: -100 },
].map((node) => ({
...node,
radius: 4,
label: `${node.x},${node.y}`,
style: {
color: '#000',
//stroke: [{ width: 2, color: '#000' }],
//icon: { type: 'textIcon', family: 'Helvetica', text: `${node.x},${node.y}`, color: '#000', size: 8 },
}
}))
}
edges = {
return [
// { id: 'ba', source: 'a', target: 'b', label: 'AB' },
// { id: 'ca', source: 'a', target: 'c', label: 'CA' },
// { id: 'ca2', source: 'a', target: 'c', label: 'CA2' },
]
}
Graph = require('@sayari/trellis@0.3.0-rc.6/index.umd.min.js')
font = html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
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.
