Articles tagués Javascript

L’art de dessiner des graphes

Publié par Pierre COUCHET dans 1. Généralités le 9 septembre 2017

“Ce grand monde, c’est le miroir où il nous faut regarder pour nous connaître de bon biais.”

Montaigne, Essais

À première vue, dessiner un graphe semble relativement simple. Il suffit de prendre deux points et de les relier par un trait. Il est encore possible de nommer le point de départ et le point d’arrivée, A et B par exemple. C’est précisément cette simplicité qui fait tout l’intérêt de la technique ! Mais les choses peuvent devenir rapidement plus compliquées lorsque les points et les liens deviennent nombreux (Graphe 1, Graphe 2). Dérivé du grec ancien γράφος, gráphos « écrit », le graphe correspond à un ensemble de nœuds (sommets) reliés par des arêtes (arcs) qui servent de modèle pour décrire le réel.

Maillage

Graphe 1 : Réseau géodésique français pour la réalisation de la carte d’État-major au 1/40 000 élaborée entre 1825 et 1866. http://buclermont.hypotheses.org/3231

paris-metro

Graphe 2  : Diagramme de Sankey 3D du flux de passagers dans le métro parisien par Etienne Come avec mapbox.com. http://www.comeetie.fr/galerie/sankeystif/index_map.html

Pour le mathématicien, les arbres, les chaînes, les cycles et les réseaux sont des sortes de graphes. Euler propose dès 1735 une théorie pour décrire les chemins rendus possibles par les sept ponts de Königsberg desservant deux îles centrales de la cité. Il fonde ainsi une branche des mathématiques discrètes dont les applications s’étendent à d’autres domaines (Ghys 2010, Zeste de savoir 2016).

Des graphes forment des réseaux qui peuvent être cartographiés. Les nœuds comme les arêtes peuvent être géolocalisés. Des réseaux routiers, de voies navigables et aériennes, des réseaux électriques, Internet et téléphoniques, des chaînes de production assurent le mouvement des personnes, des marchandises, de l’électricité, de l’information et du travail (Graphe 3). 

chaine_fabrication_auto

Graphe 3 : Les trois stades de la fabrication dans une chaîne automobile.

L’informatique

Penser graphe (modèliser) s’avère intéressant dans un certain nombre de situations. Des arbres et des cycles servent de multiples manières au fonctionnement des ordinateurs. Les fichiers sont stockés dans des arborescences, alors que les bases de données sont dites relationnelles, orientées graphe (Neo4J) ou bien délivrent des graphes en réponse à des requêtes du type graphe (triplestore). Des langages balisés tels que HTML ou XML fournissent une information structurée en arbre. Le lien hypertexte rend possible le passage aisé d’un document à un autre dessinant le graphe du web. Des logiciels peuvent évoluer au cours de leur cycle de vie dans le sens d’une diversification pour former un arbre du type cladogramme. Le cas de Linux s’avère représentatif à cet égard (Graphe 4). L’étonnant logiciel Gource génère à partir des logs d’un gestionnaires de code source tel que « git » la vidéo d’un arbre animé, image de l’histoire d’un projet informatique.

linux-timeline

Graphe 4 : La frise chronologique des distributions Linux : http://telecharger-linux.roozeec.fr/2010/11/01/la-timeline-des-distributions-linux/

Gestion des connaissances

genealogie-sciences

Graphe 5 : Une distribution généalogique des sciences et des arts principaux. Encyclopédie de Diderot, 1751.

Penser graphe s’avère de nouveau utile lorsqu’il s’agit de lier et gérer de manière professionnelle de vastes ensembles de connaissances (Graphe 5). Les articles de Wikipédia peuvent être considérés comme des feuilles liées entre elles d’un arbre de connaissance multilingue dont l’anglais s’avère parfois être la langue la mieux renseignée. Toute connaissance peut en théorie être représentée sous forme d’un triplet RDF (Resource Description Framework) dans lequel un sujet est relié à un objet par un prédicat (Graphe 6). Des opérations logiques du type inférence deviennent alors possibles sur de multiples triplets éléments d’un même graphe. Des ontologies écrites elles-mêmes sous forme arborescente avec OWL (Langage d’ontologie du web) formalisent la nature des nœuds (sujet ou objet) et des arêtes (prédicats).

Triplet RDF

Graphe 6 : Un triplet RDF

Dans le domaine des archives, Martin Grandjean (Grandjean 2014) considère que les dossiers, collections et documents d’une archive sont des éléments d’un graphe de connaissance. L’archive devient alors un entrepôt de savoirs dans lequel des sources primaires servent de preuve lors d’études historiques (Leturcq 2016), géographiques ou généalogiques. Cela concerne aussi possiblement les bibliothèques, les musées et les corpus scientifiques. Au-delà des sciences de l’information, la gestion des connaissances concerne en fait de nombreux domaines.

