If you do not see content of CU3ER slider here try to enable JavaScript and reload the page

jeudi 18 septembre 2014

La cartographie statistique sur mobile avec HTML5 :
L'élégance de la librairie D3

Géoclip Serveur est d'abord connu pour sa cartographie statistique, interactive et dynamique. Mais tableaux et graphiques sont aussi de la partie. Les portraits de territoire de Géoclip permettent de produire des tableaux de bord composites sur la zone d'intérêt d'un utilisateur.

Début 2013, lors des études préliminaires pour la version mobile de Géoclip, nous avons cherché quelles librairies javascript pouvaient nous aider à réaliser des graphiques interactifs ou des tableaux triables, à l'instar de la version Flex actuelle. Avec un cahier des charges exagérément irréaliste : nous les voulions fluides, légères, sexys, gratuites, complémentaires, pérennes... Highcharts et Datatables, deux librairies pour graphiques et tableaux ont émergé de ce premier criblage. Mais elles restaient lourdes et peu ou pas optimisées pour mobiles tactiles.

C'est alors que par hasard, en altitude après une journée de ski, surfant négligemment dans la moiteur d'un appartement surchauffé, D3 m'est apparue.

jeudi 4 septembre 2014

Géoclips du bout du monde

La zone Pacifique pose un double problème de représentation au cartographe : d'une part, elle est traversée par la ligne de changement de date, qui marque les confins de la représentation occidentale du monde, d'autre part elle se compose de territoires dispersés et de faible superficie. Voyons quelles solutions proposer pour surmonter ces difficultés.


Prenons par exemple l'archipel polynésien des Tuvalu. Si vous recherchez Tuvalu dans un globe virtuel, vous verrez surtout du bleu ! Il s'agit d'un archipel constitué de 9 atolls minuscules, perdus au centre de l'Océan Pacifique, à 5 000 km au nord est de l'Australie. L'île la plus longue mesure environ 12 km dans sa plus grande dimension. Tuvalu est néanmoins un état indépendant, d'un peu plus de 10 000 habitants.
Bien qu'on dispose de statistiques sur la population des différentes îles, il n'est par conséquent pas simple de produire une carte statistique sur des objets géographiques aussi éparpillés et aussi petits.




Cela devient plus clair avec ce bel assemblage exposant les principales îles.
Dans le fond de carte, les 9 atolls ont été déplacés dans 9 cartouches. Cela permet d'obtenir une vue géographique globale.

On procède de la même manière pour obtenir une vue globale de la France, figurant les départements d'outre-mer dans la même vue.










La Communauté du Pacifique (CPS) fut créée en Australie, en 1947, suite à la signature de la Convention de Canberra par les six « États membres » qui administraient alors des territoires dans la région du Pacifique :

mardi 1 juillet 2014

La cartographie statistique sur mobile avec HTML5 :
Canvas vs SVG

Afficher une carte interactive sur tablette ou tout autre appareil mobile, c'est possible avec diverses technologies web : principalement SVG ou Canvas. Ce deuxième article (*) sur la cartographie avec HTML5 évoque les avantages et inconvénients de ces deux techniques. Il décrit également les apports de CSS3 en matière d'animation cartographique.

Rappelons tout d'abord le principe de la cartographie vectorielle. Il consiste à charger dans le navigateur la définition géométrique d'un fond de carte, par exemple les départements de France, et à lui confier le soin de dessiner les polygones correspondants. Ce mode de rendu s'oppose à la composition en dalles bitmap, la carte à l'écran s'assemblant à partir de carrés pré-construits au format image png. Mais un fichier png n'est pas réactif, alors qu'une forme géométrique connue du navigateur peut l'être, tout comme elle peut être modifiée à la volée, par affectation d'un style ou d'un facteur de zoom, sans avoir à consommer à nouveau de la bande passante.

