31:T46e,md `### Le modèle physique d'attraction/répulsion des "force-directed layouts" Les modélisations gouvernées par la notion de "force" **empruntent leurs principes à la physique**. Tous les éléments du graphe relationnel se repoussent d'abord comme le feraient deux charges électriques de même signe, mais cette force de répulsion est contrebalancée par l'attraction qui s'exerce entre deux nœuds connectés (comme avec un ressort). Enfin, un troisième processus, gravitaire, aboutit à rendre le nuage final plus ou moins compact. **Les algorithmes diffèrent notamment dans la puissance accordée aux deux forces d'attraction et répulsion**. Dans Graphology, ForceAtlas2, développé par une équipe du [laboratoire Medialab de Sciences Po](https://medialab.sciencespo.fr/), leur donne une importance équivalente. Comme ses cousins, **ForceAtlas2** procède par itérations dont le point d'aboutissement peut varier selon la disposition (le layout) de départ. Mais si les configurations à l'arrivée diffèrent, elles restent, sur le plan topologique (proximités et éloignements), d'interprétation semblable. `32:T53c,md `### Préparation des données de migration La [base des migrations résidentielles](https://www.insee.fr/fr/statistiques/5393826) présente au format CSV les mouvements de population entre communes. Le recensement conduit par l'Insee interroge en effet sur le lieu de résidence antérieure un an auparavant. Les derniers résultats correspondent au millésime 2018, ils sont publiés en géographie communale 2021. Ceci permet d'agréger les données communales par [aire d'attraction des villes](https://www.insee.fr/fr/information/4803954), après avoir éliminé les échanges intra-communes. Les données sont "désorientées" après addition des flux entre deux aires. On comptabilise ainsi pour la paire Bordeaux-Toulouse la somme des mouvements de Bordeaux vers Toulouse et Toulouse vers Bordeaux. Seuls les flux supérieurs à 750 sont retenus ici. Par ailleurs, **les échanges concernant l'aire parisienne sont éliminés**, tout comme ceux internes à chaque Dom. ForceAtlas2 demande deux fichiers de structure simple : - les "nodes" décrivent les noeuds, c'est à dire les aires urbaines, avec un identifiant (id) et un libellé ; - les "edges" décrivent les flux, les relations entre nœuds, avec deux colonnes d'id et une colonne (optionnelle) reflétant l'intensité des flux (valeur absolue ou discrétisation). `33:T4ee,add_colors_sizes_to_graph = () => { graph.forEachNode((n,attr) => { graph.setNodeAttribute(n, "size", graph.degree(n)) // la taille des ronds/noeuds reflétera leur nb de connexions graph.setNodeAttribute(n, "label", n.indexOf('Luxembourg') == 0 ? nodes_map.get(n) : n.replace('Marseille - Aix-en-Provence', 'Marseille - Aix')) graph.setNodeAttribute(n, "color", colors[attr.community]) if (['Valence', 'Montpellier', 'Brest', 'Toulon', 'Tours', 'Metz'].includes(n)) graph.setNodeAttribute(n, "forceLabel", true) // force l'affichage de ces métropoles }) graph.forEachEdge((n,attr) => { let a = n.split('_') let c1 = graph.getNodeAttribute(edges[+a[2]].source, 'community'), c2 = graph.getNodeAttribute(edges[+a[2]].target, 'community') graph.setEdgeAttribute(n, "originalcolor", '#ddd') // liens colorés par défaut en gris neutre if (c1 == c2) { // si deux noeuds connectés appartiennent à la même communauté, leur lien sera colorié en cohérence graph.setEdgeAttribute(n, "color", colors[c1]) graph.setEdgeAttribute(n, "originalcolor", colors[c1]) } }) return "Calcul d'attributs complémentaires pour les nœuds et les relations" }34:T468,{ renderer.on("enterNode", ({ node }) => { let c = graph.getNodeAttribute(node, 'community') graph.forEachEdge((n,attr) => { if (graph.getEdgeAttribute(n, "originalcolor") !== colors[c]) { graph.setEdgeAttribute(n, "color", '#ccc') } }) graph.forEachNode((n,attr) => { if (graph.getNodeAttribute(n, 'community') != c) graph.setNodeAttribute(n, "color", "#999") }) graph.forEachNeighbor(node, (n, attr) => { graph.setNodeAttribute(n, "color", colors[attr.community]); }) graph.setNodeAttribute(node, "color", colors[graph.getNodeAttribute(node, "community")]) }) // sortie du survol, retour à la visu par défaut renderer.on("leaveNode", ({ node }) => { let c = graph.getNodeAttribute(node, 'community') graph.forEachEdge((n,attr) => { if (graph.getEdgeAttribute(n, "originalcolor") !== colors[c]) { graph.setEdgeAttribute(n, "color", graph.getEdgeAttribute(n, "originalcolor")) } }) graph.forEachNode((n,attr) => { graph.setNodeAttribute(n, "color", colors[attr.community]) }) }) return "Gestion du survol" }35:T5a6,{ // d'après https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/mouse-manipulations let draggedNode = null; let isDragging = false; // On mouse down on a node // - we enable the drag mode // - save in the dragged node in the state // - highlight the node // - disable the camera so its state is not updated renderer.on("downNode", (e) => { isDragging = true; draggedNode = e.node; graph.setNodeAttribute(draggedNode, "highlighted", true); }); // On mouse move, if the drag mode is enabled, we change the position of the draggedNode renderer.getMouseCaptor().on("mousemovebody", (e) => { if (!isDragging || !draggedNode) return; // Get new position of node const pos = renderer.viewportToGraph(e); graph.setNodeAttribute(draggedNode, "x", pos.x); graph.setNodeAttribute(draggedNode, "y", pos.y); // Prevent sigma to move camera: e.preventSigmaDefault(); e.original.preventDefault(); e.original.stopPropagation(); }); // On mouse up, we reset the autoscale and the dragging mode renderer.getMouseCaptor().on("mouseup", () => { if (draggedNode) { graph.removeNodeAttribute(draggedNode, "highlighted"); } isDragging = false; draggedNode = null; }); // Disable the autoscale at the first down interaction renderer.getMouseCaptor().on("mousedown", () => { if (!renderer.getCustomBBox()) renderer.setCustomBBox(renderer.getBBox()); }); return "Gestion du déplacement des noeuds" }36:T7c1,saveAsPNG = function(renderer, inputLayers) { const { width, height } = renderer.getDimensions(); // This pixel ratio is here to deal with retina displays. // Indeed, for dimensions W and H, on a retina display, the canvases // dimensions actually are 2 * W and 2 * H. Sigma properly deals with it, but // we need to readapt here: const pixelRatio = window.devicePixelRatio || 1; const tmpRoot = document.createElement("DIV"); tmpRoot.style.width = `${width}px`; tmpRoot.style.height = `${height}px`; tmpRoot.style.position = "absolute"; tmpRoot.style.right = "101%"; tmpRoot.style.bottom = "101%"; document.body.appendChild(tmpRoot); // Instantiate sigma: const tmpRenderer = new Sigma.Sigma(renderer.getGraph(), tmpRoot, renderer.getSettings()); // Copy camera and force to render now, to avoid having to wait the schedule / // debounce frame: tmpRenderer.getCamera().setState(renderer.getCamera().getState()); tmpRenderer.refresh(); // Create a new canvas, on which the different layers will be drawn: const canvas = document.createElement("CANVAS") ; canvas.setAttribute("width", width * pixelRatio + ""); canvas.setAttribute("height", height * pixelRatio + ""); const ctx = canvas.getContext("2d") ; // Draw a white background first: ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, width * pixelRatio, height * pixelRatio); // For each layer, draw it on our canvas: const canvases = tmpRenderer.getCanvases(); const layers = inputLayers ? inputLayers.filter((id) => !!canvases[id]) : Object.keys(canvases); layers.forEach((id) => { ctx.drawImage( canvases[id], 0, 0, width * pixelRatio, height * pixelRatio, 0, 0, width * pixelRatio, height * pixelRatio, ); }); // Save the canvas as a PNG image: canvas.toBlob((blob) => { if (blob) saveAs(blob, "graph.png"); // Cleanup: tmpRenderer.kill(); tmpRoot.remove(); }, "image/png"); }37:T776,// communities are groups with denser relations // The size of the node depends of its degree, ie. its number of in-going & outgoing edges md ` ### Présentations - [Introduction to Social Network Analysis: Basics and Historical Specificities](http://www.martingrandjean.ch/) - [Sigma.js](https://www.sigmajs.org/) - [How to use Sigmajs to display your graph ?](https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html) - [Algorithmes de modélisation de graphes](http://www-igm.univ-mlv.fr/~dr/XPOSE2012/visualisation_de_graphes/algorithmes.html) - [Inside the giant network map I made for Le Monde, Martin Grandjean, avril 2022](https://reticular.hypotheses.org/2026) ### Dépôts Github - [Graphology - Github](https://github.com/graphology/graphology) - [Sigma.js - Github](https://github.com/jacomyal/sigma.js) ### Papiers de recherche - [ForceAtlas2, a Continuous Graph Layout Algorithm for Handy Network Visualization, Alexis Jacomy & al., 2014](https://medialab.sciencespo.fr/productions/2014-forceatlas2-a-continuous-graph-layout-algorithm-for-handy-network-visualization-designed-for-the-gephi/) - [Méthode de Louvain](https://fr.wikipedia.org/wiki/M%C3%A9thode_de_Louvain) ### Démos Observable - [Game of Thrones Graphology Example](https://observablehq.com/@jrladd/gotgraphology) - [Force-directed network layout - Mathieu Jacomy](https://observablehq.com/@jacomyma/force-directed-network-layout) - [forceatlas2-layout-settings-visualized](https://observablehq.com/@mef/forceatlas2-layout-settings-visualized) - [highlights-on-connected-closeness](https://observablehq.com/@jacomyma/highlights-on-connected-closeness?collection=@jacomyma/force-directed-network-layout) [sigma-basic](https://observablehq.com/@yhyddr/sigma-basic) ### Données sur les migrations résidentielles - [Insee - migrations résidentielles en 2018 par commune](https://www.insee.fr/fr/statistiques/5393826) `38:[{"id":"8419d6f4e061e882b98dac5af40c4d10d02e580371ab0c1f87d47c3488f0548e9ef29d35966dc2c156b81825be94dca979a1a88f3e65fb58eac14952bfbae251","href":"https://static.observableusercontent.com/files/8419d6f4e061e882b98dac5af40c4d10d02e580371ab0c1f87d47c3488f0548e9ef29d35966dc2c156b81825be94dca979a1a88f3e65fb58eac14952bfbae251","name":"mob_edges@29.csv","type":"text/csv","lastModified":1649601965671.043,"size":10224},{"id":"8f42106f427d46b9f20dd3e37da84e64f95d073d3de1ed9709ebd9dfbe75765490139c774f46ebfca9566643e551532684cf5d47600d1ca8bb20719485ebff15","href":"https://static.observableusercontent.com/files/8f42106f427d46b9f20dd3e37da84e64f95d073d3de1ed9709ebd9dfbe75765490139c774f46ebfca9566643e551532684cf5d47600d1ca8bb20719485ebff15","name":"mob_nodes@29.csv","type":"text/csv","lastModified":1649601965671.043,"size":3991},{"id":"6060432bd52e63acddb94ed29b72cbad795585a71b610a748c097574df8a145c0ccb3afe2d8e35725d54e4d3371e441e2038d46b4cd8125286b0b4897539c37d","href":"https://static.observableusercontent.com/files/6060432bd52e63acddb94ed29b72cbad795585a71b610a748c097574df8a145c0ccb3afe2d8e35725d54e4d3371e441e2038d46b4cd8125286b0b4897539c37d","name":"image@1.png","type":"image/png","lastModified":1649668269736.252,"size":48803},{"id":"4fa85df7d97249bfbed8a46905a2b4af8f7725addba0fe0bf1c7c53dc63718dd9a21867969995c2ee177c88bc8cc4a131ae2a026b94ab7c3c4f5722aeb80dfcc","href":"https://static.observableusercontent.com/files/4fa85df7d97249bfbed8a46905a2b4af8f7725addba0fe0bf1c7c53dc63718dd9a21867969995c2ee177c88bc8cc4a131ae2a026b94ab7c3c4f5722aeb80dfcc","name":"image.png","type":"image/png","lastModified":1649667559766.526,"size":27238},{"id":"bbd649f690bf5eff75766c41d1233f3dcdedb8bf486ab0ad911853b310cfb1729e2a4b25cdd6fb4b87da87569148140f02cb3605390e97c627e4b6b84f0b0970","href":"https://static.observableusercontent.com/files/bbd649f690bf5eff75766c41d1233f3dcdedb8bf486ab0ad911853b310cfb1729e2a4b25cdd6fb4b87da87569148140f02cb3605390e97c627e4b6b84f0b0970","name":"graphology1.png","type":"image/png","lastModified":1649691104645.351,"size":23364},{"id":"558383bf5446b04a89531178d8e5ff00484b8b35f14b03bfb674c54bc0a327b2afdd86463a129a1adf02f6afd1777409551226c4b25053e5f36aeb7e0430fcc2","href":"https://static.observableusercontent.com/files/558383bf5446b04a89531178d8e5ff00484b8b35f14b03bfb674c54bc0a327b2afdd86463a129a1adf02f6afd1777409551226c4b25053e5f36aeb7e0430fcc2","name":"graphology2.png","type":"image/png","lastModified":1649691104735.222,"size":35180},{"id":"c20eac02ab74c73ced1a98d712a655721636f0314c6bfd9744a3236699044de3dd362af7c69c02668ca390952792e3d16e12ae0abf81b408ff05b33515ff4447","href":"https://static.observableusercontent.com/files/c20eac02ab74c73ced1a98d712a655721636f0314c6bfd9744a3236699044de3dd362af7c69c02668ca390952792e3d16e12ae0abf81b408ff05b33515ff4447","name":"graphology1@1.png","type":"image/png","lastModified":1649698372586.758,"size":28155},{"id":"5b7490d6c19d53abf3ec514f38301f6bcad607dc42039d47a77ce5e60af1d79846de3b0627fb406abd098535f4b97fbcadfcd9d008873c0175f9ba42e87c1499","href":"https://static.observableusercontent.com/files/5b7490d6c19d53abf3ec514f38301f6bcad607dc42039d47a77ce5e60af1d79846de3b0627fb406abd098535f4b97fbcadfcd9d008873c0175f9ba42e87c1499","name":"graphology1@3.png","type":"image/png","lastModified":1649698463292.309,"size":36727},{"id":"2ed98678bddbf19cbd54110f56062ac3fa36b23d02a3c551496a0ac7ffcf4560b3db534f8419ad54f264667538d46a71bd80c9cbc1e397a8ac1185ac1a3eb15e","href":"https://static.observableusercontent.com/files/2ed98678bddbf19cbd54110f56062ac3fa36b23d02a3c551496a0ac7ffcf4560b3db534f8419ad54f264667538d46a71bd80c9cbc1e397a8ac1185ac1a3eb15e","name":"louvain0.25.png","type":"image/png","lastModified":1649708812788.316,"size":81929},{"id":"2dcf568b4bb59a96c9d4a84257e340bc9182dcff620c2e639720e2e012572db368c2a2af7a6fb140047c4c8e25c1dfeb22eeac2bb39858d5f84b21ec9b6c0d6f","href":"https://static.observableusercontent.com/files/2dcf568b4bb59a96c9d4a84257e340bc9182dcff620c2e639720e2e012572db368c2a2af7a6fb140047c4c8e25c1dfeb22eeac2bb39858d5f84b21ec9b6c0d6f","name":"Airports-network.gif","type":"image/gif","lastModified":1649742002582.857,"size":4271627},{"id":"4ed747ef5aa2b22bc5fd7f70990ba6cd91b312cc814048381052d26f98dad0243a7861bcd949742a340f6d2d428b7a8ba260128618173fb7a32cec3b6424cddc","href":"https://static.observableusercontent.com/files/4ed747ef5aa2b22bc5fd7f70990ba6cd91b312cc814048381052d26f98dad0243a7861bcd949742a340f6d2d428b7a8ba260128618173fb7a32cec3b6424cddc","name":"image@5.png","type":"image/png","lastModified":1649921511805.826,"size":99139},{"id":"7fb5cac023f89d5e97f36b956343e7267e02e0ff359483cab67b72b12095034ebcd41e6bdb61b9df2045347a7c4eda10dd5658bad2dadd78abbd376fbcc92366","href":"https://static.observableusercontent.com/files/7fb5cac023f89d5e97f36b956343e7267e02e0ff359483cab67b72b12095034ebcd41e6bdb61b9df2045347a7c4eda10dd5658bad2dadd78abbd376fbcc92366","name":"image@7.png","type":"image/png","lastModified":1649921822105.406,"size":662424},{"id":"db12677da47163a527eb0ec6389049319fef6e15c8edfe7fe2abc70287ae016cc006fe93c4ba03771a42dc3af2d8357732d493902a8a6fd88c8b7730695b26d6","href":"https://static.observableusercontent.com/files/db12677da47163a527eb0ec6389049319fef6e15c8edfe7fe2abc70287ae016cc006fe93c4ba03771a42dc3af2d8357732d493902a8a6fd88c8b7730695b26d6","name":"image@8.png","type":"image/png","lastModified":1650028267056.535,"size":120284},{"id":"0e972c494ea1cee63e67ec333106f06e6c298844f9b93b5f0cb3df7d685afb64cd2e9f996409bc8993c8ec36ba13d171eacf9584a4d3c848738a2804947dd9ac","href":"https://static.observableusercontent.com/files/0e972c494ea1cee63e67ec333106f06e6c298844f9b93b5f0cb3df7d685afb64cd2e9f996409bc8993c8ec36ba13d171eacf9584a4d3c848738a2804947dd9ac","name":"mobres_edges.csv","type":"text/csv","lastModified":1650287539557.342,"size":6680},{"id":"82f5fb7f7ec641dcc10634a3561a307a90c48172c838a6251b399d3c13e1400ef9517b37d34d74b59fbf9d731a4fbcb5de2997ac059c61c2d95d3efab903a014","href":"https://static.observableusercontent.com/files/82f5fb7f7ec641dcc10634a3561a307a90c48172c838a6251b399d3c13e1400ef9517b37d34d74b59fbf9d731a4fbcb5de2997ac059c61c2d95d3efab903a014","name":"mobres_nodes.csv","type":"text/csv","lastModified":1650287539592.519,"size":3991},{"id":"8f42106f427d46b9f20dd3e37da84e64f95d073d3de1ed9709ebd9dfbe75765490139c774f46ebfca9566643e551532684cf5d47600d1ca8bb20719485ebff15","href":"https://static.observableusercontent.com/files/8f42106f427d46b9f20dd3e37da84e64f95d073d3de1ed9709ebd9dfbe75765490139c774f46ebfca9566643e551532684cf5d47600d1ca8bb20719485ebff15","name":"mobilite_nodes.csv","type":"text/csv","lastModified":1650287994209.51,"size":3991},{"id":"8419d6f4e061e882b98dac5af40c4d10d02e580371ab0c1f87d47c3488f0548e9ef29d35966dc2c156b81825be94dca979a1a88f3e65fb58eac14952bfbae251","href":"https://static.observableusercontent.com/files/8419d6f4e061e882b98dac5af40c4d10d02e580371ab0c1f87d47c3488f0548e9ef29d35966dc2c156b81825be94dca979a1a88f3e65fb58eac14952bfbae251","name":"mobilite_edges.csv","type":"text/csv","lastModified":1650287993842.211,"size":10224}] 2f:{"title":"Graphology et migrations résidentielles entre aires urbaines","cells":[{"id":0,"value":"md `# Graphology et migrations résidentielles entre aires urbaines\n\nLa librairie JavaScript [Graphology](https://graphology.github.io/), combinée à sa cousine [Sigma.js](https://www.sigmajs.org/), permet d'explorer des **données organisées sous forme de relations**. J'ai passé un peu de temps à l'apprivoiser, en voici quelques clés, détaillées dans Observable, libre à vous, c'est le principe d'Observable, d'y mettre vos propres données.\n\nPour l'illustrer, je considère les changements de résidence en France en 2018 ([données du recensement Insee](https://www.insee.fr/fr/statistiques/5393826)). Ils sont filtrés en retirant Paris (qui écrase tout) et les Doms. Cette visualisation interactive (déplacez, survolez et zoomez à la souris) permet donc d'explorer les **échanges de population entre villes de province**, et plus précisément **les aires d'attraction** des grandes villes de province ([nouveau concept de l'Insee succédant à celui d'aire urbaine](https://www.insee.fr/fr/information/4808607)).\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"container = {\n return html`

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"viewof replay1 = Inputs.button(\"▶️ Export du graphique en PNG\", {value:undefined, reduce: () => {\n const layers = [\"edges\", \"nodes\", \"edgeLabels\", \"labels\"]\n saveAsPNG(renderer, layers)\n }}\n) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"md `Ici, deux aires sont reliées si le flux total de population entre elles dépasse 750 personnes. **Chaque nœud-cercle est dimensionné en fonction du nombre de connexions qu'il entretient avec les autres**. Seule l'épaisseur des traits reflète les différences d'effectifs de flux.\n\nCette représentation hiérarchise et simplifie la cartographie des flux. Elle réduit le bruit en limitant les croisements de lignes.\n\nUn algorithme complémentaire dénommé *Louvain* calcule des *communautés d'échange*, identifiées par une couleur. Cette méthode de partitionnement maximise le nombre de liaisons internes et minimise celles entre les communautés. \n\nLe survol d'une aire urbaine met en évidence toutes celles de sa communauté, ainsi que ses *voisins* immédiats dans le graphe.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"md `## 1 - Quelques enseignements\nDe cet exercice de style, qu'il faudrait consolider en élargissant le jeu de données à plusieurs années consécutives de migrations observées, se dégagent quelques constats qu'une carte classique de flux n'exprimerait pas aussi aisément.\n\n### Lyon est (après Paris) une plaque tournante\nLa \"capitale des Gaules\" est l'aire de province la plus connectée aux autre aires. Elle est reliée à **${graph.degree('Lyon')}** d'entre elles.\n\n### De nombreux déménagements entre les grandes villes du Sud\nAvec Lyon, Toulouse (${graph.degree('Toulouse')}) et Bordeaux (${graph.degree('Bordeaux')}), puis Marseille - Aix (${graph.degree('Marseille - Aix-en-Provence')}) et Montpellier (${graph.degree('Montpellier')}) tissent un dense réseau d'échanges croisés. L'algorithme de partitionnement le confirme, si on lui demande de réduire le nombre de communautés à calculer :\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"FileAttachment(\"image@5.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"md `\n\n### Trois réseaux satellites : Lille, Nantes-Rennes et Strasbourg-Nancy-Metz\nEn périphérie du réseau central précédent, mais **sans doute davantage polarisés par l'aire parisienne**, trois réseaux se logent dans les marges :\n- Lille concentre ses échanges avec son environnement proche.\n- Dans l'ouest de la métropole, Nantes et Rennes forment une communauté bretonne étendue à Angers ou au Mans.\n- À l'est, ce sont Strasbourg, Nancy et Metz qui se rejoignent. \n\nUne **curieuse connexion entre Brest et Toulon** (mutation d'emplois militaires ?) conduit à rapprocher la communauté méditerranéenne du centre du graphique.\n\nObservons enfin deux constellations plus périphériques encore : Rouen - Caen - le Havre, et Reims - Châlons.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"md `Pour mieux situer ce que représente le filtrage hors Paris, précisons que les flux utilisés pour ce graphe, cumulés (380 000 personnes), sont un peu supérieurs à ceux qui concernent la seule aire d'attraction parisienne (que l'on quitte, ou dans laquelle on emménage).` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"md `## 2 - Graphology : comment ça marche ?` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"md `Graphology est le portage en JavaScript de [Gephi](https://gephi.org/), logiciel libre programmé en Java. Gephi, né en 2008 en France, est devenu la référence des outils d'analyse et de visualisation de réseaux. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"md`\n

Crédits : [Driving Interactive Graph Exploration Using 0-Dimensional Persistent Homology Features](https://www.researchgate.net/publication/321873718_Driving_Interactive_Graph_Exploration_Using_0-Dimensional_Persistent_Homology_Features)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md `### Un algorithme tout terrain, documenté, et disponible en JavaScript\nForceAtlas2 est **une petite merveille d'algorithme**, exposant une multitude de paramètres. Le jeu de paramètres par défaut est déjà fort satisfaisant. On peut toutefois ajuster la configuration de départ, le nombre d'itérations, le facteur de gravité, ou un *scaling factor*, améliorant la netteté d'ensemble.\n\nLa librairie **Graphology** qui l'englobe fournit d'autres modules utilitaires, pour par exemple calculer des communautés ou mieux gérer les superpositions.\n\nEnfin, le module de visualisation **Sigma.js**, à l'origine duquel on retrouve, avec Guillaume Plique, les frères Alexis et Mathieu Jacomy, également impliqués dans ForceAtlas2, fournit une interface de rendu et d'exploration esthétique et intuitive.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"md `### Graphology / ForceAtlas2 s'applique à quantité de jeux de données relationnels\n\nMartin Grandjean a produit cette superbe carte des vols commerciaux, dont les nœuds sont les aéroports. La couleur exprime la longitude. L'animation montre bien que le graphe se différencie de la carte, même si par nature ici il reste très influencé par la proximité géographique.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"md`\n

Crédits : [Martin Grandjean - Connected World: Untangling the Air Traffic Network - mai 2016](http://www.martingrandjean.ch/connected-world-air-traffic-network/)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"md `Comme dans notre cas d'étude initial, ce graphe s'appuie sur des entités de même nature (métropoles ou aéroports), et des relations simples entre ces entités. Mais d'autres modèles plus ouverts peuvent s'envisager. Dans l'exemple ci-dessous, les nœuds appartiennent à 3 catégories différentes : personnes, villes, objets de consommation, et **les relations entre ces nœuds sont aussi de différente nature**.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`\n

Crédits : [sigma-example-custom-rendering](https://codesandbox.io/s/pfzs3)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"md `Ces modèles présentent une belle puissance de traitement et produisent des visualisations souvent spectaculaires. Mathieu Jacomy a très récemment (avril 2022) élaboré pour le quotidien le Monde **une cartographie de la twittosphère politique** combinant une impressionnante palette de techniques :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"md`\n

Crédits : [Mathieu Jacomy - Inside the giant network map I made for Le Monde - avril 2022](https://reticular.hypotheses.org/2026)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md `## 3 - Mise en œuvre pratique des librairies JavaScript Graphology et Sigma.js` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"edges = FileAttachment(\"mobilite_edges.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"nodes = FileAttachment(\"mobilite_nodes.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"### Création du graphe à partir des données de migration\n\nAvec Graphology, le graphe se crée en quelques lignes, complétées ci-dessous par un calcul de partitionnement (algorithme de Louvain) qui dégage des \"communautés\" relativement homogènes.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"graph = {\n let graph = new Graph({type: 'undirected', weighted: true, weight: 'weight'})\n \n nodes.forEach(n => {\n graph.addNode(n.id)\n })\n \n edges.forEach((e) => {\n graph.addEdge(e.source, e.target, {weight: +e.weight, size: (+e.size - 1)})\n })\n \n GraphologyLibrary.communitiesLouvain.assign(graph, {\n resolution: 1 // the higher, more communities\n })\n \n return graph\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1215,"value":"### Application de ForceAtlas2 et dessin avec Sigma.js\n\nForceAtlas2 présente [de nombreux paramètres](https://graphology.github.io/standard-library/layout-forceatlas2.html). J'ai retenu pour l'essentiel les options par défaut. Après les calculs de ForceAtas2, Sigma.js prend le relais pour construire la visualisation :","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"renderer = {\n GraphologyLibrary.layout.circular.assign(graph) // Disposition de départ. circular peut être remplacé par random ou circlepack\n \n let sensibleSettings = GraphologyLibrary.layoutForceAtlas2.inferSettings(graph)\n //sensibleSettings.gravity = 0.01\n //sensibleSettings.scalingRatio = 10\n sensibleSettings.outboundAttractionDistribution = true\n\n GraphologyLibrary.layoutForceAtlas2.assign(graph, {iterations: 1000, settings: sensibleSettings, getEdgeWeight: \"weight\"})\n\n GraphologyLibrary.layoutNoverlap.assign(graph) // traitement complémentaire pour réduire les superpositions\n\n add_colors_sizes_to_graph() // ajout d'infos au graphe pour conversion en variables visuelles : couleurs et taille des cercles\n\n return new Sigma.Sigma(graph, document.getElementById('sigma-container'), \n {labelRenderedSizeThreshold: 2.5} // densité réglable d'étiquettes de villes\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1219,"value":"Le bloc suivant, optionnel, complète les informations du graphe, pour permettre d'affiner ensuite la présentation (coloration des communautés, métriques de chaque nœud) :","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"### Interactivité (survol, déplacements)\n\nAu survol d'un nœud, on mettra en évidence tous les nœuds reliés et/ou appartenant à la même communauté.","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1663,"value":"md `Permettre de déplacer un nœud par cliquer/glisser :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"md `### Afficher quelques métriques\n\nVoici la mesure du nb de connexions d'un nœud :\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"graph.degree('Toulouse')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1679,"value":"md `Et, pour les amateurs de graphes, le calcul de métriques complémentaires :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"{\n GraphologyLibrary.metrics.centrality.degree.assign(graph)\n GraphologyLibrary.metrics.centrality.eigenvector.assign(graph)\n GraphologyLibrary.metrics.centrality.hits.assign(graph)\n GraphologyLibrary.metrics.centrality.betweenness.assign(graph)\n GraphologyLibrary.metrics.centrality.closeness.assign(graph)\n \n return \"Calcul de métriques\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"{\n await visibility\n \n return Inputs.table(graph.nodes().map(n => graph.getNodeAttributes(n)).map((n,i) => {n.degrees = graph.degree(nodes[i].id); return n}),\n {layout: \"auto\", sort: \"degrees\", reverse: true,\n columns: [\"label\", \"degrees\", \"degreeCentrality\", \"betweennessCentrality\", \"eigenvectorCentrality\",\"authority\", \"hub\", \"closenessCentrality\",\"community\"]})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"md`\n

Crédits : [Martin Grandjean, Introduction to Social Network Analysis - 2021](https://zenodo.org/record/5083036#.YlluzMhBzmF)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"### Librairies","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Graph = require('graphology')","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"GraphologyLibrary = require('graphology-library@0.7.1/dist/graphology-library.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"Sigma = import('https://cdn.skypack.dev/sigma@2.3.0?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"import {saveAs} from '@jgrunik/filesaver-js'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"md `Définitions complémentaires`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"colors = {\n let c = d3.schemeCategory10.concat().reverse()\n c[2] = \"orange\"\n \n return c.concat(\"blue\", \"lime\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"nodes_map = new Map(nodes.map(d => [d.id, d.label]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"md `## Pour en savoir plus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}