this iteration makes the code nice to work with
an example that loads the graph from existing static data, rather than generating a new graph from a function like many of the other examples do.
original example at https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/d3sampleTest.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>VivaGraphs test page</title>
<script src="vivagraph.js"></script>
<script src="d3-v4.13.0.min.js"></script>
<script src="vis.js" type='text/javascript'></script>
<style type='text/css'>
#graph1{
position: absolute;
vertical-align:middle;
width: 100%;
height: 100%;
}
#graph1 > svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body style='width:100%; height: 100%; position : absolute'>
<div style='width:100%; height:100%; position:absolute;'>
<div id='graph1' ></div>
</div>
</body>
</html>
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template{
"nodes": [
{ "name": "Myriel", "group": 1 },
{ "name": "Napoleon", "group": 1 },
{ "name": "Mlle.Baptistine", "group": 1 },
{ "name": "Mme.Magloire", "group": 1 },
{ "name": "CountessdeLo", "group": 1 },
{ "name": "Geborand", "group": 1 },
{ "name": "Champtercier", "group": 1 },
{ "name": "Cravatte", "group": 1 },
{ "name": "Count", "group": 1 },
{ "name": "OldMan", "group": 1 },
{ "name": "Labarre", "group": 2 },
{ "name": "Valjean", "group": 2 },
{ "name": "Marguerite", "group": 3 },
{ "name": "Mme.deR", "group": 2 },
{ "name": "Isabeau", "group": 2 },
{ "name": "Gervais", "group": 2 },
{ "name": "Tholomyes", "group": 3 },
{ "name": "Listolier", "group": 3 },
{ "name": "Fameuil", "group": 3 },
{ "name": "Blacheville", "group": 3 },
{ "name": "Favourite", "group": 3 },
{ "name": "Dahlia", "group": 3 },
{ "name": "Zephine", "group": 3 },
{ "name": "Fantine", "group": 3 },
{ "name": "Mme.Thenardier", "group": 4 },
{ "name": "Thenardier", "group": 4 },
{ "name": "Cosette", "group": 5 },
{ "name": "Javert", "group": 4 },
{ "name": "Fauchelevent", "group": 0 },
{ "name": "Bamatabois", "group": 2 },
{ "name": "Perpetue", "group": 3 },
{ "name": "Simplice", "group": 2 },
{ "name": "Scaufflaire", "group": 2 },
{ "name": "Woman1", "group": 2 },
{ "name": "Judge", "group": 2 },
{ "name": "Champmathieu", "group": 2 },
{ "name": "Brevet", "group": 2 },
{ "name": "Chenildieu", "group": 2 },
{ "name": "Cochepaille", "group": 2 },
{ "name": "Pontmercy", "group": 4 },
{ "name": "Boulatruelle", "group": 6 },
{ "name": "Eponine", "group": 4 },
{ "name": "Anzelma", "group": 4 },
{ "name": "Woman2", "group": 5 },
{ "name": "MotherInnocent", "group": 0 },
{ "name": "Gribier", "group": 0 },
{ "name": "Jondrette", "group": 7 },
{ "name": "Mme.Burgon", "group": 7 },
{ "name": "Gavroche", "group": 8 },
{ "name": "Gillenormand", "group": 5 },
{ "name": "Magnon", "group": 5 },
{ "name": "Mlle.Gillenormand", "group": 5 },
{ "name": "Mme.Pontmercy", "group": 5 },
{ "name": "Mlle.Vaubois", "group": 5 },
{ "name": "Lt.Gillenormand", "group": 5 },
{ "name": "Marius", "group": 8 },
{ "name": "BaronessT", "group": 5 },
{ "name": "Mabeuf", "group": 8 },
{ "name": "Enjolras", "group": 8 },
{ "name": "Combeferre", "group": 8 },
{ "name": "Prouvaire", "group": 8 },
{ "name": "Feuilly", "group": 8 },
{ "name": "Courfeyrac", "group": 8 },
{ "name": "Bahorel", "group": 8 },
{ "name": "Bossuet", "group": 8 },
{ "name": "Joly", "group": 8 },
{ "name": "Grantaire", "group": 8 },
{ "name": "MotherPlutarch", "group": 9 },
{ "name": "Gueulemer", "group": 4 },
{ "name": "Babet", "group": 4 },
{ "name": "Claquesous", "group": 4 },
{ "name": "Montparnasse", "group": 4 },
{ "name": "Toussaint", "group": 5 },
{ "name": "Child1", "group": 10 },
{ "name": "Child2", "group": 10 },
{ "name": "Brujon", "group": 4 },
{ "name": "Mme.Hucheloup", "group": 8 }
],
"links": [
{ "source": 1, "target": 0, "value": 1 },
{ "source": 2, "target": 0, "value": 8 },
{ "source": 3, "target": 0, "value": 10 },
{ "source": 3, "target": 2, "value": 6 },
{ "source": 4, "target": 0, "value": 1 },
{ "source": 5, "target": 0, "value": 1 },
{ "source": 6, "target": 0, "value": 1 },
{ "source": 7, "target": 0, "value": 1 },
{ "source": 8, "target": 0, "value": 2 },
{ "source": 9, "target": 0, "value": 1 },
{ "source": 11, "target": 10, "value": 1 },
{ "source": 11, "target": 3, "value": 3 },
{ "source": 11, "target": 2, "value": 3 },
{ "source": 11, "target": 0, "value": 5 },
{ "source": 12, "target": 11, "value": 1 },
{ "source": 13, "target": 11, "value": 1 },
{ "source": 14, "target": 11, "value": 1 },
{ "source": 15, "target": 11, "value": 1 },
{ "source": 17, "target": 16, "value": 4 },
{ "source": 18, "target": 16, "value": 4 },
{ "source": 18, "target": 17, "value": 4 },
{ "source": 19, "target": 16, "value": 4 },
{ "source": 19, "target": 17, "value": 4 },
{ "source": 19, "target": 18, "value": 4 },
{ "source": 20, "target": 16, "value": 3 },
{ "source": 20, "target": 17, "value": 3 },
{ "source": 20, "target": 18, "value": 3 },
{ "source": 20, "target": 19, "value": 4 },
{ "source": 21, "target": 16, "value": 3 },
{ "source": 21, "target": 17, "value": 3 },
{ "source": 21, "target": 18, "value": 3 },
{ "source": 21, "target": 19, "value": 3 },
{ "source": 21, "target": 20, "value": 5 },
{ "source": 22, "target": 16, "value": 3 },
{ "source": 22, "target": 17, "value": 3 },
{ "source": 22, "target": 18, "value": 3 },
{ "source": 22, "target": 19, "value": 3 },
{ "source": 22, "target": 20, "value": 4 },
{ "source": 22, "target": 21, "value": 4 },
{ "source": 23, "target": 16, "value": 3 },
{ "source": 23, "target": 17, "value": 3 },
{ "source": 23, "target": 18, "value": 3 },
{ "source": 23, "target": 19, "value": 3 },
{ "source": 23, "target": 20, "value": 4 },
{ "source": 23, "target": 21, "value": 4 },
{ "source": 23, "target": 22, "value": 4 },
{ "source": 23, "target": 12, "value": 2 },
{ "source": 23, "target": 11, "value": 9 },
{ "source": 24, "target": 23, "value": 2 },
{ "source": 24, "target": 11, "value": 7 },
{ "source": 25, "target": 24, "value": 13 },
{ "source": 25, "target": 23, "value": 1 },
{ "source": 25, "target": 11, "value": 12 },
{ "source": 26, "target": 24, "value": 4 },
{ "source": 26, "target": 11, "value": 31 },
{ "source": 26, "target": 16, "value": 1 },
{ "source": 26, "target": 25, "value": 1 },
{ "source": 27, "target": 11, "value": 17 },
{ "source": 27, "target": 23, "value": 5 },
{ "source": 27, "target": 25, "value": 5 },
{ "source": 27, "target": 24, "value": 1 },
{ "source": 27, "target": 26, "value": 1 },
{ "source": 28, "target": 11, "value": 8 },
{ "source": 28, "target": 27, "value": 1 },
{ "source": 29, "target": 23, "value": 1 },
{ "source": 29, "target": 27, "value": 1 },
{ "source": 29, "target": 11, "value": 2 },
{ "source": 30, "target": 23, "value": 1 },
{ "source": 31, "target": 30, "value": 2 },
{ "source": 31, "target": 11, "value": 3 },
{ "source": 31, "target": 23, "value": 2 },
{ "source": 31, "target": 27, "value": 1 },
{ "source": 32, "target": 11, "value": 1 },
{ "source": 33, "target": 11, "value": 2 },
{ "source": 33, "target": 27, "value": 1 },
{ "source": 34, "target": 11, "value": 3 },
{ "source": 34, "target": 29, "value": 2 },
{ "source": 35, "target": 11, "value": 3 },
{ "source": 35, "target": 34, "value": 3 },
{ "source": 35, "target": 29, "value": 2 },
{ "source": 36, "target": 34, "value": 2 },
{ "source": 36, "target": 35, "value": 2 },
{ "source": 36, "target": 11, "value": 2 },
{ "source": 36, "target": 29, "value": 1 },
{ "source": 37, "target": 34, "value": 2 },
{ "source": 37, "target": 35, "value": 2 },
{ "source": 37, "target": 36, "value": 2 },
{ "source": 37, "target": 11, "value": 2 },
{ "source": 37, "target": 29, "value": 1 },
{ "source": 38, "target": 34, "value": 2 },
{ "source": 38, "target": 35, "value": 2 },
{ "source": 38, "target": 36, "value": 2 },
{ "source": 38, "target": 37, "value": 2 },
{ "source": 38, "target": 11, "value": 2 },
{ "source": 38, "target": 29, "value": 1 },
{ "source": 39, "target": 25, "value": 1 },
{ "source": 40, "target": 25, "value": 1 },
{ "source": 41, "target": 24, "value": 2 },
{ "source": 41, "target": 25, "value": 3 },
{ "source": 42, "target": 41, "value": 2 },
{ "source": 42, "target": 25, "value": 2 },
{ "source": 42, "target": 24, "value": 1 },
{ "source": 43, "target": 11, "value": 3 },
{ "source": 43, "target": 26, "value": 1 },
{ "source": 43, "target": 27, "value": 1 },
{ "source": 44, "target": 28, "value": 3 },
{ "source": 44, "target": 11, "value": 1 },
{ "source": 45, "target": 28, "value": 2 },
{ "source": 47, "target": 46, "value": 1 },
{ "source": 48, "target": 47, "value": 2 },
{ "source": 48, "target": 25, "value": 1 },
{ "source": 48, "target": 27, "value": 1 },
{ "source": 48, "target": 11, "value": 1 },
{ "source": 49, "target": 26, "value": 3 },
{ "source": 49, "target": 11, "value": 2 },
{ "source": 50, "target": 49, "value": 1 },
{ "source": 50, "target": 24, "value": 1 },
{ "source": 51, "target": 49, "value": 9 },
{ "source": 51, "target": 26, "value": 2 },
{ "source": 51, "target": 11, "value": 2 },
{ "source": 52, "target": 51, "value": 1 },
{ "source": 52, "target": 39, "value": 1 },
{ "source": 53, "target": 51, "value": 1 },
{ "source": 54, "target": 51, "value": 2 },
{ "source": 54, "target": 49, "value": 1 },
{ "source": 54, "target": 26, "value": 1 },
{ "source": 55, "target": 51, "value": 6 },
{ "source": 55, "target": 49, "value": 12 },
{ "source": 55, "target": 39, "value": 1 },
{ "source": 55, "target": 54, "value": 1 },
{ "source": 55, "target": 26, "value": 21 },
{ "source": 55, "target": 11, "value": 19 },
{ "source": 55, "target": 16, "value": 1 },
{ "source": 55, "target": 25, "value": 2 },
{ "source": 55, "target": 41, "value": 5 },
{ "source": 55, "target": 48, "value": 4 },
{ "source": 56, "target": 49, "value": 1 },
{ "source": 56, "target": 55, "value": 1 },
{ "source": 57, "target": 55, "value": 1 },
{ "source": 57, "target": 41, "value": 1 },
{ "source": 57, "target": 48, "value": 1 },
{ "source": 58, "target": 55, "value": 7 },
{ "source": 58, "target": 48, "value": 7 },
{ "source": 58, "target": 27, "value": 6 },
{ "source": 58, "target": 57, "value": 1 },
{ "source": 58, "target": 11, "value": 4 },
{ "source": 59, "target": 58, "value": 15 },
{ "source": 59, "target": 55, "value": 5 },
{ "source": 59, "target": 48, "value": 6 },
{ "source": 59, "target": 57, "value": 2 },
{ "source": 60, "target": 48, "value": 1 },
{ "source": 60, "target": 58, "value": 4 },
{ "source": 60, "target": 59, "value": 2 },
{ "source": 61, "target": 48, "value": 2 },
{ "source": 61, "target": 58, "value": 6 },
{ "source": 61, "target": 60, "value": 2 },
{ "source": 61, "target": 59, "value": 5 },
{ "source": 61, "target": 57, "value": 1 },
{ "source": 61, "target": 55, "value": 1 },
{ "source": 62, "target": 55, "value": 9 },
{ "source": 62, "target": 58, "value": 17 },
{ "source": 62, "target": 59, "value": 13 },
{ "source": 62, "target": 48, "value": 7 },
{ "source": 62, "target": 57, "value": 2 },
{ "source": 62, "target": 41, "value": 1 },
{ "source": 62, "target": 61, "value": 6 },
{ "source": 62, "target": 60, "value": 3 },
{ "source": 63, "target": 59, "value": 5 },
{ "source": 63, "target": 48, "value": 5 },
{ "source": 63, "target": 62, "value": 6 },
{ "source": 63, "target": 57, "value": 2 },
{ "source": 63, "target": 58, "value": 4 },
{ "source": 63, "target": 61, "value": 3 },
{ "source": 63, "target": 60, "value": 2 },
{ "source": 63, "target": 55, "value": 1 },
{ "source": 64, "target": 55, "value": 5 },
{ "source": 64, "target": 62, "value": 12 },
{ "source": 64, "target": 48, "value": 5 },
{ "source": 64, "target": 63, "value": 4 },
{ "source": 64, "target": 58, "value": 10 },
{ "source": 64, "target": 61, "value": 6 },
{ "source": 64, "target": 60, "value": 2 },
{ "source": 64, "target": 59, "value": 9 },
{ "source": 64, "target": 57, "value": 1 },
{ "source": 64, "target": 11, "value": 1 },
{ "source": 65, "target": 63, "value": 5 },
{ "source": 65, "target": 64, "value": 7 },
{ "source": 65, "target": 48, "value": 3 },
{ "source": 65, "target": 62, "value": 5 },
{ "source": 65, "target": 58, "value": 5 },
{ "source": 65, "target": 61, "value": 5 },
{ "source": 65, "target": 60, "value": 2 },
{ "source": 65, "target": 59, "value": 5 },
{ "source": 65, "target": 57, "value": 1 },
{ "source": 65, "target": 55, "value": 2 },
{ "source": 66, "target": 64, "value": 3 },
{ "source": 66, "target": 58, "value": 3 },
{ "source": 66, "target": 59, "value": 1 },
{ "source": 66, "target": 62, "value": 2 },
{ "source": 66, "target": 65, "value": 2 },
{ "source": 66, "target": 48, "value": 1 },
{ "source": 66, "target": 63, "value": 1 },
{ "source": 66, "target": 61, "value": 1 },
{ "source": 66, "target": 60, "value": 1 },
{ "source": 67, "target": 57, "value": 3 },
{ "source": 68, "target": 25, "value": 5 },
{ "source": 68, "target": 11, "value": 1 },
{ "source": 68, "target": 24, "value": 1 },
{ "source": 68, "target": 27, "value": 1 },
{ "source": 68, "target": 48, "value": 1 },
{ "source": 68, "target": 41, "value": 1 },
{ "source": 69, "target": 25, "value": 6 },
{ "source": 69, "target": 68, "value": 6 },
{ "source": 69, "target": 11, "value": 1 },
{ "source": 69, "target": 24, "value": 1 },
{ "source": 69, "target": 27, "value": 2 },
{ "source": 69, "target": 48, "value": 1 },
{ "source": 69, "target": 41, "value": 1 },
{ "source": 70, "target": 25, "value": 4 },
{ "source": 70, "target": 69, "value": 4 },
{ "source": 70, "target": 68, "value": 4 },
{ "source": 70, "target": 11, "value": 1 },
{ "source": 70, "target": 24, "value": 1 },
{ "source": 70, "target": 27, "value": 1 },
{ "source": 70, "target": 41, "value": 1 },
{ "source": 70, "target": 58, "value": 1 },
{ "source": 71, "target": 27, "value": 1 },
{ "source": 71, "target": 69, "value": 2 },
{ "source": 71, "target": 68, "value": 2 },
{ "source": 71, "target": 70, "value": 2 },
{ "source": 71, "target": 11, "value": 1 },
{ "source": 71, "target": 48, "value": 1 },
{ "source": 71, "target": 41, "value": 1 },
{ "source": 71, "target": 25, "value": 1 },
{ "source": 72, "target": 26, "value": 2 },
{ "source": 72, "target": 27, "value": 1 },
{ "source": 72, "target": 11, "value": 1 },
{ "source": 73, "target": 48, "value": 2 },
{ "source": 74, "target": 48, "value": 2 },
{ "source": 74, "target": 73, "value": 3 },
{ "source": 75, "target": 69, "value": 3 },
{ "source": 75, "target": 68, "value": 3 },
{ "source": 75, "target": 25, "value": 3 },
{ "source": 75, "target": 48, "value": 1 },
{ "source": 75, "target": 41, "value": 1 },
{ "source": 75, "target": 70, "value": 1 },
{ "source": 75, "target": 71, "value": 1 },
{ "source": 76, "target": 64, "value": 1 },
{ "source": 76, "target": 65, "value": 1 },
{ "source": 76, "target": 66, "value": 1 },
{ "source": 76, "target": 63, "value": 1 },
{ "source": 76, "target": 62, "value": 1 },
{ "source": 76, "target": 48, "value": 1 },
{ "source": 76, "target": 58, "value": 1 }
]
}
/* global Viva */
d3.json('miserables.json', (error, data) => {
draw(error, data)
})
function draw(error, data) {
if (error) console.error(error)
const populateGraphFromStaticData = () => {
const g = Viva.Graph.graph();
g.Name = 'Sample graph from d3 library'
for (var i = 0; i < data.nodes.length; ++i) {
g.addNode(i, data.nodes[i])
}
for (i = 0; i < data.links.length; ++i) {
const link = data.links[i];
g.addLink(link.source, link.target, link.value)
}
return g
};
const colors = [
'#1f77b4',
'#aec7e8',
'#ff7f0e',
'#ffbb78',
'#2ca02c',
'#98df8a',
'#d62728',
'#ff9896',
'#9467bd',
'#c5b0d5',
'#8c564b',
'#c49c94',
'#e377c2',
'#f7b6d2',
'#7f7f7f',
'#c7c7c7',
'#bcbd22',
'#dbdb8d',
'#17becf',
'#9edae5'
];
const example = ((() => {
const graph = populateGraphFromStaticData();
const layout = Viva.Graph.Layout.forceDirected(graph, {
springLength: 35,
springCoeff: 0.00055,
dragCoeff: 0.09,
gravity: -1
});
const svgGraphics = Viva.Graph.View.svgGraphics();
svgGraphics
.node(node => {
const groupId = node.data.group;
const circle = Viva.Graph.svg('circle')
.attr('r', 7)
.attr('stroke', '#fff')
.attr('stroke-width', '1.5px')
.attr('fill', colors[groupId ? groupId - 1 : 5]);
circle.append('title').text(node.data.name)
return circle
})
.placeNode((nodeUI, pos) => {
nodeUI.attr('cx', pos.x).attr('cy', pos.y)
})
svgGraphics.link(link => Viva.Graph.svg('line')
.attr('stroke', '#999')
.attr('stroke-width', Math.sqrt(link.data)))
const renderer = Viva.Graph.View.renderer(graph, {
container: document.getElementById('graph1'),
layout,
graphics: svgGraphics,
prerender: 20,
renderLinks: true
});
renderer.run(500)
}))();
}