La technologie SVG est a priori la mieux adaptée pour un rendu vectoriel de qualité. C'est une vieille technologie, presqu'aussi vieille que Flash, mais validée par les autorités de standardisation. Elle a très tôt été utilisée par des cartographes sur Internet. Mais dans les années 2000, Flash, par son ubiquité et sa vélocité, l'a nettement supplantée. 

Renversement à l'aube de la décennie 2010 avec la décision de Steve Jobs de bannir Flash des mobiles Apple. SVG, désormais largement supportée par les navigateurs du monde mobile, peut sortir de l'ombre. Mais entre-temps Apple a fait émerger un nouveau standard, qui deviendra l'un des fers de lance de la révolution HTML5, le "Canvas".  

Un spécialiste de SVG ou Flash aura tendance à considérer le Canvas avec dédain, car c'est un procédé très basique. On peut certes en javascript dessiner dessus à peu près tout ce qu'on veut. Mais le Canvas n'a aucune mémoire, ce n'est qu'une toile qui, une fois coloriée, a oublié les commandes de dessin qu'elle a reçues. A chaque changement à apporter à la carte, il faut tout effacer et recommencer. SVG est bien plus intelligent, car il construit en mémoire un arbre conservant la définition de tous les objets dessinés, un arbre qui s’insère dans l'arbre global de la page web (le DOM). Une forme dessinée en SVG est ainsi aussi aisément accessible a posteriori en javascript ou en CSS qu'un "div" ou un élément de texte. 

Mais voilà, cette richesse a un coût, et un appareil mobile est peu généreux en puissance, en mémoire, et en énergie. Le développement mobile est injuste avec l'élégance abstraite, il exige du codage de bas niveau, des techniques peu consommatrices. Le Canvas est devenu tellement rapide à dessiner que l'inconvénient du rafraîchissement à programmer est mineur au regard de la fatigue exponentielle que le maintien d'un arbre DOM SVG de plusieurs centaines ou milliers d'objets impose à un mobile. 

Affichage d'une carte de France
par commune avec Canvas topologique
Un autre argument en faveur du Canvas s'ajoute quand la cartographie utilise un format topologique, ce qui est le cas de Géoclip mobile. SVG oblige en pratique à dupliquer en mémoire la définition géométrique des formes géographiques. Les coordonnées des points de chaque tracé sont d'abord chargées en mémoire, typiquement à partir d'un fichier JSON. Puis une copie est réalisée dans un encodage SVG, qui est spécifique, et même exotique.

De surcroît, SVG ne sait pas tirer parti directement d'un format topologique : les points d'une frontière commune à 2 territoires sont donc décrits deux fois dans 2 "paths" séparés. Si a contrario on dessine sur le Canvas directement à partir d'arcs topologiques, on n'a besoin que d'une description très compacte de la géométrie à rendre à l'écran, où aucun point n'est décrit deux, voire trois fois en mémoire.

Enfin, l'affichage du Canvas, au cœur du moteur de rendu HTML5  fait l'objet d'optimisations constantes de la part des développeurs de navigateurs. SVG, dont la spécification est ancienne, dont le support est plus complexe, parfois récent comme dans le monde Android, est visiblement considéré de façon moins prioritaire.

Utiliser le Canvas, qui une fois composé n'est guère différent d'un bloc image png, n'interdit pas l'interactivité et les animations. Dès lors que la définition topologique du fond de carte reste disponible en mémoire, il est aisé de détecter le territoire survolé. Le Canvas supporte le calcul matriciel, les zooms et translations sont donc enfantins à programmer.

CSS3 s'accorde particulièrement bien avec le Canvas. Les navigateurs web ont considérablement accéléré les animations à l'écran en exploitant mieux les ressources de la carte graphique. Ce qui se programmait lourdement en javascript est désormais pris en charge par quelques lignes CSS3, avec notamment les transformations 2D/3D, la gestion de la transparence et les transitions possibles sans saccade sur toute sorte d'attributs graphiques.

