Jean-Pascal M.

La meilleure façon de ne pas avancer est de suivre une idée fixe (J. Prévert)

Posts Tagged ‘infographie’

Cartographier Wikipedia avec Processing

Posted by Jean-Pascal sur 2 juin 2016

Dans cet article, je propose une approche originale pour aborder un nouveau domaine tel que l’Art Génératif.

Que signifie l’expression « Art Génératif » ? Faut-il s’en tenir à la définition, où avant de plonger en apnée dans ce domaine, faire un détour par les termes ou expressions proches ? Je pense par exemple à Design Génératif, Art Algorithmique, Computer Art, Infographie, Data Visualization…

Quelle méthode utiliser pour trouver la relation entre ces termes, et trouver par exemple les artistes, les méthodes ou les logiciels de référence de ce domaine ?

Hélas, le web est un océan dans lequel nous, minuscules internautes, naviguons à vue, inlassablement, toujours fasciné par son infinité.

Utilisez par exemple The Internet Map (http://internet-map.net/). Cette carte positionne les 350.000 sites les plus visités au monde en 2011. Ceux-ci sont figurés par des disques  qui s’attirent et se repoussent subtilement, comme si les URLs qui les unissent étaient des ressorts. L’exemple qui suit montre bien la cohérence des liens associés au site lemonde.fr :

The Interne Map - le monde

Mais cette carte a plusieurs défauts. L’interactivité est limitée, les liens ne sont pas montrés, les disques représentent des sites et les informations sont bien trop nombreuses !

Alors comment utiliser le web pour découvrir un domaine nouveau ? Pour ma part, le premier compagnon de toutes mes recherches est Wikipédia. A la différence du web en général, Wikipédia offre une synthèse structurée et encyclopédique des connaissances humaines. Structurée vous dites ? Oui, les pages sont reliées entre elles grâce à des liens typés, et elles sont même rangées dans des catégories assez générales !

clusterball

source Infosthetics.com  (site génial)

Heureusement, le language Processing va combler ces manques grâce à un code fourni par les auteurs de Generative Design (http://www.generative-gestaltung.de) dont j’ai parlé dans l’article précédent.

Les codes sources sont librement accessibles en ligne et nous allons utiliser un exemple fournit à la fin du livre dans le chapitre M 6.4.1 Structures de données dynamiques, placement par champ de force.

Voici une vidéo montrant le code en fonctionnement. C’est juste magique !

M_6_4_01_TOOL from Generative Design on Vimeo.

Hélas, j’ai rapidement buté sur une des limites de l’application : je souhaitais l’utiliser pour comprendre le domaine du design génératif, mais en cliquant à gauche et à droite, je n’arrivais pas à trouver les liens qui relient les termes de base entre eux. On s’y perd très vite !

Comment faire pour trouver le(s) chemin(s) le(s) plus court(s) qui les relie(nt), deux articles Wikipedia ? Comment apréhender rapidement le contexte autour d’un ou plusieurs articles ?

Comment obtenir, par exemple, à partir des termes « Infographics » et « Generative Art » le chemin suivant (il existe) :

160531_162010

Je ne voulais pas pour autant coder une heuristique de recherche de chemins, mais plutôt m’appuyer sur la représentation très visuelle offerte par le code développé par Generative Design, et sur nos capacités naturelle d’exploration.

J’ai donc apporté plusieurs modifications au code afin de pouvoir :

  1. Initialiser le graph avec plusieurs termes
  2. Demander l’ouverture de tous les nœuds du graphe d’une pression de touche (touche E : « expansion »)
  3. Demander la suppression de tous les nœuds n’ayant moins de deux liens (touche C : « Compression »)

Reprenons l’exemple des connexions entre les articles « Generative Art » et « Infographics » ?

J’ai initialisé le programme avec ces deux valeurs, en modifiant le code l.67 :

String [] startKeywords = {"Infographics", "Generative Art "};

J’ai ensuite utilisé le menu (touche “m”) et réglé le paramètre “Result Count” à 34.

J’ai ensuite demandé l’expansion du graphe : Touche « E ». On obtient un graphe à 78 noeuds.

Comme il n’y avait pas de lien commun, j’ai à nouveau pressé la touche E, puis une troisième fois. Le nombre de nœuds augmente considérablement pour remplir tout l’écran !

160531_132806

C’est beau, mais peu exploitable, alors j’ai ensuite pressé « C » afin de supprimer tous les nœuds ayant moins de 2 connexions.

160531_133215

Le résultat est bien plus parlant. Il est possible de commencer à travailler sur cette map.

On constate l’apparition de grands domaines, tels que les statistiques avec leurs représentations graphiques (Histogram, Boxplot, Barchart…), les probabilités, les groupes de données (séries temporelles), les systèmes d’information géographiques (SIG), bref des concepts plus ou moins lointains mais inspirants. Je supprime néanmoins ces nœuds de la carte, et je presse « C » pour nettoyer.

160531_134352

On trouve aussi beaucoup de noms propres ou de lieux tels que le Victoria and Albert Museum, que je supprime aussi de la carte, mais que j’ajoute dans ma liste des musés à visiter :). On trouve aussi des termes comme les « dark data ». Voici un sujet pas inintéressant qui mériterait d’être cartographié… On trouve des nœuds faisant le carrefour entre des concepts, sans valeur ajoutée, tels que « List of engineering branches », ou « International Standard Book Number ». Je les supprime et je presse « C ».

De nombreux noms d’artistes sont maintenant bien visibles. Plus proches du nœud « Art », on trouve Miguel Chevalier, Pascal Dombis, Sonia Landis Sheridan, Frank Popper, Joseph Nechvatal… J’accède à leurs articles Wikipepia (double clic droit) pour les découvrir, c’est si simple.

160531_134352

Plus proche du nœud « Infographics » : Charles Joseph Minard, Nigel Holmes, Thomas A. Defanti, Jacques Bertin qui semble composer un groupe, mais aussi James Joseph Sylvester

160531_135602

J’ai ensuite retiré ces noms pour obtenir une carte assez intéressante du domaine.

160531_140821

J’ai enfin retiré quelques notions trop vagues (timeline, Latin) ainsi que les noms propres pour ne trouver que les domaines parlants et une carte simplifiée.

160531_150547

Je m’arrête ici dans cette recherche. Cette navigation m’a beaucoup appris, car j’ai parcouru plusieurs dizaines d’articles wikipedia (double clic-droit).

Le code pour réaliser cette navigation est disponible en téléchargement. Pour l’utiliser, il suffit de le télécharger, de le dézipper et de l’ouvrir avec Processing 3+. N’hésitez pas à changer les paramètres d’initialisation pour mettre vos propres termes !

 

Consultez tous les articles sur le Design Génératif.

 

Posted in Design, Design Génératif, Interaction Homme Machine | Tagué: , , , , , , | Leave a Comment »