Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT...

20
Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) [email protected]

Transcript of Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT...

Page 1: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

Graphe pour Python :

Édition et navigation

21 Février 2012

Mahdi Miled – ENS Cachan – ENSIT (Tunis)

[email protected]

Page 2: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

2 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Introduction

• Multiplicité & développement des sources de contenus• Web 2.0 : consommateurs -> contributeurs Abondance de ressources (num.) d’apprentissage

2 questions :• Quels mécanismes d'aide à l'accès et à la navigation

devant cette abondance?• Comment faciliter les opérations de mise à jour et

d'édition des contributeurs ?

Page 3: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

3 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Environnements d'accès aux ressources

Où trouve-t-on les ressources et comment évoluent-elles ?

Plateformes d'apprentissage en ligne (LMS)

Exemples : Claroline, Blackboard, Moodle,…Un cours/module – Un prof – Un groupe d’apprenants-> Une seule séquence objectif et public précis

Entrepôts de ressources et environnements généralistes

Exemples : Connexions (permet la co-édition des contenus), ARIADNE, MERLOT, LORNET, …Dans une moindre mesure : Khanacademy

Page 4: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

4 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Environnements d'accès aux ressources

Plateformes dédiées à un domaine spécifique

• Java Learning Machine (M. Quinson) & IOI : Séquences d’exercices• PythonLearn : environnement pour l'apprentissage du langage Python

= Livre augmenté (chapitres + ressources)

Page 5: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

5 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

De l’existant vers ce que l’on veut construire

Existant (à explorer encore…) :• LOR : navigation (via un graphe) : Klerkx et al. (2004, 2005)= ressources hétérogènes enrichies de métadonnées• LMS : 1 cours – Un public = Une séquence spécifique• Livre : plus général, mais très (trop) dense• Livre augmenté (ex: pythonlearn) : linéaire peu réutilisable • JLM : Public & Objectif spécifique : exercices - PBL • Java’s Cool : à voir…

L’environnement/ressource envisagé :• Homogène – grain fin – cours & exercices – adaptable • Spectre : Livre augmenté + activités + Manuel de référence• Utilisation des traces pour influencer la navigation• Public : débutant et avancés

Page 6: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

6 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Visualisation et navigation dans les ressources

En EIAH

Le champ de la visualisation de l’information a déjà été introduit dans les EIAH :• sur des questions de visualisation des relations entre les objets

d’apprentissage (Catteau et al. 2007)• sur l’aide à l’accès et la recherche de ressources à partir de dépôts d'objets

d'apprentissage (Klerkx et al. 2004).

Limites des approches existantes

Certains travaux soulignent les limites de l'accès et la recherche des ressources par des formulaires (Klerxk et al. 2005) et proposent des stratégies basées sur une visualisation et une navigation interactive (exemples : treemaps, hypertree pour ARIADNE... )Ce genre de visualisation interactive peut aider l'utilisateur à choisir la ressource et à mieux naviguer dans un graphe de ressources sans forcément avoir besoin de connaître leur intitulé pour les exploiter.

Page 7: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

8 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Zoom sur la visualisation des graphes

• Grand graphe (Nb nœuds > 1000) :

• Unités épistémiques de petite taille (bien délimités)• Relation = pré-requis

• Adapter la navigation

• au profil de l’apprenant : Connaissances –> Objectif • En prenant en compte les traces des précédents

Etude des outils de visualisation des graphes

Page 8: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

8 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Visualisation et navigation dans les graphes

Les outils de visualisation interactive de graphes :

Dans le but de mettre en œuvre nos éléments de réflexion, nous avons recensé et testé divers outils libres de représentation interactive des graphes. On peut citer :Image_Graphviz; JS Graph It, Flare, Canviz, NodeBox, Prefuse, Arbor, JIT

Notre choix parmi les bibliothèques libres : JIT

JIT = Javascript Infovis Toolkit• Riches types de visualisations et • Bonnes performances (technologie cliente légère : Javascript). • Format JSON pour la représentation des données. • Plusieurs types d'algorithmes de visualisation

(ForceDirected, Rgraph, Treemap, HyperTree, …)

Page 9: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

9 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Techniques de visualisation des graphes

La visualisation interactive des graphes peut résoudre certains problèmes d'accès et de

présentation (surtout si le graphe devient volumineux)

Techniques de navigation et d'interaction (Hermann, 2000) :

• déplacement panoramique (pan)

• opérations d’agrandissement/réduction(zoom),

• focalisation sur une zone de prédilection ( focus sur une région ou un sous-

ensemble de nœuds)

Types de visualisations :

• ForceDirected :les lois des forces : tous les nœuds sont en interaction selon la loi

physique des forces. La visualisation peut être statique ou animée, le mouvement

permettant de mieux appréhender les dépendances complexes,

• Rgraph : les graphes radiaux (Rgraph)

• HyperTree : les arbres hyperboliques