Pour le rendu cartographique mobile, nous arbitrons donc en faveur du Canvas. SVG reste toutefois la technologie de choix pour des "data-visualisations" plus classiques et légères à base de graphiques ou de diagrammes. L'élégante librairie D3 en fait un superbe usage, sur lequel nous reviendrons dans un prochain article.

* : Le premier article était une introduction à la cartographie statistique sur mobile avec HTML5.




mardi 3 juin 2014

Réforme territoriale : régions, marions-les

projet de redécoupage des régions françaises
De 22 à 14 régions
Cette carte du projet de redécoupage des régions françaises est abondamment publiée et commentée aujourd'hui dans toute la presse nationale et locale.

Pour aller plus loin, il est intéressant également de regarder comme se répartissent quelques données statistiques selon ce projet d'une France en 14 régions métropolitaines.

Pour permettre cela, une nouvelle vue géographique a été introduite dans France découverte prenant en compte les 7 mariages régionaux envisagés.

Plusieurs indicateurs ont ensuite été agrégés selon ce projet de découpage, sur quelques domaines principaux : la population, les logements, l'emploi et les activités économiques.

PIB et densité de population
Notre objectif : vous offrir des outils simples à utiliser, pour vous permettre d'explorer facilement les données. Voici donc quelques exemples de cartes thématiques :
Vous pourrez en produire d'autres par vous-même, à partir des indicateurs disponibles dans l'atlas, ou aussi en important vos propres données.

Vous pourrez également éditer des portraits de ces nouvelles régions à l'étude, comme par exemple le portrait de la grande région Centre-Poitou-Charentes-Limousin.



mardi 27 mai 2014

La cartographie statistique sur mobile avec HTML5 : introduction

C'est en août 2014 qu'une première mouture de Géoclip mobile verra le jour, amenant sur tablette la richesse d'un observatoire départemental, avec le soutien d'un de nos clients les plus motivés par cette extension. Nous présenterons une offre paramétrable pour tous nos clients d'ici la fin de l'année.

Géoclip dans un ipad
Amener tout Géoclip (ou presque) sur un portable tactile, avec la puissance et la facilité de paramétrage de Géoclip, nous y travaillons depuis plus d'un an. C'est une gageure que de vouloir faire de l'analyse de données, des cartes statistiques, sur un appareil alimenté par une simple batterie.

Les technologies disponibles sont jeunes, bourgeonnantes, parfois instables, souvent capricieuses. Les éditeurs de navigateurs ou de kits de développement se livrent une course effrénée à l'innovation.

Pour un habitué de la puissance débonnaire de la programmation Flash/Flex, insouciante des plateformes de déploiement, le choc est rude ! Il faut désormais tester chaque type d'appareil, tout un éventail de navigateurs, craindre que les mises à jour des éditeurs ne cassent soudain une fonction qui ronronnait auparavant.

HTML5
Mais l'affaire est entendue, Flash a un glorieux passé en cartographie mais n'a pas d'avenir au-delà de quelques années (rien ne meurt jamais sur le web). HTML5 est le symbole d'un rattrapage, initié par Apple, longtemps différé par le quasi-monopole de Microsoft sur le marché des navigateurs.

Pouvoir jouer avec une carte, un graphique et même un tableau sur son téléphone ou sa tablette, c'est ludique et instructif quand on veut tuer le temps, c'est efficace si l'on veut répondre de façon percutante en réunion, c'est décisif souvent s'il s'agit d'emporter l'adhésion d'un client sur son terrain.

Naturellement, nous nous sommes pris au jeu. Le mobile permet de toucher un public bien plus large.

Sur le plan technologique, il a d'abord fallu choisir : "app" ou web ? Les applications étaient à la mode au début des années 2010. Mais Géoclip est né dans le sillage du web, a prospéré avec l'ubiquité et la liberté de l'internet. Alors devoir développer 3 fois, pour iOs, Android ou Windows Phone ? Attendre 3 semaines une approbation d'un "xxx" store pour diffuser une mise à jour, dont on ne sait quand ou si elle sera téléchargée ? Payer une redevance annuelle ou se soumettre à des censeurs potentiels ? Non, merci. Le débat s'est vite refermé. Web un jour, web toujours ! Parions donc sur la maturité grandissante d'HTML5, en dépit de ses soubresauts de jeunesse.

