That visualization is a remake of the well-known force-directed graph created by Mike Bostock showing character co-occurrence in Les Misérables. This visualization shows how it is possible to organize a graph into an hexagonal structure. This kind of structure is particularly interesting with high-connected networks that appear as spaghetti nebula. The meaning of the link decreases, while the position is more relevant. Space employed is less applying a gravity force to all nodes through charge, while nodes' distance is preserved by using collision. That allows to avoid any kind of overlapping among nodes and makes the distances among nodes uniform. That uniformity might be successively exploited by situating between nodes, for instance, keywords that help to characterize the space that usually is not employed. This application is used within my PhD thesis Affinity Map.
-
-
Save rodighiero/c4502b8229e181d365f0f6d6637872e8 to your computer and use it in GitHub Desktop.
Hexagonal force-directed graph
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 500 | |
| border: no |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset='utf-8'> | |
| <style> | |
| line { stroke: #999; } | |
| circle { stroke: #fff; stroke-width: 1.5px; } | |
| </style> | |
| <svg width='960' height='500'></svg> | |
| <script src='https://d3js.org/d3.v4.min.js'></script> | |
| <script> | |
| var svg = d3.select('svg'), | |
| width = +svg.attr('width'), | |
| height = +svg.attr('height') | |
| var color = d3.scaleOrdinal(d3.schemeCategory20) | |
| var simulation = d3.forceSimulation() | |
| .force('link', d3.forceLink().id(d => d.id)) | |
| .force('charge', d3.forceManyBody().strength(100)) // Gravity force | |
| .force('collide', d3.forceCollide().radius(25).iterations(3)) // Repulsion force | |
| .force('center', d3.forceCenter(width / 2, height / 2)) // Position force | |
| d3.json('miserables.json', function(error, graph) { | |
| if (error) throw error | |
| var link = svg.append('g') | |
| .selectAll('line') | |
| .data(graph.links) | |
| .enter().append('line') | |
| .attr( 'stroke-width', d => d.value * .08 ) | |
| var node = svg.append('g') | |
| .selectAll('circle') | |
| .data(graph.nodes) | |
| .enter().append('circle') | |
| .attr('r', 5) | |
| .attr( 'fill', d => color(d.group) ) | |
| .call(d3.drag() | |
| .on('start', dragstarted) | |
| .on('drag', dragged) | |
| .on('end', dragended)) | |
| simulation | |
| .nodes(graph.nodes) | |
| .on('tick', ticked) | |
| simulation.force('link') | |
| .links(graph.links) | |
| function ticked() { | |
| link | |
| .attr( 'x1', d => d.source.x ) | |
| .attr( 'y1', d => d.source.y ) | |
| .attr( 'x2', d => d.target.x ) | |
| .attr( 'y2', d => d.target.y ) | |
| node | |
| .attr( 'cx', d => d.x ) | |
| .attr( 'cy', d => d.y ) | |
| } | |
| }) | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.1).restart() | |
| d.fx = d.x | |
| d.fy = d.y | |
| } | |
| function dragged(d) { | |
| d.fx = d3.event.x | |
| d.fy = d3.event.y | |
| } | |
| function dragended(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0) | |
| d.fx = null | |
| d.fy = null | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nodes": [ | |
| {"id": "Myriel", "group": 1}, | |
| {"id": "Napoleon", "group": 1}, | |
| {"id": "Mlle.Baptistine", "group": 1}, | |
| {"id": "Mme.Magloire", "group": 1}, | |
| {"id": "CountessdeLo", "group": 1}, | |
| {"id": "Geborand", "group": 1}, | |
| {"id": "Champtercier", "group": 1}, | |
| {"id": "Cravatte", "group": 1}, | |
| {"id": "Count", "group": 1}, | |
| {"id": "OldMan", "group": 1}, | |
| {"id": "Labarre", "group": 2}, | |
| {"id": "Valjean", "group": 2}, | |
| {"id": "Marguerite", "group": 3}, | |
| {"id": "Mme.deR", "group": 2}, | |
| {"id": "Isabeau", "group": 2}, | |
| {"id": "Gervais", "group": 2}, | |
| {"id": "Tholomyes", "group": 3}, | |
| {"id": "Listolier", "group": 3}, | |
| {"id": "Fameuil", "group": 3}, | |
| {"id": "Blacheville", "group": 3}, | |
| {"id": "Favourite", "group": 3}, | |
| {"id": "Dahlia", "group": 3}, | |
| {"id": "Zephine", "group": 3}, | |
| {"id": "Fantine", "group": 3}, | |
| {"id": "Mme.Thenardier", "group": 4}, | |
| {"id": "Thenardier", "group": 4}, | |
| {"id": "Cosette", "group": 5}, | |
| {"id": "Javert", "group": 4}, | |
| {"id": "Fauchelevent", "group": 0}, | |
| {"id": "Bamatabois", "group": 2}, | |
| {"id": "Perpetue", "group": 3}, | |
| {"id": "Simplice", "group": 2}, | |
| {"id": "Scaufflaire", "group": 2}, | |
| {"id": "Woman1", "group": 2}, | |
| {"id": "Judge", "group": 2}, | |
| {"id": "Champmathieu", "group": 2}, | |
| {"id": "Brevet", "group": 2}, | |
| {"id": "Chenildieu", "group": 2}, | |
| {"id": "Cochepaille", "group": 2}, | |
| {"id": "Pontmercy", "group": 4}, | |
| {"id": "Boulatruelle", "group": 6}, | |
| {"id": "Eponine", "group": 4}, | |
| {"id": "Anzelma", "group": 4}, | |
| {"id": "Woman2", "group": 5}, | |
| {"id": "MotherInnocent", "group": 0}, | |
| {"id": "Gribier", "group": 0}, | |
| {"id": "Jondrette", "group": 7}, | |
| {"id": "Mme.Burgon", "group": 7}, | |
| {"id": "Gavroche", "group": 8}, | |
| {"id": "Gillenormand", "group": 5}, | |
| {"id": "Magnon", "group": 5}, | |
| {"id": "Mlle.Gillenormand", "group": 5}, | |
| {"id": "Mme.Pontmercy", "group": 5}, | |
| {"id": "Mlle.Vaubois", "group": 5}, | |
| {"id": "Lt.Gillenormand", "group": 5}, | |
| {"id": "Marius", "group": 8}, | |
| {"id": "BaronessT", "group": 5}, | |
| {"id": "Mabeuf", "group": 8}, | |
| {"id": "Enjolras", "group": 8}, | |
| {"id": "Combeferre", "group": 8}, | |
| {"id": "Prouvaire", "group": 8}, | |
| {"id": "Feuilly", "group": 8}, | |
| {"id": "Courfeyrac", "group": 8}, | |
| {"id": "Bahorel", "group": 8}, | |
| {"id": "Bossuet", "group": 8}, | |
| {"id": "Joly", "group": 8}, | |
| {"id": "Grantaire", "group": 8}, | |
| {"id": "MotherPlutarch", "group": 9}, | |
| {"id": "Gueulemer", "group": 4}, | |
| {"id": "Babet", "group": 4}, | |
| {"id": "Claquesous", "group": 4}, | |
| {"id": "Montparnasse", "group": 4}, | |
| {"id": "Toussaint", "group": 5}, | |
| {"id": "Child1", "group": 10}, | |
| {"id": "Child2", "group": 10}, | |
| {"id": "Brujon", "group": 4}, | |
| {"id": "Mme.Hucheloup", "group": 8} | |
| ], | |
| "links": [ | |
| {"source": "Napoleon", "target": "Myriel", "value": 1}, | |
| {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}, | |
| {"source": "Mme.Magloire", "target": "Myriel", "value": 10}, | |
| {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6}, | |
| {"source": "CountessdeLo", "target": "Myriel", "value": 1}, | |
| {"source": "Geborand", "target": "Myriel", "value": 1}, | |
| {"source": "Champtercier", "target": "Myriel", "value": 1}, | |
| {"source": "Cravatte", "target": "Myriel", "value": 1}, | |
| {"source": "Count", "target": "Myriel", "value": 2}, | |
| {"source": "OldMan", "target": "Myriel", "value": 1}, | |
| {"source": "Valjean", "target": "Labarre", "value": 1}, | |
| {"source": "Valjean", "target": "Mme.Magloire", "value": 3}, | |
| {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3}, | |
| {"source": "Valjean", "target": "Myriel", "value": 5}, | |
| {"source": "Marguerite", "target": "Valjean", "value": 1}, | |
| {"source": "Mme.deR", "target": "Valjean", "value": 1}, | |
| {"source": "Isabeau", "target": "Valjean", "value": 1}, | |
| {"source": "Gervais", "target": "Valjean", "value": 1}, | |
| {"source": "Listolier", "target": "Tholomyes", "value": 4}, | |
| {"source": "Fameuil", "target": "Tholomyes", "value": 4}, | |
| {"source": "Fameuil", "target": "Listolier", "value": 4}, | |
| {"source": "Blacheville", "target": "Tholomyes", "value": 4}, | |
| {"source": "Blacheville", "target": "Listolier", "value": 4}, | |
| {"source": "Blacheville", "target": "Fameuil", "value": 4}, | |
| {"source": "Favourite", "target": "Tholomyes", "value": 3}, | |
| {"source": "Favourite", "target": "Listolier", "value": 3}, | |
| {"source": "Favourite", "target": "Fameuil", "value": 3}, | |
| {"source": "Favourite", "target": "Blacheville", "value": 4}, | |
| {"source": "Dahlia", "target": "Tholomyes", "value": 3}, | |
| {"source": "Dahlia", "target": "Listolier", "value": 3}, | |
| {"source": "Dahlia", "target": "Fameuil", "value": 3}, | |
| {"source": "Dahlia", "target": "Blacheville", "value": 3}, | |
| {"source": "Dahlia", "target": "Favourite", "value": 5}, | |
| {"source": "Zephine", "target": "Tholomyes", "value": 3}, | |
| {"source": "Zephine", "target": "Listolier", "value": 3}, | |
| {"source": "Zephine", "target": "Fameuil", "value": 3}, | |
| {"source": "Zephine", "target": "Blacheville", "value": 3}, | |
| {"source": "Zephine", "target": "Favourite", "value": 4}, | |
| {"source": "Zephine", "target": "Dahlia", "value": 4}, | |
| {"source": "Fantine", "target": "Tholomyes", "value": 3}, | |
| {"source": "Fantine", "target": "Listolier", "value": 3}, | |
| {"source": "Fantine", "target": "Fameuil", "value": 3}, | |
| {"source": "Fantine", "target": "Blacheville", "value": 3}, | |
| {"source": "Fantine", "target": "Favourite", "value": 4}, | |
| {"source": "Fantine", "target": "Dahlia", "value": 4}, | |
| {"source": "Fantine", "target": "Zephine", "value": 4}, | |
| {"source": "Fantine", "target": "Marguerite", "value": 2}, | |
| {"source": "Fantine", "target": "Valjean", "value": 9}, | |
| {"source": "Mme.Thenardier", "target": "Fantine", "value": 2}, | |
| {"source": "Mme.Thenardier", "target": "Valjean", "value": 7}, | |
| {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13}, | |
| {"source": "Thenardier", "target": "Fantine", "value": 1}, | |
| {"source": "Thenardier", "target": "Valjean", "value": 12}, | |
| {"source": "Cosette", "target": "Mme.Thenardier", "value": 4}, | |
| {"source": "Cosette", "target": "Valjean", "value": 31}, | |
| {"source": "Cosette", "target": "Tholomyes", "value": 1}, | |
| {"source": "Cosette", "target": "Thenardier", "value": 1}, | |
| {"source": "Javert", "target": "Valjean", "value": 17}, | |
| {"source": "Javert", "target": "Fantine", "value": 5}, | |
| {"source": "Javert", "target": "Thenardier", "value": 5}, | |
| {"source": "Javert", "target": "Mme.Thenardier", "value": 1}, | |
| {"source": "Javert", "target": "Cosette", "value": 1}, | |
| {"source": "Fauchelevent", "target": "Valjean", "value": 8}, | |
| {"source": "Fauchelevent", "target": "Javert", "value": 1}, | |
| {"source": "Bamatabois", "target": "Fantine", "value": 1}, | |
| {"source": "Bamatabois", "target": "Javert", "value": 1}, | |
| {"source": "Bamatabois", "target": "Valjean", "value": 2}, | |
| {"source": "Perpetue", "target": "Fantine", "value": 1}, | |
| {"source": "Simplice", "target": "Perpetue", "value": 2}, | |
| {"source": "Simplice", "target": "Valjean", "value": 3}, | |
| {"source": "Simplice", "target": "Fantine", "value": 2}, | |
| {"source": "Simplice", "target": "Javert", "value": 1}, | |
| {"source": "Scaufflaire", "target": "Valjean", "value": 1}, | |
| {"source": "Woman1", "target": "Valjean", "value": 2}, | |
| {"source": "Woman1", "target": "Javert", "value": 1}, | |
| {"source": "Judge", "target": "Valjean", "value": 3}, | |
| {"source": "Judge", "target": "Bamatabois", "value": 2}, | |
| {"source": "Champmathieu", "target": "Valjean", "value": 3}, | |
| {"source": "Champmathieu", "target": "Judge", "value": 3}, | |
| {"source": "Champmathieu", "target": "Bamatabois", "value": 2}, | |
| {"source": "Brevet", "target": "Judge", "value": 2}, | |
| {"source": "Brevet", "target": "Champmathieu", "value": 2}, | |
| {"source": "Brevet", "target": "Valjean", "value": 2}, | |
| {"source": "Brevet", "target": "Bamatabois", "value": 1}, | |
| {"source": "Chenildieu", "target": "Judge", "value": 2}, | |
| {"source": "Chenildieu", "target": "Champmathieu", "value": 2}, | |
| {"source": "Chenildieu", "target": "Brevet", "value": 2}, | |
| {"source": "Chenildieu", "target": "Valjean", "value": 2}, | |
| {"source": "Chenildieu", "target": "Bamatabois", "value": 1}, | |
| {"source": "Cochepaille", "target": "Judge", "value": 2}, | |
| {"source": "Cochepaille", "target": "Champmathieu", "value": 2}, | |
| {"source": "Cochepaille", "target": "Brevet", "value": 2}, | |
| {"source": "Cochepaille", "target": "Chenildieu", "value": 2}, | |
| {"source": "Cochepaille", "target": "Valjean", "value": 2}, | |
| {"source": "Cochepaille", "target": "Bamatabois", "value": 1}, | |
| {"source": "Pontmercy", "target": "Thenardier", "value": 1}, | |
| {"source": "Boulatruelle", "target": "Thenardier", "value": 1}, | |
| {"source": "Eponine", "target": "Mme.Thenardier", "value": 2}, | |
| {"source": "Eponine", "target": "Thenardier", "value": 3}, | |
| {"source": "Anzelma", "target": "Eponine", "value": 2}, | |
| {"source": "Anzelma", "target": "Thenardier", "value": 2}, | |
| {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1}, | |
| {"source": "Woman2", "target": "Valjean", "value": 3}, | |
| {"source": "Woman2", "target": "Cosette", "value": 1}, | |
| {"source": "Woman2", "target": "Javert", "value": 1}, | |
| {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3}, | |
| {"source": "MotherInnocent", "target": "Valjean", "value": 1}, | |
| {"source": "Gribier", "target": "Fauchelevent", "value": 2}, | |
| {"source": "Mme.Burgon", "target": "Jondrette", "value": 1}, | |
| {"source": "Gavroche", "target": "Mme.Burgon", "value": 2}, | |
| {"source": "Gavroche", "target": "Thenardier", "value": 1}, | |
| {"source": "Gavroche", "target": "Javert", "value": 1}, | |
| {"source": "Gavroche", "target": "Valjean", "value": 1}, | |
| {"source": "Gillenormand", "target": "Cosette", "value": 3}, | |
| {"source": "Gillenormand", "target": "Valjean", "value": 2}, | |
| {"source": "Magnon", "target": "Gillenormand", "value": 1}, | |
| {"source": "Magnon", "target": "Mme.Thenardier", "value": 1}, | |
| {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9}, | |
| {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2}, | |
| {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2}, | |
| {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1}, | |
| {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1}, | |
| {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1}, | |
| {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2}, | |
| {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1}, | |
| {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1}, | |
| {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6}, | |
| {"source": "Marius", "target": "Gillenormand", "value": 12}, | |
| {"source": "Marius", "target": "Pontmercy", "value": 1}, | |
| {"source": "Marius", "target": "Lt.Gillenormand", "value": 1}, | |
| {"source": "Marius", "target": "Cosette", "value": 21}, | |
| {"source": "Marius", "target": "Valjean", "value": 19}, | |
| {"source": "Marius", "target": "Tholomyes", "value": 1}, | |
| {"source": "Marius", "target": "Thenardier", "value": 2}, | |
| {"source": "Marius", "target": "Eponine", "value": 5}, | |
| {"source": "Marius", "target": "Gavroche", "value": 4}, | |
| {"source": "BaronessT", "target": "Gillenormand", "value": 1}, | |
| {"source": "BaronessT", "target": "Marius", "value": 1}, | |
| {"source": "Mabeuf", "target": "Marius", "value": 1}, | |
| {"source": "Mabeuf", "target": "Eponine", "value": 1}, | |
| {"source": "Mabeuf", "target": "Gavroche", "value": 1}, | |
| {"source": "Enjolras", "target": "Marius", "value": 7}, | |
| {"source": "Enjolras", "target": "Gavroche", "value": 7}, | |
| {"source": "Enjolras", "target": "Javert", "value": 6}, | |
| {"source": "Enjolras", "target": "Mabeuf", "value": 1}, | |
| {"source": "Enjolras", "target": "Valjean", "value": 4}, | |
| {"source": "Combeferre", "target": "Enjolras", "value": 15}, | |
| {"source": "Combeferre", "target": "Marius", "value": 5}, | |
| {"source": "Combeferre", "target": "Gavroche", "value": 6}, | |
| {"source": "Combeferre", "target": "Mabeuf", "value": 2}, | |
| {"source": "Prouvaire", "target": "Gavroche", "value": 1}, | |
| {"source": "Prouvaire", "target": "Enjolras", "value": 4}, | |
| {"source": "Prouvaire", "target": "Combeferre", "value": 2}, | |
| {"source": "Feuilly", "target": "Gavroche", "value": 2}, | |
| {"source": "Feuilly", "target": "Enjolras", "value": 6}, | |
| {"source": "Feuilly", "target": "Prouvaire", "value": 2}, | |
| {"source": "Feuilly", "target": "Combeferre", "value": 5}, | |
| {"source": "Feuilly", "target": "Mabeuf", "value": 1}, | |
| {"source": "Feuilly", "target": "Marius", "value": 1}, | |
| {"source": "Courfeyrac", "target": "Marius", "value": 9}, | |
| {"source": "Courfeyrac", "target": "Enjolras", "value": 17}, | |
| {"source": "Courfeyrac", "target": "Combeferre", "value": 13}, | |
| {"source": "Courfeyrac", "target": "Gavroche", "value": 7}, | |
| {"source": "Courfeyrac", "target": "Mabeuf", "value": 2}, | |
| {"source": "Courfeyrac", "target": "Eponine", "value": 1}, | |
| {"source": "Courfeyrac", "target": "Feuilly", "value": 6}, | |
| {"source": "Courfeyrac", "target": "Prouvaire", "value": 3}, | |
| {"source": "Bahorel", "target": "Combeferre", "value": 5}, | |
| {"source": "Bahorel", "target": "Gavroche", "value": 5}, | |
| {"source": "Bahorel", "target": "Courfeyrac", "value": 6}, | |
| {"source": "Bahorel", "target": "Mabeuf", "value": 2}, | |
| {"source": "Bahorel", "target": "Enjolras", "value": 4}, | |
| {"source": "Bahorel", "target": "Feuilly", "value": 3}, | |
| {"source": "Bahorel", "target": "Prouvaire", "value": 2}, | |
| {"source": "Bahorel", "target": "Marius", "value": 1}, | |
| {"source": "Bossuet", "target": "Marius", "value": 5}, | |
| {"source": "Bossuet", "target": "Courfeyrac", "value": 12}, | |
| {"source": "Bossuet", "target": "Gavroche", "value": 5}, | |
| {"source": "Bossuet", "target": "Bahorel", "value": 4}, | |
| {"source": "Bossuet", "target": "Enjolras", "value": 10}, | |
| {"source": "Bossuet", "target": "Feuilly", "value": 6}, | |
| {"source": "Bossuet", "target": "Prouvaire", "value": 2}, | |
| {"source": "Bossuet", "target": "Combeferre", "value": 9}, | |
| {"source": "Bossuet", "target": "Mabeuf", "value": 1}, | |
| {"source": "Bossuet", "target": "Valjean", "value": 1}, | |
| {"source": "Joly", "target": "Bahorel", "value": 5}, | |
| {"source": "Joly", "target": "Bossuet", "value": 7}, | |
| {"source": "Joly", "target": "Gavroche", "value": 3}, | |
| {"source": "Joly", "target": "Courfeyrac", "value": 5}, | |
| {"source": "Joly", "target": "Enjolras", "value": 5}, | |
| {"source": "Joly", "target": "Feuilly", "value": 5}, | |
| {"source": "Joly", "target": "Prouvaire", "value": 2}, | |
| {"source": "Joly", "target": "Combeferre", "value": 5}, | |
| {"source": "Joly", "target": "Mabeuf", "value": 1}, | |
| {"source": "Joly", "target": "Marius", "value": 2}, | |
| {"source": "Grantaire", "target": "Bossuet", "value": 3}, | |
| {"source": "Grantaire", "target": "Enjolras", "value": 3}, | |
| {"source": "Grantaire", "target": "Combeferre", "value": 1}, | |
| {"source": "Grantaire", "target": "Courfeyrac", "value": 2}, | |
| {"source": "Grantaire", "target": "Joly", "value": 2}, | |
| {"source": "Grantaire", "target": "Gavroche", "value": 1}, | |
| {"source": "Grantaire", "target": "Bahorel", "value": 1}, | |
| {"source": "Grantaire", "target": "Feuilly", "value": 1}, | |
| {"source": "Grantaire", "target": "Prouvaire", "value": 1}, | |
| {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3}, | |
| {"source": "Gueulemer", "target": "Thenardier", "value": 5}, | |
| {"source": "Gueulemer", "target": "Valjean", "value": 1}, | |
| {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1}, | |
| {"source": "Gueulemer", "target": "Javert", "value": 1}, | |
| {"source": "Gueulemer", "target": "Gavroche", "value": 1}, | |
| {"source": "Gueulemer", "target": "Eponine", "value": 1}, | |
| {"source": "Babet", "target": "Thenardier", "value": 6}, | |
| {"source": "Babet", "target": "Gueulemer", "value": 6}, | |
| {"source": "Babet", "target": "Valjean", "value": 1}, | |
| {"source": "Babet", "target": "Mme.Thenardier", "value": 1}, | |
| {"source": "Babet", "target": "Javert", "value": 2}, | |
| {"source": "Babet", "target": "Gavroche", "value": 1}, | |
| {"source": "Babet", "target": "Eponine", "value": 1}, | |
| {"source": "Claquesous", "target": "Thenardier", "value": 4}, | |
| {"source": "Claquesous", "target": "Babet", "value": 4}, | |
| {"source": "Claquesous", "target": "Gueulemer", "value": 4}, | |
| {"source": "Claquesous", "target": "Valjean", "value": 1}, | |
| {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1}, | |
| {"source": "Claquesous", "target": "Javert", "value": 1}, | |
| {"source": "Claquesous", "target": "Eponine", "value": 1}, | |
| {"source": "Claquesous", "target": "Enjolras", "value": 1}, | |
| {"source": "Montparnasse", "target": "Javert", "value": 1}, | |
| {"source": "Montparnasse", "target": "Babet", "value": 2}, | |
| {"source": "Montparnasse", "target": "Gueulemer", "value": 2}, | |
| {"source": "Montparnasse", "target": "Claquesous", "value": 2}, | |
| {"source": "Montparnasse", "target": "Valjean", "value": 1}, | |
| {"source": "Montparnasse", "target": "Gavroche", "value": 1}, | |
| {"source": "Montparnasse", "target": "Eponine", "value": 1}, | |
| {"source": "Montparnasse", "target": "Thenardier", "value": 1}, | |
| {"source": "Toussaint", "target": "Cosette", "value": 2}, | |
| {"source": "Toussaint", "target": "Javert", "value": 1}, | |
| {"source": "Toussaint", "target": "Valjean", "value": 1}, | |
| {"source": "Child1", "target": "Gavroche", "value": 2}, | |
| {"source": "Child2", "target": "Gavroche", "value": 2}, | |
| {"source": "Child2", "target": "Child1", "value": 3}, | |
| {"source": "Brujon", "target": "Babet", "value": 3}, | |
| {"source": "Brujon", "target": "Gueulemer", "value": 3}, | |
| {"source": "Brujon", "target": "Thenardier", "value": 3}, | |
| {"source": "Brujon", "target": "Gavroche", "value": 1}, | |
| {"source": "Brujon", "target": "Eponine", "value": 1}, | |
| {"source": "Brujon", "target": "Claquesous", "value": 1}, | |
| {"source": "Brujon", "target": "Montparnasse", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Joly", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1}, | |
| {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1} | |
| ] | |
| } |
Author
I tried increasing the number of iterations and that certainly helped, although I couldn't get rid of all irregularities even at 10 or 20 iterations, so I think that's probably not the right solution for my use case, especially when taking performance into account.
I'm attempting to write a force the pushes nodes into the right spots on a grid, so far I've gotten something that looks a bit like a sideshot of a curly person 😄:
Author
I was able to display around 4,000 nodes with a good balance of charge, collide, and radius. When you have a situation of overlapping like this one, usually forces are too strong. A piece of good advice is also to limit forces of attraction to the value of 0.5; looking at the animation usually helps to see it.
I've put this on hold for now as coding the force properly seems to be pretty time consuming, plus it's unclear to me how well it will interact with other forces, I'll spend more time on this in the future.
Lowering the strength of links helped a great deal with minimizing the total length of links.
Btw on that regard I have the following problem: I want the total length of links to be minimized as much as possible, but currently nodes are initially positioned like sunflower seeds without accounting for links at all, which doesn't sound great to me, I feel like just positioning the nodes a bit more smartly should lower the burden on the simulation to minimize links, and overall deliver shorter links on average. The problem is I don't really know how to account for links smartly when positioning nodes, from what I've read it would appear that finding the global minimum like that is NP-hard, so basically impossible, but perhaps there's something easy that gets me like 50% of the way there or something? I just don't know what kind of algorithm and data structure I should use for this, if you have any ideas about that I could definitely use some help with it 😅.
Author
I am not really sure there is a technique to favor the computational charge. I have to admit that in my experience networks are doing great for rather small datasets. This pushed me to explore vector reduction as an alternative to network algorithms. The uselessness of drawing unreadable, overlapping links was also a good point to move in that direction. You can take a look at this ongoing project which is based on UMAP arrangement https://rodighiero.github.io/SPT2021/.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Moritz's solutions are always elegant and nicely crafted, I would go for that. If you want to improve irregularities in my solution, you have to increase the number of iterations for the collide force, like this:
Increasing this parameter enabled me to align grids like yours. I was not bothered by orientation, but I am quite confident you can fix it by calculating the inclination between two close nodes and applying it to the whole graph.
Finally, I also liked the irregularities like in a real honeycomb. Moritz's solution leaves room to work with different grids, my approach might lead to a graph without holes.
Your experiments look great in any case, please keep me updated!