Billet

Un graphe dynamique et interactif avec d3.js

Billet publié le 03/11/2012

R est un logiciel formidable. Mais d’autres outils sont plus adaptés pour une présentation sur internet. Il existe un ensemble d’instructions appelées d3.js, qui permettent en quelques instructions de mettre en ligne des graphiques interactifs. Pour deux exemples, voir ce réseau de sociologues et ce réseau d’écrivains.

Voici comment faire la même chose, chez vous.
Ce “tutoriel” nécessite quelques connaissances de R et de html.

Le point de départ :
- vous avez créé un graphe, dans R, avec le package igraph. Ce graphe se nomme g2. Il est constitué de “vertices” (des individus par exemple) et de “edges” (des liens entre individus). À chaque individu, vous avez associé un “groupe” : V(g2)$group (il peut y avoir plein de groupes, numérotez-les)
- il s’agit maintenant d’exporter ce graphe (ou une partie), dans un format que d3.js peut comprendre… et d3.js comprend surtout le .json
- le code suivant va enregistrer un fichier .json utilisable par d3.js, en se servant du package RJSONIO

library(RJSONIO)
 
#creation de la partie qui renseigne les "nodes"
temp<-cbind(V(g2)$name,V(g2)$group)
colnames(temp)<-c("name","group")
js1<-toJSON(temp)
#creation de la partie qui renseigne les "liens"
write.graph(g2,"Desktop/edgelist.csv",format="edgelist")
edges<-read.csv("Desktop/edgelist.csv",sep=" ",header=F)
colnames(edges)<-c("source","target")
edges<-as.matrix(edges)
js2<-toJSON(edges)
#concatenation des deux parties
reseau<-paste('{"nodes":',js1,',"links":',js2,'}',sep="")
write(reseau,file="Desktop/reseau.json")

Created by Pretty R at inside-R.org

Ce fichier .json a normalement la structure suivante :

{
"nodes":[
{"name":"Nom1","group":4},
...
{"name":"Nom3","group":3}],
"links":[
{"source":0,"target":1},
...
{"source":138,"target":126}]
}

Ensuite : téléchargez ce fichier reseau.txt, enregistrez le dans le même répertoire que celui dans lequel est enregistré reseau.json. Changez l’extension (remplacez .txt par .html).

4 commentaires

Un commentaire par Joël (04/11/2012 à 2:39)

Il semblerait que les gens de Rstudio soient en train de travailler sur des outils pour permettre la création d’interfaces web interactives avec R (souce : http://yihui.name/en/2012/10/visiting/). Par ailleurs, j’ai lu quelque part que Hadley Wickham (le créateur de ggplot2, et qui travaille maintenant pour Rstudio) est en train de réécrire ggplot2 en d3.js. Ça va donc probablement bouger rapidement dans ce domaine !

Un commentaire par Niax (29/11/2012 à 19:36)

Bonjour Monsieur Coulmont, j’aprécie la découverte de d3.js, savez-vous si le format JSON est géré par le logiciel Gephi (un logiciel assez génial qui fait figure de photoshop pour les graphe). Savez vous si il est possible simplement d’utiliser d3.js pour exporter du gephi ?

Un commentaire par Baptiste Coulmont (29/11/2012 à 20:27)

>Niax : je ne connais pas vraiment Gephi, désolé… mais d3.js ne fait que visualiser des données, cela ne permet pas de transformer leur format.

Un commentaire par Joël (04/01/2013 à 13:09)

@Niax : Gephi a bien un plugin pour exporter en JSON : https://gephi.org/plugins/json-exporter/