container = html`<div/>`
layout({ nodes: nodes, edges: edges }).then(({ nodes, edges }) => {
const { x, y, zoom } = trellis.boundsToViewport(
trellis.getSelectionBounds(nodes, 40),
{ width: width, height: 600 }
)
const options = {
x,
y,
zoom,
width: width,
height: 600,
onNodeDrag: ({ nodeX: x, nodeY: y, target: { id } }) => {
nodes = nodes.map((node) => node.id === id ? { ...node, x, y } : node)
render({ nodes, edges, options })
},
onNodePointerEnter: ({ target }) => {
nodes = nodes.map((node) => target.id === node.id ? {
...node,
style: {
...node.style,
stroke: [...node.style.stroke, { color: '#ccc', width: 2 }]
}
} : node)
render({ nodes, edges, options })
},
onNodePointerLeave: ({ target }) => {
nodes = nodes.map((n) => target.id === n.id ? ({ ...n, style: styleNode(n.count) }) : n)
render({ nodes, edges, options })
}
}
render({ nodes, edges, options })
})
render = {
const render = trellis.renderers.WebGL.Renderer({ container })
invalidation.then(() => render.delete())
return render
}
layout = trellis.layout.Force.Layout()
NODE_PERSON_STYLE = {
return {
color: '#7CBBF3',
labelSize: 10,
labelWordWrap: 260,
stroke: [{ color: '#FFF', width: 2 }, { color: '#90D7FB', width: 1 }],
icon: { type: 'textIcon', family: 'Material Icons', text: 'person', color: '#fff', size: 21 },
badge: [{
position: 45,
color: '#7CBBF3',
stroke: '#FFF',
icon: {
type: 'textIcon',
family: 'Helvetica',
size: 10,
color: '#FFF',
text: '8',
}
}],
}
}
styleNode = (group) => ({
color: color(group),
labelSize: 10,
labelWordWrap: 260,
stroke: [{ color: '#FFF', width: 2 }, { color: color(group), width: 1 }],
icon: { type: 'textIcon', family: 'Material Icons', text: 'person', color: '#fff', size: 21 },
badge: [{
position: 45,
color: color(group),
stroke: '#FFF',
icon: {
type: 'textIcon',
family: 'Helvetica',
size: 10,
color: '#FFF',
text: '8',
}
}],
})
NODE_COMPANY_STYLE = {
return {
color: '#FFAF1D',
stroke: [{ color: '#FFF', width: 4 }, { color: '#F7CA4D' }],
icon: { type: 'textIcon', family: 'Material Icons', text: 'business', color: '#fff', size: 21 },
badge: [{
position: 45,
color: '#FFAF1D',
stroke: '#FFF',
icon: {
type: 'textIcon',
family: 'Helvetica',
size: 10,
color: '#FFF',
text: '15',
}
}, {
position: 135,
color: '#E4171B',
stroke: '#FFF',
icon: {
type: 'textIcon',
family: 'Helvetica',
size: 10,
color: '#FFF',
text: '!',
}
}],
}
}
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.