Réseaux sociaux

Qu’en est il de la sociologie ? Tout le monde a bien conscience de faire partie de plusieurs réseaux relationnels définissant des cercles (Graphe 8). Lieu des émotions et affects, de la mémoire et des oublis, du conformisme, de l’imitation et du prestige, de l’apprentissage et de l’imagination, du conscient et de l’inconscient, de l’ordre et du désordre.

mymap_daterange

Graphe 8 : Réseau d’échange de mails par Christopher Baker (plasticien du numérique), 2007

Quelques exemples de réseaux étudiés par les historiens des sciences et les sociologues peuvent être donnés. La «République des Lettres» s’étend de la Renaissance au Siècle des Lumières. Un espace d’échanges épistolaire et de rencontres dans des salons et académies réunit des littéraires et des scientifiques européens autour d’idées de diffusion de la connaissance. A cette époque sont éditées en italien, en allemand, en français, en anglais et en russe les premières encyclopédies. Plus de 150 érudits et savants collaborent ainsi à l’Encyclopédie ou Dictionnaire raisonné des sciences, des arts et des métiers publiée en 1751 par d’Alembert et Diderot.

Moreno propose en 1934 le sociogramme, outil de description graphique des relations interpersonnelles d’enfants réunis en milieu scolaire. Différentes classes d’ages sont ainsi étudiées aboutissant à une représentation graphique, reflet plus ou moins fidèle des structures de groupe telles qu’elles se développent en milieu éducatif (GrandJean 2014).

En 1967,  le psychosociologue Milgram élabore la théorie du « petit monde ». Tout individu habitant les États Unis est relié à un autre par un nombre de relations interpersonnelles inférieur ou égal à 6. Une expérience dans laquelle des personnes se transmettent de main à la main un document est effectuée afin d’éprouver la théorie.

Introduit dans les années 2000, le nombre d’Erdős enfin est un indicateur bibliométrique spécifique des mathématiques. Il évalue la distance d’un auteur dans le cadre de publications conjointes à Paul Erdős, le fameux hongrois aux 1500 articles et plus de 500 collaborations, théoricien lui-même du graphe aléatoire. Structurées en cycles, arbres et réseaux interconnectés, les sociétés apparaissent plus petites que notre intuition ne le laissait penser.

Le développement rapide d’Internet, des réseaux téléphoniques et du commerce en ligne ont focalisé l’intérêt sur la question des communautés sociales, professionnelles et marchandes. Wikipédia, Google, Facebook, Twitter, Amazon, Uber deviennent des objets d’études et le graphe s’impose comme outil de représentation des données, personnes ou bien objets et produits du commerce. Il devient alors possible de visualiser sous forme de graphe les résultats d’une recherche de livres effectuée sur Amazon en employant par exemple le framework javascript VivaGraphJS (Graphe 8).

aws-graph

Graphe 8 : Recherche chez Amazon des livres en anglais relatifs à la visualisation des graphes. Les résultats sont présentés sous forme d’un graphe avec le framework javascript VivaGraphJS d’Andrei Kashcha. Changez de sujet à l’aide du formulaire situé en haut à gauche de la page.

Biologie

Terminons ce rapide tour d’horizon des graphes et réseaux par quelques mots de biologie. Différents appareils et systèmes chez l’homme se prêtent bien à une représentation du type graphe. Citons l’appareil circulatoire, l’appareil respiratoire ou le squelette. Des maladies infectieuses se propagent en suivant la logique des réseaux sociaux (Basileu 2012). En neurologie, transitant par des plaques tournantes modulaires, des réseaux de neurones sont à la base du fonctionnement des systèmes nerveux centraux et périphériques. Les interactions entre protéines peuvent encore être décrites à l’aide de graphes (Gene Cloud). Dans un domaine plus général, Darwin représente dès 1837 l’évolution des espèces à l’aide de graphes (Graphe 9). 

darwin-1837

Graphe 9 : « Transmutation Notebook B » – Juillet 1837, Archives de Cambridge

Art et symbolique

A quoi sert le graphe ? Tout comme le dessin, l’écriture ou une équation mathématique, le graphe est susceptible de fournir une image sommaire du réel, voire de l’imaginaire. Les symboliques du graphe s’avèrent multiples. Le lien, le voyage, le pont, la porte, le passage, le port, la station, la gare présentent en commun les notions d’échange, de relation, de mouvement. En suivant un lien hypertexte ou une route, nous passons d’un monde dans un autre.