CSS3
L'avantage d'un développement conçu exclusivement pour mobiles, c'est l'assurance de s'appuyer sur des technologies récentes, HTML5 et CSS3 nommément.

Nous introduisons ici une série d'articles plus techniques, avec le désir de faire la part des choses et de trier le plus intéressant (et le plus stable) parmi les technologies disponibles :
- rendu cartographique : Canvas / SVG / CSS3 ;
- D3 et data-visualisation ;
- conception adaptative (responsive design) et mise en page cartographique sur petits écrans ;
- drill-down et sélections géographiques, comparaisons de territoires ;
- productivité sur mobile : sortie de rapports, exports de données et d'images...

À suivre...

lundi 21 avril 2014

Un outil de géomarketing

Mettre à disposition d'un grand nombre de collaborateurs des représentations cartographiques de données sur la structure de la population en général, sur les ventes de la presse régionale, quotidienne et hebdomadaire, et sur ses propres statistiques de diffusion, tel était l'objectif du groupe Sipa-Ouest-France.

Géoclip O3 lui a permis de mettre en place une solution efficace et originale pour atteindre ce but, dans une application qui n'est, pour des raisons évidentes de confidentialité, accessible qu'à des utilisateurs authentifiés.

Sipa-Ouest-France est de loin le premier groupe français de presse quotidienne régionale. Son titre principal est distribué à plus de 750 000 exemplaires dans un large territoire de l'ouest de notre pays. Si les titres de la presse traditionnelle voient leur diffusion s'effriter peu à peu au fil du temps, Ouest-France résiste mieux que ses concurrents. Pour le groupe, l'enjeu est de taille de pouvoir disposer d'un outil performant d'analyse du marché.

Ouest-France dispose de chiffres détaillés sur sa propre diffusion : abonnements, ventes au numéro, réseau de distribution... Ouest-France dispose également de statistiques disponibles auprès de l'OJD sur l'ensemble de la PQR et de la PQN, ce qui permet de calculer des taux de pénétration et de se mesurer par rapport à la concurrence. Ouest-France a sélectionné également des indicateurs statistiques globaux dans les collections de données que nous proposons à nos clients (voir aussi cet article relatif à notre offre de données).


Toutes ces données sont ainsi à portée de clic pour pouvoir être cartographiées à différentes échelles, d'un niveau local, sur des données ponctuelles ou par iris à un niveau global, sur tout le Grand-Ouest ou même sur l'ensemble de la France. Ces données peuvent aussi être confrontées aux différents zonages métiers du groupe pour permettre une analyse au plus près des activités des différents acteurs.


mercredi 9 avril 2014

Comment bâtir un observatoire Géoclip en 8 étapes ?

Voici un nouvel observatoire World Atlas, présentant des statistiques sur les pays du monde. Il s'agit d'une version actualisée de l'ancien Géomonde, construite comme France découverte, avec Géoclip O3.



L'actualisation de cet atlas mondial a été aussi l'occasion de mettre à jour le Guide de Prise en Main Rapide, qui donne un panorama global de « Comment bâtir un observatoire Géoclip en 8 étapes ? ». Ce guide décrit les grandes opérations à réaliser par l'administrateur Géoclip O3 pour construire son observatoire :
  1. préparer les fonds de carte,
  2. définir les niveaux géographiques et les vues
  3. paramétrer la cartographie,
  4. importer les données statistiques,
  5. organiser l’information en domaines et en thèmes,
  6. définir les indicateurs,
  7. créer des rapports,
  8. personnaliser l’observatoire.
Pour illustrer ce Guide de Prise en Main Rapide, voici un petit tutoriel en images :