Published
Edited
Jul 29, 2021
1 fork
5 stars
visualise = async container => {
const visualiser = await new VisNetwork.Visualiser(container, {
data,
options
}).build();
container.replaceChildren(visualiser.element);
return visualiser;
}
data = ({
edges: [
{
arrowStrikethrough: false,
arrows: { to: { enabled: true, type: 'arrow' } },
color: 'green',
from: '1H',
label: '3',
length: 75,
to: 1,
value: 3
},
{
arrowStrikethrough: false,
arrows: { to: { enabled: true, type: 'arrow' } },
color: 'orange',
from: 1,
label: '4',
length: 75,
to: '1T',
value: 4
},
{
arrowStrikethrough: false,
arrows: { to: { enabled: true, type: 'arrow' } },
color: 'green',
from: '3H',
label: '3',
length: 75,
to: 3,
value: 3
},
{
arrowStrikethrough: false,
arrows: { to: { enabled: true, type: 'arrow' } },
color: 'orange',
from: 3,
label: '4',
length: 75,
to: '3T',
value: 4
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 1,
label: '1',
to: 2,
value: 1
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 2,
label: '2',
to: 1,
value: 2
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 2,
label: '3',
to: 3,
value: 3
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 3,
label: '4',
to: 4,
value: 4
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 4,
label: '5',
to: 2,
value: 5
},
{ color: 'brown', from: 4, label: '5', to: 4, value: 5 },
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 4,
label: '6',
to: 5,
value: 6
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 5,
label: '7',
to: 4,
value: 7
},
{
arrows: { middle: { enabled: true, type: 'arrow' } },
from: 5,
label: '4',
to: 6,
value: 4
}
],
nodes: [
{ fixed: true, id: 1, label: 'New York', value: 20 },
{ color: 'transparent', id: '1H', label: null, value: 0 },
{ color: 'transparent', id: '1T', label: null, value: 0 },
{ id: 2, label: 'Paris', margin: 10, value: 30 },
{ id: 3, label: 'Frankfurt', value: 40 },
{ color: 'transparent', id: '3H', label: null, value: 0 },
{ color: 'transparent', id: '3T', label: null, value: 0 },
{ id: 4, label: 'London 2', value: 20 },
{ id: 5, label: 'London 1', value: 60 },
{ id: 6, label: 'Madrid', value: 10 }
]
})
options = ({
interaction: { navigationButtons: true, zoomView: false },
nodes: {
scaling: { label: { max: 20, min: 8 }, max: 50, min: 5 },
shape: 'circle'
},
physics: {
barnesHut: { springLength: 250 },
enabled: true,
forceAtlas2Based: { springLength: 250 },
repulsion: { springLength: 250 },
solver: 'repulsion',
wind: { x: 0.5, y: 0 }
}
})
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.
