Partage
Partager via Facebook
Partager via Messenger
Partager via Twitter
Partager via LinkedIn
Partager via What'sapp
Partager via courriel
PDF
6 outils pour transformer ses données en graphiques et en cartes (1ère partie)
Pour afficher des données sous forme de graphiques et de cartes, il existe plusieurs outils et bibliothèques JavaScript permettant diverses transformations. D'un abord plus ou moins facile selon les cas. lemondeinformatique Edition du 08/03/2013
Si vous avez besoin de reformater des données pour les utiliser dans une autre application, pour les situer sur une représentation cartographique ou les transformer en graphique web interactif, certaines bibliothèques JavaScript ou langages peuvent aider à les traduire dans un format adapté à leur analyse ou à leur publication en ligne. Sharon Machlis, de Computerworld, en a sélectionné six. Voici les trois premiers : Cascading Tree Sheets, Data-Driven Documents (D3) et Dataset.
1 - Cascading Tree Sheets
Appliqué aux données structurées, Cascading Tree Sheets (CTS) fait la même chose que CSS (Cascading Style Sheets) pour l'affichage HTML : il aide à définir un style pour des présentations complexes. Il s'agit d'un langage simplifié servant à décrire une page qui ne peut pas être représentée par CSS. Il indique la façon dont les fragments HTML doivent s'associer avec d'autres ou les remplacer. Il permet de réutiliser des contenus. Avec des widgets apportant du code CTS pour réaliser des cartes ou des graphiques, les utilisateurs peuvent créer des visualisations en HTML, sans avoir de connaissances en JavaScript.
Intérêt : Avec une demi-douzaine de widgets, permettant de situer un lieu sur une carte Google, de dresser des histogrammes ou des représentations par cercles, il suffira de coder quelques tables et listes en HTML pour générer d'intéressantes visualisations en ligne.
Inconvénients : Les options de visualisation sont assez limitées pour l'instant, par exemple, la carte statistique par zones géographiques (carte choroplèthe) ne propose qu'une représentation des Etats-Unis. Mais le projet n'en est qu'à ses débuts, il n'est donc pas très étoffé encore.
Niveau de compétences : débutant
En savoir plus : des exemples et des échantillons de code sur Treesheets.org
Si vous avez besoin de reformater des données pour les utiliser dans une autre application, pour les situer sur une représentation cartographique ou les transformer en graphique web interactif, certaines bibliothèques JavaScript ou langages peuvent aider à les traduire dans un format adapté à leur analyse ou à leur publication en ligne. Sharon Machlis, de Computerworld, en a sélectionné six. Voici les trois premiers : Cascading Tree Sheets, Data-Driven Documents (D3) et Dataset.
1 - Cascading Tree Sheets
Appliqué aux données structurées, Cascading Tree Sheets (CTS) fait la même chose que CSS (Cascading Style Sheets) pour l'affichage HTML : il aide à définir un style pour des présentations complexes. Il s'agit d'un langage simplifié servant à décrire une page qui ne peut pas être représentée par CSS. Il indique la façon dont les fragments HTML doivent s'associer avec d'autres ou les remplacer. Il permet de réutiliser des contenus. Avec des widgets apportant du code CTS pour réaliser des cartes ou des graphiques, les utilisateurs peuvent créer des visualisations en HTML, sans avoir de connaissances en JavaScript.
Intérêt : Avec une demi-douzaine de widgets, permettant de situer un lieu sur une carte Google, de dresser des histogrammes ou des représentations par cercles, il suffira de coder quelques tables et listes en HTML pour générer d'intéressantes visualisations en ligne.
Inconvénients : Les options de visualisation sont assez limitées pour l'instant, par exemple, la carte statistique par zones géographiques (carte choroplèthe) ne propose qu'une représentation des Etats-Unis. Mais le projet n'en est qu'à ses débuts, il n'est donc pas très étoffé encore.
Niveau de compétences : débutant
En savoir plus : des exemples et des échantillons de code sur Treesheets.org
2 -Data-Driven Documents (D3)
Cette bibliothèque fournit des fonctions permettant de relier des données à une partie de document HTML. Il est alors possible de transformer ce document en fonction des données. Ce n'est pas une bibliothèque comme Google Chart Tools qui propose un certain nombre de gabarits à personnaliser. Il s'agit davantage d'un langage spécialisé qui facilite la création de designs à partir d'un canvas HTML.
Intérêt : Les dessinateurs inspirés pourront créer à peu près tout ce que leur imagination leur inspirera et réaliser ainsi tous les designs interactifs qu'ils veulent. D3 utilise jQuery et des selecteurs de type CSS pour retrouver des éléments dans le document HTML (plus précisément, dans le DOM, Document Object Model) et les transformer. Ce qui, pour certains, semble plus simple que passer directement par JavaScript. Différents formats de données sont supportés incluant XML et CSV, de même que JSON, ainsi qu'une fonctionnalité pour parcourir facilement les jeux de données. Inconvénients : Si cette bibliothèque est puissante, son apprentissage est plus long comparé à d'autres. Et puisqu'elle demande de partir d'une page blanche, il faut à la fois savoir coder et dessiner pour créer quelque chose de valable. A moins qu'il s'agisse de transformer du code « emprunté » ailleurs.
Niveau de compétences : expert
Exemples : Le site du New York Times fournit deux exemples très intéressants, l'un illustrant l'entrée en bourse des grands acteurs des technologies de l'information et l'autre sur lespropositions de budget de Barack Obama pour 2013.
En savoir plus : la page de tutorial D3 propose une longue liste de ressources, dont cellesproposées par Scott Murray , qui présente les bases du livre Interactive Data Visualization for the Web .
Cette bibliothèque fournit des fonctions permettant de relier des données à une partie de document HTML. Il est alors possible de transformer ce document en fonction des données. Ce n'est pas une bibliothèque comme Google Chart Tools qui propose un certain nombre de gabarits à personnaliser. Il s'agit davantage d'un langage spécialisé qui facilite la création de designs à partir d'un canvas HTML.
Intérêt : Les dessinateurs inspirés pourront créer à peu près tout ce que leur imagination leur inspirera et réaliser ainsi tous les designs interactifs qu'ils veulent. D3 utilise jQuery et des selecteurs de type CSS pour retrouver des éléments dans le document HTML (plus précisément, dans le DOM, Document Object Model) et les transformer. Ce qui, pour certains, semble plus simple que passer directement par JavaScript. Différents formats de données sont supportés incluant XML et CSV, de même que JSON, ainsi qu'une fonctionnalité pour parcourir facilement les jeux de données. Inconvénients : Si cette bibliothèque est puissante, son apprentissage est plus long comparé à d'autres. Et puisqu'elle demande de partir d'une page blanche, il faut à la fois savoir coder et dessiner pour créer quelque chose de valable. A moins qu'il s'agisse de transformer du code « emprunté » ailleurs.
Niveau de compétences : expert
Exemples : Le site du New York Times fournit deux exemples très intéressants, l'un illustrant l'entrée en bourse des grands acteurs des technologies de l'information et l'autre sur lespropositions de budget de Barack Obama pour 2013.
En savoir plus : la page de tutorial D3 propose une longue liste de ressources, dont cellesproposées par Scott Murray , qui présente les bases du livre Interactive Data Visualization for the Web .
3 - Dataset
Présentée comme une bibliothèque de transformation et de gestion de données qui seront utilisées dans d'autres applications, Dataset aide à leur manipulation en simplifiant des étapes comme le chargement, l'analyse syntaxique (parsing), le classement, les requêtes et les manipulations à partir de différentes sources.
Intérêt : Dataset fait partie du projet Open Source Miso, soutenu par plusieurs organisations qui comprennent l'importance de disposer d'outils fiables et de pouvoir faire évoluer ses ressources (on y trouve le quotidien d'informations britannique The Guardian). Le projet est également soutenu par la fondation Bill et Melinda Gates.
Inconvénients : Les nombreuses capacités de cette bibliothèque, concentrée sur la manipulation de données (extraction/chargement notamment) implique d'apprendre un certain nombre de fonctions pour en tirer pleinement parti. Il faudra donc sans doute d'autres applications pour effectuer des visualisations et des analyses avancées.
Niveau de compétences : utilisateur avancé ou expert
Exemples : un graphique « tree map » sur les dépenses de l'administration britannique , qui utilise aussi D3 et Backbone.js, et un autre graphique combiné cette fois à Highcharts .
En savoir plus : Pour démarrer, on peut se référer aux tutoriaux disponibles sur le site Dataset . On trouve aussi une courte étude de cas utilisant Dataset et Google Spreadsheets dans des applications sur le site NewsBeast Labs du développeur Michael Keller .
La 2ème partie de « 6 bibliothèques pour transformer ses données en graphiques et en cartes » sera publiée dans quelques jours.
Présentée comme une bibliothèque de transformation et de gestion de données qui seront utilisées dans d'autres applications, Dataset aide à leur manipulation en simplifiant des étapes comme le chargement, l'analyse syntaxique (parsing), le classement, les requêtes et les manipulations à partir de différentes sources.
Intérêt : Dataset fait partie du projet Open Source Miso, soutenu par plusieurs organisations qui comprennent l'importance de disposer d'outils fiables et de pouvoir faire évoluer ses ressources (on y trouve le quotidien d'informations britannique The Guardian). Le projet est également soutenu par la fondation Bill et Melinda Gates.
Inconvénients : Les nombreuses capacités de cette bibliothèque, concentrée sur la manipulation de données (extraction/chargement notamment) implique d'apprendre un certain nombre de fonctions pour en tirer pleinement parti. Il faudra donc sans doute d'autres applications pour effectuer des visualisations et des analyses avancées.
Niveau de compétences : utilisateur avancé ou expert
Exemples : un graphique « tree map » sur les dépenses de l'administration britannique , qui utilise aussi D3 et Backbone.js, et un autre graphique combiné cette fois à Highcharts .
En savoir plus : Pour démarrer, on peut se référer aux tutoriaux disponibles sur le site Dataset . On trouve aussi une courte étude de cas utilisant Dataset et Google Spreadsheets dans des applications sur le site NewsBeast Labs du développeur Michael Keller .
La 2ème partie de « 6 bibliothèques pour transformer ses données en graphiques et en cartes » sera publiée dans quelques jours.
PAUL-ANTOINE BISGAMBIGLIA | Mise à jour le 11/03/2013