Ludovic Carré                                                                                                Janvier 2018

Maxime Deloche

Vincent Lefoulon

Projet Open Data

Rapport

1. Source des données

Notre application utilise des données disponibles sur Kaggle qui portent sur les TED Talks de janvier 1972 à juillet 2017.

Kaggle est une plateforme principalement connue pour héberger des compétitions de machine learning. Des entreprises proposent un jeu de données ainsi qu’une problématique, les utilisateurs ont un certain temps défini par l’entreprise pour résoudre la problématique en atteignant le meilleur score du classement des utilisateurs.

On trouve également sur le site de Kaggle des kernels, projets permettant de résoudre une problématique de machine learning ou d’analyser un jeu de données, ainsi que des jeux de données qui sont régulièrement mis à jour, analysés et commentés par les utilisateurs.

Notre jeu de données est disponible ici . I l contient à ce jour 2550 lignes et 17 colonnes. Chaque ligne correspond à une conférence et il est possible de voir une description des colonnes sur le lien précédent dans la rubrique “Column Metadata”.

2. Traitements opérés

1. Prétraitement des données

1. Conversion des tags en thèmes

Chaque talk est, dans le jeu de données original, associé à une liste de tags décrivant son contenu. Etant donné la grande diversité dans les tags (environ 420), la plupart des tags étaient sous-représentés en nombre de vidéos. De plus, cela rendait la visualisation délicate car beaucoup trop chargée.

Nous avons donc choisi de les regrouper par thème, et en avons défini 10 :

Nous avons enfin associé chaque tag à un ou plusieurs thèmes. Par exemple :

Ces associations sont stockées dans le fichier data/tags_to_themes.json . Certains tags n’ont pas été associés (par exemple ‘TEDx’), car ils n’indiquaient rien sur le contenu du talk : ces tags sont par conséquent simplement ignorés.

2. Regroupement par semestre

        Nous avons choisi de regrouper nos données par semestre : en étudiant les données, cela nous a paru être un bon compromis entre la précision des visualisations et les classes suffisamment fournies.

3. Nettoyage

Nous avons supprimé les données datant d’avant 2004 car tous les semestres n’avaient pas de talks : ces données nous paraissaient trop inégales et “éparpillées” pour être réellement exploitables. Les talks ne comportant que des tags non traduits ne sont pas considérés.

4. Filtrage des données pertinentes

Par la suite, nous avons effectué   divers traitements  sur nos données (cf. plus bas)   et avons créé un fichier de données par graphe. Cela permet d’alléger la charge du client en effectuant tous les calculs en amont et en réduisant la taille des données envoyées sur le réseau, puisqu’on ne conserve que ce qui est pertinent pour le graphe en question.

Ces fichiers sont au format JSON (format classique d’échange de données et très bien intégré avec d3.js). Ils sont générés à partir des données brutes ( data/raw.csv ) via des scripts (présents dans le dossier scripts) et se trouvent dans le dossier data.

2. Visualisation 1  : distribution des thèmes à un instant T

Cette visualisation permet de comparer différents thèmes à un instant T. On peut ainsi constater quel thème est le plus populaire en terme de quantité de conférences par rapport aux autres. On peut également observer l’évolution du classement des thèmes au cours du temps.

        Le prétraitement consiste simplement pour chaque date T à générer la liste des couples (thème, nombre de talks). Les données sont présentes dans le fichier data/ thematic_distribution.json .

3. Visualisation 2 : évolution d’un thème au cours du temps

Cette visualisation permet de comparer la quantité de conférences pour un ensemble de thèmes sélectionnés dans une liste. On peut ainsi rapidement voir l’évolution des thèmes choisis de 2004 à 2017. Il est possible de choisir entre une visualisation affichant le nombre cumulé de conférences par semestre (cumulative) ou le nombre ponctuel de conférence par semestre.

Le prétraitement consiste pour chaque thème à lister les couples (date, nombre de talks). Ces couples sont complétés avec le nombre de talks cumulé afin de pouvoir basculer de vue rapidement.

4. Visualisation 3 : thèmes les plus populaires

Cette visualisation permet de comparer la popularité des thèmes (nombres de vues et commentaires moyens pour une date donnée). On peut ainsi voir certains thèmes devenir de plus en plus populaires mais également engendrer de plus en plus de réactions, la religion par exemple. Le rayon de chaque cercle est proportionnel au nombre de traductions de la conférence. Nous voulions étudier si cette valeur influait sur la popularité d’un thème. Il aurait également été possible de considérer d’autres critères, tels que la durée des talks.

Nous avons choisi de considérer les nombres de vues et de commentaires cumulés. Cela permet d’introduire une continuité dans les données, à l’instar de la visualisation revenu / espérance de vie de Gapminder. Ce choix permet également d’avoir une échelle fixe sur les axes x et y et ainsi plus facilement observer l’évolution des thèmes puisque seule la position du thème change.

Le prétraitement consiste à calculer les valeurs extrêmes pour chaque axe ainsi que déterminer pour chaque date la liste des triplets (thème, commentaires, vues). Pour un semestre donné, le nombre de vues (ou de commentaires) d’un thème est la moyenne des nombres de vues de chaque talk de ce thème.

3. Architecture

        Le code Javascript se situe dans le dossier src/js . Un script principal ( main.js ) récupère toutes les données via des requêtes AJAX au dépôt GitHub du projet puis génère les graphes. Ce script traite également les événements sur les éléments HTML et permet donc de les faire interagir.

        Chaque graphe se voit associer un fichier JS et, par souci de clarté, tous ont la même structure : à l’appel de la fonction, on initialise les éléments du graphe (tels que les axes) puis on retourne un objet comportant des méthodes pour mettre à jour le graphe (affichage de nouvelles données, sélection d’un élément, etc.).

4. Choix des technologies

Nous avons utilisé la bibliothèque Javascript d3.js open-source. Basée sur les standards du web (comme SVG), l’outil est supporté par une large communauté et de nombreux exemples sont disponibles.

Les possibilités offertes sont très grandes, ce qui en fait un choix privilégié. Toutefois, les concepts sous-jacents requièrent un peu d’apprentissage (notamment quand on souhaite faire des animations).

5. Améliorations

Nous envisageons plusieurs pistes d’amélioration de notre application :

• Rendre le nom des thèmes plus parlant, peut-être en ajoutant des sous-thèmes pour que l’utilisateur ait une idée intuitive et précise du genre de conférences que l’on va retrouver dans cette catégorie (par exemple, “nature” est assez générique et l’utilisateur peut se demander s’il est plus question d’écologie ou d’étude de la faune et la flore).
• Ajouter une légende afin que l’utilisateur comprenne tout de suite que le rayon du cercle représente le nombre de traductions de la conférence (ou utiliser un autre moyen pour le faire comprendre).
• Ajouter la possibilité de fixer l’axe des y de la visualisation 1. Cela permettrait de voir évoluer le classement des thèmes mais permettrait également d’avoir une idée du mérite qu’un thème possède à être premier. Il permettrait également de placer chacun des classements dans un contexte général et ainsi mettre en perspective les résultats. Par exemple, un thème peut être premier deux semestres consécutifs mais le premier avec 2 talks tandis qu’il lui en aura fallu 100 pour le second.
• Ajouter une trace lors de l’animation de la visualisation pour les thèmes sélectionnés, cela permet ainsi d’afficher à l’écran l’historique de chacun des thèmes pendant la période animée.
• Ajouter une possibilité de drag and drop pour sélectionner un thème sur la visualisation 2 depuis les visualisations 1 et 3.