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.
| license: gpl-3.0 | |
| height: 500 | |
| border: no |
| <!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> |
| { | |
| "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} | |
| ] | |
| } |
Dear Fabio,
The hexagonal arrangement results from the balancement of attraction and repulsion forces. Attraction avoids drifting nodes, and repulsion optimizes the space by giving shape to the honeycomb tessellation. You can test it by activating and desactivating these lines:
.force('charge', d3.forceManyBody().strength(100)) // Gravity force
.force('collide', d3.forceCollide().radius(25).iterations(3)) // Repulsion force
You might be interested in looking at my last book, which is freely accessible from this address https://dariorodighiero.com/Mapping-Affinities-Cartographie-des-affinites. From page 75, I argue how regular grids can improve network reading as it happened in the thirties with Harry Beck's London underground map.
Best,
Dario
🤔 I sort of get it, but I don't think that actually works in general for achieving a very regular hexagonal grid, it may work reliably with the graph provided in this gist but probably not so reliably for other (bigger?) graphs. To give some context I'm basically trying to make a similar graph using d3-force too, but I need to draw labels horizontally below each node, so I need nodes to align in such a way that labels are not likely to overlap with each other.
Here's my graph, with hexagons drawn around each node purely for visual aid:
As you can see I get a sort of regular grid, but there are some irregularities every now and then which mess up the alignment for some regions. From watching this video I'm thinking that just happens normally in crystals, which d3-force kind of simulates. That's a problem I would like to fix for my use case though.
But also assuming a perfect alignment, like the one you are getting in this gist, the angle of the hexagon matters a great deal. So for example if nodes align like this labels of adjacent nodes are pretty likely to overlap if they are long enough:
But if nodes are aligned like this now there's a lot more space between 2 nodes in the same row, so overlaps are significantly less likely for my use case:
Do you have any ideas on how to fix the irregularities and how to fix the angle of the grid?
I was thinking maybe I should patch the collision force to work with hexagons rather than circles, but that's not producing the results I was hoping for, there are still irregularities, finding collisions is much more expensive computationally, and the pointy corners don't help with making a visually smooth simulation.
Now I'm thinking maybe I should add another force that attracts nodes at specific points on the plane, trying to force the hexagonal grid structure I need that way, but I'm not sure if that's going to work 🤔
I think this is exactly what I need: http://moritzstefaner.github.io/gridexperiments/
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:
.force('collide', d3.forceCollide().radius(30).strength(.5).iterations(10))
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!
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 😄:
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 😅.
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/.
It's not clear to me how the hexagonal structure is fixed with this code, any insights? It seems to me that an hexagonal structure is just likely to be produced by d3-force, but I don't think this code is fixing the angle of the hexagon anywhere, right?