{
let hierarchyData = layout('jeff.skilling@enron.com', { nodes: nodes, edges: edges })
const { x, y, zoom } = trellis.boundsToViewport(
trellis.getSelectionBounds(hierarchyData.nodes, 40),
{ width: width, height: 600 }
)
const options = {
x,
y,
zoom,
width: width,
height: 600,
onNodePointerUp: ({ target: { id } }) => {
hierarchyData = layout(id, { nodes: nodes, edges: edges })
render({ nodes: hierarchyData.nodes, edges: hierarchyData.edges, options })
}
}
render({ nodes: hierarchyData.nodes, edges: hierarchyData.edges, options })
}
render = {
const render = trellis.renderers.WebGL.Renderer({ container })
invalidation.then(() => render.delete())
return render
}
layout = trellis.layout.Hierarchy.Layout()
color = {
const categoricalScale = scale.scaleOrdinal(chromatic.schemeTableau10)
return (x) => categoricalScale(Math.min(10, x))
}
styleNode = (count) => ({
color: color(count),
labelSize: 10,
labelWordWrap: 260,
stroke: [{ color: '#FFF', width: 2 }, { color: color(count), width: 1 }],
icon: { type: 'textIcon', family: 'Material Icons', text: 'person', color: '#fff', size: 21 },
badge: [{
position: 45,
color: color(count),
stroke: '#FFF',
icon: {
type: 'textIcon',
family: 'Helvetica',
size: 10,
color: '#FFF',
text: count,
}
}],
})
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.
