vega-network.py

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))

import panel as pn
from vega import Vega, VegaLite
pn.extension('vega')

spec = {
    '$schema': 'https://vega.github.io/schema/vega/v5.json',
    'width': 300,
    'height': 300,
    'padding': 0,
    'autosize': 'none',
    'signals': [
        {'name': 'cx', 'update': 'width / 2'},
        {'name': 'cy', 'update': 'height / 2'},
        {
            'description': 'State variable for active node dragged status.',
            'name': 'dragged',
            'value': 0,
            'on': [{'events': 'symbol:mouseout[!event.buttons], window:mouseup',
            'update': '0'},
        {
            'events': 'symbol:mouseover',
            'update': 'dragged || 1'
        },
        {
            'events': '[symbol:mousedown, window:mouseup] > window:mousemove!',
            'update': '2',
            'force': True}]},
        {
            'description': 'Graph node most recently interacted with.',
            'name': 'dragged_node',
            'value': None,
            'on': [
                {
                    'events': 'symbol:mouseover',
                    'update': 'dragged === 1 ? item() : dragged_node'
                }
            ]
        },
        {
            'description': 'Flag to restart Force simulation upon data changes.',
            'name': 'restart',
            'value': False,
            'on': [
                {
                    'events': {'signal': 'dragged'},
                    'update': 'dragged > 1'
                }
            ]
        },
        {'name': 'freeze', 'bind': {'input': 'checkbox'}, 'value': True},
        {
            'name': 'nbody-strength',
            'bind': {'input': 'range', 'min': -20, 'max': 3, 'step': 1},
            'value': -1
        },
        {
            'name': 'collide-radius',
            'bind': {'input': 'range', 'min': 0, 'max': 5, 'step': 0.2},
            'value': 3
        },
        {
            'name': 'link-distance',
            'bind': {'input': 'range', 'min': 5, 'max': 50, 'step': 1},
            'value': 20
        }
    ],
    'data': [
        {
            'name': 'node-data',
            'values': [{'id': 1, 'category': 1}, {'id': 1, 'category': 1}]
        },
        {
            'name': 'link-data',
            'values': [{'source': 0, 'target': 1}]
        }
    ],
    'scales': [
        {
            'name': 'colourScale',
            'type': 'ordinal',
            'domain': {'data': 'node-data', 'field': 'community'},
            'range': {'scheme': 'category10'}
        }
    ],
    'marks': [
        {
            'name': 'nodes',
            'type': 'symbol',
            'zindex': 1,
            'from': {'data': 'node-data'},
            'on': [
                {
                    'trigger': 'dragged',
                    'modify': 'dragged_node',
                    'values': 'dragged === 1 ? {fx:dragged_node.x, fy:dragged_node.y} : {fx:x(), fy:y()}'
                },
                {
                    'trigger': '!dragged',
                    'modify': 'dragged_node',
                    'values': '{fx: null, fy: null}'
                }
            ],
            'encode': {
                'enter': {
                    'fill': {'field': 'community', 'scale': 'colourScale'},
                    'fillOpacity': {'value': 0.5},
                    'stroke': {'field': 'community', 'scale': 'colourScale'},
                    'size': {'value': 50},
                    'tooltip': {'field': 'first_diagnosis'}
                },
                'update': {
                    'cursor': {'value': 'pointer'}
                }
            },
            'transform': [
                {
                    'type': 'force',
                    'iterations': 300,
                    'velocityDecay': 0.4,
                    'restart': {'signal': 'restart'},
                    'static': {'signal': 'freeze'},
                    'forces': [
                        {'force': 'center', 'x': {'signal': 'cx'}, 'y': {'signal': 'cy'}},
                        {'force': 'collide', 'radius': {'signal': 'collide-radius'}},
                        {'force': 'nbody', 'strength': {'signal': 'nbody-strength'}},
                        {'force': 'link','links': 'link-data','distance': {'signal': 'link-distance'}}
                    ]
                }
            ]
        },
        {
            'type': 'path',
            'from': {'data': 'link-data'},
            'interactive': False,
            'encode': {
                'update': {
                    'stroke': {'value': 'lightgrey'}
                }
            },
            'transform': [
                {
                    'type': 'linkpath',
                    'shape': 'line',
                    'sourceX': 'datum.source.x',
                    'sourceY': 'datum.source.y',
                    'targetX': 'datum.target.x',
                    'targetY': 'datum.target.y'
                }
            ]
        }
    ]
}

pn.pane.Vega(spec)