Pour l’amateur de philosophie antique romaine, Janus est le dieu associé aux passages et aux portes. Il est représenté avec une double tête dans laquelle deux visages fixant simultanément deux directions opposées. Il préside aux commencements et aux fins, aux choix et au temps. En tant que dieu des transitions, il est invoqué lors des naissances et des échanges. Il se trouve fréquemment associé à Portunus, dieu des portes et des ports dont l’attribut est la clé. Le citoyen romain fait appel à ce dieu mineur lors des transactions commerciales, des voyages et des embarquements.

La bible fait encore référence à l’arbre de la connaissance du bien et du mal (Torrens 2013) et à de nombreux types d’arbres et de buissons. Les grandes religions orientales se basent sur la croyance en de multiples cycles de réincarnations. Arbres et cycles ne sont ils pas deux types de graphes qui permettent de modéliser de manières complémentaire les notions d’espace et de temps ? La symbolique des réseaux apparaît également vaste et ancienne (Musso 1999).

Conclusion

Mais restons pragmatiques, le graphe n’est qu’une technique bien commode pour retracer des passés oubliés, optimiser des trajets, concevoir des objets, envisager des possibles. Des dessins différents permettent de décrire une même réalité. Plusieurs solutions sont possibles. Au dessinateur de trouver quelque chose d’efficace et de plaisant. Pour tracer de beaux arbres, de jolis cycles et de magnifiques réseaux quelques outils bien affûtés sont sans doute nécessaires : un soupçon de théorie, une pointe de scepticisme envers les données, une pratique régulière et de l’expérience. 

Le web rend aisément accessible de nombreux langages informatiques et logiciels spécialisés dans la représentation des graphes et des réseaux. Des logiciels tels que Graphviz ou Gephi peuvent être cités. Comme le montre bien l’exemple des livres Amazon, le graphe facilite l’exploration de grands ensembles de documents. Les arêtes sont la marque des liens qui réunissent des entités qui peuvent être des individus, des organisations ou des objets. Des frameworks javascript tels que VivaGraphJS, D3.js ou SigmaJS peuvent être employés pour visualiser de tels graphes. Des sociétés telles que Linkurious ou Elastic (Graph) proposent ce genre de produits. La présence de forces de répulsion concurrentes des liens confère à un réseau quelconque la capacité d’adopter automatiquement une conformation stable, comparable en quelque sorte à ce qui se passe dans le vivant (Graphe 10).

hb-blckhole

Graphe 10 : Graphe HB/blckhole (2121 noeuds, 6370 arêtes) d’après Andrei Kashcha, avec ViviGraphJS. http://www.yasiv.com/graphs#HB/blckhole

[A suivre…]

Webographie

Pour les curieux

Publicités

, , ,

Poster un commentaire

Affichage d’images en haute résolution avec OpenSeadragon

Publié par Pierre COUCHET dans 5. Données et traitement des données le 29 juillet 2015

« Pour voir loin, il faut y regarder de près » Pierre Dac

OpenSeadragon est une bibliothèque javascript Open Source (Licence BSD) qui facilite la visualisation des détails d’une image haute résolution dans un navigateur en permettant de facilement zoomer et dézoomer sur une zone, avec la souris, avec les doigts (écran tactile), ou bien en cliquant sur un ensemble de boutons dédiés.On passe alors facilement d’une vue générale à l’exploration des détails, de manière simple, fluide, sans latence. Le temps de chargement d’une image lourde devient réduit et la bande passante est ainsi économisée.

De multiples options permettent de finement configurer OpenSeadragon et de l’adapter à différents besoins. Il est notablement possible de visualiser des diaporamas d’images zoomables, de créer des sur-couches mettant en évidence des zones particulières, de comparer sur le même écran deux images haute résolution différentes. Les bibliothèques, les musées et les archives sont les principaux utilisateurs de cette bibliothèque javascript qui sert souvent à afficher des cartes, des manuscrits anciens, des photographies, des œuvres d’art numérisées. Basée sur OpenSeadragon, la visionneuse Mirador (Stanford, Harvard) se distingue. Elle permet par exemple de visualiser simultanément deux images, de naviguer dans des ensembles d’images par l’intermédiaire de vignettes, pour consulter un livre ancien par exemple. Mirador est testé actuellement par Biblissima (Campus Condorcet) qui propose une démonstration intéressante pour les amateurs d’archives et de documents anciens.

