import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
from jyquickhelper import add_notebook_menu
add_notebook_menu()
from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 3, to: 3}
]);
// create a network
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var container = document.getElementById('__ID__');
var network = new vis.Network(container, data, options);
"""
jr = RenderJS(script, css=css, libs=libs)
jr
print(jr._repr_html_())
<div id="M7af9233382d24ed8a6cd651528741792-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis.min.css" type="text/css" /><div id="M7af9233382d24ed8a6cd651528741792" style="width:100%;height:100%;"></div></div> <script> require.config({ paths:{ 'vis':'http://www.xavierdupre.fr/js/visjs/vis.min', }, }); require(['vis'], function(vis) { var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3} ]); // create a network var data = { nodes: nodes, edges: edges }; var options = {}; var container = document.getElementById('M7af9233382d24ed8a6cd651528741792'); var network = new vis.Network(container, data, options); }); </script>
from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis-network.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'},
{from: 2, to: 9, value: 5, title: '5 emails per week'},
{from: 2, to: 10,value: 1, title: '1 emails per week'},
{from: 4, to: 6, value: 8, title: '8 emails per week'},
{from: 5, to: 7, value: 2, title: '2 emails per week'},
{from: 4, to: 5, value: 1, title: '1 emails per week'},
{from: 9, to: 10,value: 2, title: '2 emails per week'},
{from: 2, to: 3, value: 6, title: '6 emails per week'},
{from: 3, to: 9, value: 4, title: '4 emails per week'},
{from: 5, to: 3, value: 1, title: '1 emails per week'},
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our network object.
var container = document.getElementById('__ID__');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
scaling:{
label: {
min:8,
max:20
}
}
}
};
network = new vis.Network(container, data, options);
}
draw();
"""
jr = RenderJS(script, css=css, libs=libs, style="width: 400px; height: 400px; border: 1px solid lightgray;")
jr
print(jr._repr_html_())
<div id="M0cf52fbdc869438793c3b342839b5c7a-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis-network.min.css" type="text/css" /><div id="M0cf52fbdc869438793c3b342839b5c7a" style="width: 400px; height: 400px; border: 1px solid lightgray;"></div></div> <script> require.config({ paths:{ 'vis':'http://www.xavierdupre.fr/js/visjs/vis.min', }, }); require(['vis'], function(vis) { var nodes = null; var edges = null; var network = null; function draw() { // create people. // value corresponds with the age of the person nodes = [ {id: 1, value: 2, label: 'Algie' }, {id: 2, value: 31, label: 'Alston'}, {id: 3, value: 12, label: 'Barney'}, {id: 4, value: 16, label: 'Coley' }, {id: 5, value: 17, label: 'Grant' }, {id: 6, value: 15, label: 'Langdon'}, {id: 7, value: 6, label: 'Lee'}, {id: 8, value: 5, label: 'Merlin'}, {id: 9, value: 30, label: 'Mick'}, {id: 10, value: 18, label: 'Tod'}, ]; // create connections between people // value corresponds with the amount of contact between two people edges = [ {from: 2, to: 8, value: 3, title: '3 emails per week'}, {from: 2, to: 9, value: 5, title: '5 emails per week'}, {from: 2, to: 10,value: 1, title: '1 emails per week'}, {from: 4, to: 6, value: 8, title: '8 emails per week'}, {from: 5, to: 7, value: 2, title: '2 emails per week'}, {from: 4, to: 5, value: 1, title: '1 emails per week'}, {from: 9, to: 10,value: 2, title: '2 emails per week'}, {from: 2, to: 3, value: 6, title: '6 emails per week'}, {from: 3, to: 9, value: 4, title: '4 emails per week'}, {from: 5, to: 3, value: 1, title: '1 emails per week'}, {from: 2, to: 7, value: 4, title: '4 emails per week'} ]; // Instantiate our network object. var container = document.getElementById('M0cf52fbdc869438793c3b342839b5c7a'); var data = { nodes: nodes, edges: edges }; var options = { nodes: { shape: 'dot', scaling:{ label: { min:8, max:20 } } } }; network = new vis.Network(container, data, options); } draw(); }); </script>
from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var DOTstring = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('__ID__');
var network = new vis.Network(container, parsedData, parsedData.options);
"""
jr = RenderJS(script, css=css, libs=libs)
jr
from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var DOTstring = 'digraph { d[label="longer label"]; a -> b -> c; b -> d; }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('__ID__');
var network = new vis.Network(container, parsedData, parsedData.options);
"""
jr = RenderJS(script, css=css, libs=libs)
jr
print(jr._repr_html_())
<div id="Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis.min.css" type="text/css" /><div id="Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab" style="width:100%;height:100%;"></div></div> <script> require.config({ paths:{ 'vis':'http://www.xavierdupre.fr/js/visjs/vis.min', }, }); require(['vis'], function(vis) { var DOTstring = 'digraph { d[label="longer label"]; a -> b -> c; b -> d; }'; var parsedData = vis.network.convertDot(DOTstring); var container = document.getElementById('Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab'); var network = new vis.Network(container, parsedData, parsedData.options); }); </script>
from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var DOTstring = 'digraph { d[label="longer label"]; a -> b -> c; b -> d; }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('__ID__');
var options = parsedData.options;
var options = {
layout: {
hierarchical: {
direction: "UD",
sortMethod: "directed"
}
}
};
var network = new vis.Network(container, parsedData, options);
"""
jr = RenderJS(script, css=css, libs=libs, height="200px")
jr