• Treemaps (les arbres à tiroirs)

Page 10: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

10 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Utilisation de l'outil JIT et visualisations

L'ensemble des unités d'apprentissage inter reliées peut se formaliser sous la forme

d'un graphe connexe orienté acyclique DAG. Une fonctionnalité a été ajoutée au

visualiseur ForceDirected initial pour pouvoir cacher/afficher des liens/nœuds

ForceDirected

Page 11: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

11 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Utilisation de l'outil JIT et visualisations

L'intérêt de l’HyperTree et de pouvoir donner une allure générale du graphe des

unités tout en réduisant certaines régions. Il est ainsi possible de sélectionner des

sous-régions pour avoir une vue plus détaillée.

HyperTree

Page 12: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

12 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Utilisation de l'outil JIT et visualisations

La visualisation à l'aide des graphes radiaux (Rgraph) permet d'introduire une

représentation à niveaux. La structure entière n'est pas visible puisqu'il est

possible de sélectionner des sous-régions pour avoir plus de détails.

Rgraph

Page 13: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

13 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Test de performance

Méthodologie et protocole :

1. Construction aléatoire de 10 graphes G (n, p) à l'aide de Gephi n = le nombre de sommets et p = la probabilité de connexion,

2. Production de fichiers de données contenant des listes d'adjacence, 3. Transformation des listes d'adjacence au format JSON, 4. Exécution de l'algorithme et mesure du temps d’exécution

10 graphes testés (x 10 exécutions/graphe/Algorithme, soit 300 exécutions) et comparés sur : HyperTree , ForceDirected et RGraph :

• n =10 et p=0,5; • n = {50,100} et p =0,05 • n = {224, 500, 1000} et p = 0,01 • n = {2000, 3000, 4000, 5000} et p = 0,001

Page 14: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

14 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Test de performance

Résultats : Comparaison des 3 types algorithmes pour n {2000, 3000, 4000, 5000} et p = 0,001

Page 15: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

15 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Test de performance

Passage à l’échelle pour l’algorithme « Force Directed » ?

Page 16: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

16 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Test de performance

Passage à l’échelle pour l’algorithme « Hypertree » ?

Page 17: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

17 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Test de performance

Passage à l’échelle pour l’algorithme « Rgraph » ?

Page 18: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

18 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Conclusion

Pour la navigation (des apprenants) :• Force Directed : Temps d’éxécution dépasse 30 minutes pour N=4000 !

Utilisable seulement pour N < 100.

Pour un sous-graph (parcours guidé) ?

• Rgraph et Hypertree supportent mieux le passage à l’échelle,

Pour le graph complet (graphe des matières, navigation libre) ?

Pour l’édition et la mise à jour (des enseignants/concepteurs) :• Edition intra graphe : Force Directed :

Édition (fine) des dépendances

• Edition inter graphe : HyperTree/Rgraph :

Fusionner des sous-graphes

Scinder un graphe en plusieurs sous-graphes

Page 19: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

19 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Perspectives

• Intégration de JIT dans notre prototype pour accès et édition des ressources

• Construction d’un modèle apprenant :• Connaissances, objectifs• Parcours déjà effectués, unités acquises…

• Utilisation des traces des autres apprenants• Parcours gagnants (encouragés)• Parcours conduisant à un échec (à éviter)

=> pour une évolution dynamique du graphe=> comme feedback au concepteur…

• Expérimentation • Evaluer les parcours d’apprenants • Ajuster le comportement des modifications (visuelles)• Quel public ? Quels moyens ? Quelles traces ?

Page 20: Graphe pour Python : Édition et navigation 21 Février 2012 Mahdi Miled – ENS Cachan – ENSIT (Tunis) Mahdi.Miled@ens-cachan.fr.

20 / 2021/02/2012Mahdi Miled

Graphe pour Python : Édition et navigation (présenté par Christophe Reffay)

Journée apprentissage de la programmation

Références

• (Catteau et al., 2007) Catteau, O., Vidal, P. & Broisin, J. (2007). A 3D Representation of Relationships between Learning Objects. In C. Montgomerie & J. Seale (Eds.), Proceedings of World Conference on Educational Multimedia, Hypermedia and Telecommunications.

• (Herman, 2000) Herman, I., Melancon, G., & Marshall, M. S. (2000). Graph visualization and navigation in information visualization: A survey. IEEE Transaction on visualization and computer graphics, 6(1), 24–43.

• (Klerkx et al., 2004) Klerkx, J., Duval, E., & Meire, M. (2004). Using information visualization for accessing learning object repositories. Eighth International Conference on Information Visualisation. April 2004. (p. 465–470).

• (Klerkx et al., 2005) Klerkx, J., Meire, M., Ternier, S., Verbert, K., & Duval, E. (2005). Information visualisation: towards an extensible framework for accessing learning object repositories. Proceedings of World Conference on Educational Multimedia, Hypermedia & Telecommunications (p. 4281–4287).