La fabrication et l’affichage des images avec OpenSeadragon se fait en deux étapes :

  1. Création d’images zoomables : L’image haute résolution d’origine est transformée automatiquement en une série d’images de petites dimensions appelées « tuiles » (tile en anglais), de forme carrée et localisées dans une arborescence spéciale. Cette transformation peut être faite de manière programmée (C++, PHP, Python, PERL, .NET, Node.js) ou bien à l’aide de logiciels de bureautique libres tels que Deep Zoom Composer (Microsoft) ou bien MapTiler (Klokan Technologies). OpenSeadragon accepte les formats de tuiles DZI et TMS.
  2. Affichage de l’image dans le navigateur : la bibliothèque javascript permet l’affichage des images ainsi créées et ajoute les boutons qui permettent le zoom, le déplacement et le passage plein écran de l’image.

Quelques liens

Démos :

Quelques sites et pages :

Tutoriel

Voici un rapide tutoriel qui va vous permettre de tester OpenSeadragon et de réaliser vous-même des images zoomables. Vous disposez d’un serveur local et d’un PC sous windows (c’est un peu ringard mais ça marche et c’est ce que j’ai souvent sous la main !).

  1. Téléchargez la version zip d’OpenSeadragon ici.
  2. Dézippez le fichier.
  3. Copiez le répertoire « openseadragon-bin-2.0.0 » sur le répertoire du serveur local en le renommant « openseadragon ».
  4. Convertissez votre image haute résolution. Téléchargez Deep Zoom Composer.
  5. Installez Deep Zoom Composer et ouvrez un nouveau projet avec « New Project ».
  6. En haut à droite, ajoutez une image avec « Add Image ».

    dzc-import

    Appuyer sur Import

  7. Cliquez en haut sur « Compose » et glissez l’icone de votre image en bas à gauche dans le panneau du milieu. Peu importe où.

    Appuyez sur Compose

    Appuyez sur Compose

  8. Cliquez en haut sur « Export », entrez à droite le nom du répertoire d’export dans « Name » et le lieu dans « Location » (le répertoire du serveur). Sélectionnez « Export as a composition (single image) ».

    Appuyez sur Export

    Appuyez sur Export

  9. Cliquez sur « Export » en bas à droite.
  10. Cliquez sur « View Image Folder » pour bien repérer la localisation du fichier « dzc_output.xml » à paramétrer dans le code sous le nom « tileSources ».
  11. Le répertoire « dzc_output_files » contient l’image convertie.
  12. Adaptez et insérez le code dans votre page HTML, visualisez dans votre navigateur favori et voilà.

openseadragon

Une version de Virgile imprimée en 1561 et annotée (bibliothèque d'Harvard), visible avec OpenSeadragon

Une version de Virgile imprimée en 1561 et annotée (bibliothèque d’Harvard), visible avec OpenSeadragon/Mirador, Biblissima (Campus Condorcet)

Conclusion

OpenSeadragon est une bibliothèque javascript libre développée et maintenue par Ian Gilman et utilisée entre autres par des organismes du type université, bibliothèque nationale, laboratoire de recherche. Il est tout à fait possible d’envisager l’usage de cette fort intéressante bibliothèque javascript dans une multitude de domaines scientifiques, non seulement en humanités numériques, mais encore en archéologie, agronomie, études sur l’environnement, médecine et biologie (microscopie), physique, astronomie qui exploitent des images en haute résolution. Des services dans le cloud pourraient être créés, susceptibles de faciliter la gestion d’images de ce type, analogue au maintenant disparu Zoom.it de Microsoft. Des modules DZI/OpenSeadragon existent déjà, permettant d’augmenter les possibilités des grands gestionnaires de contenus libres que sont Drupal ou WordPress, des gestionnaires de documents tels que DSpace, Omeka, Pleade.

La technologie libre OpenSeadragon semble prometteuse dans l’objectif de rendre accessible et aisément manipulable des images en très haute résolution. Des technologies libres potentiellement équivalentes sont Leaflet (Open Street map), OpenLayers, PanoJS. D’autres systèmes libres s’avèrent plus difficiles à mettre en œuvre comme IIPImage, digilib. Certains systèmes propriétaires peuvent être cités tels que jQuery Image Viewer, zoomify, ajax-zoom, shockwave-flash (Adobe) ou gigapan (NASA, Google). Des bibliothèques javascript comme StoryMap JS permettent finalement de raconter des histoires avec une image au format gigapixel.

À noter également pour des images de taille standard la possibilité d’utiliser des bibliothèques javascript (jquery ou autre) dédiées au zoom, ou bien un code javascript utilisant les fonctionnalités d’HTML5. La génération de tuiles n’est alors pas nécessaire.

, , , ,

Poster un commentaire