background preloader

Tutoriel

Facebook Twitter

Maps with Leaflet, TopoJSON and Chroma.js. In this post I will show you how to create a world map with random colored countries following these steps: Convert GeoJSON to TopoJSON Add TopoJSON support to Leaflet Display and style country polygons Use Chromajs to get proper colors DEMOSource In the last year I created a lot of map applications with Leaflet.

Maps with Leaflet, TopoJSON and Chroma.js

It's nice to work with Leaflet, because it is very well documented, works great on mobile devices and handles many user actions like zooming or panning for you. Moreover it has a very lively community and there are lots of great plugins that extend the core functionality. A Leaflet map If you never worked with Leaflet before you should read the quick start guide in order to understand what is happening here. This is the starting point for our map. From Geo- to TopoJSON Natively Leaflet supports GeoJSON, which is great but if you want to display a lot of geometries, TopoJSON is much more effective because of its smaller footprint. Installation (requires node.js and npm): Journalisme et code : 10 grands principes de programmation expliqués.

/ Ce billet est une traduction autorisée par Paul Bradshaw de son billet “Coding for journalists: 10 programming concepts it helps to understand“.

Journalisme et code : 10 grands principes de programmation expliqués

Ce travail fait suite à un commentaire de Béatrice sur ce post de Pierre Tran dans la communauté des journalistes. Vous pouvez remercier François Jacques pour la traduction des 2 premiers tiers, et Ingrid Pigueron pour le reste de l’article, la seconde passe de corrections et la relecture. À noter que le boulot d’Ingrid étant la traduction et le secrétariat de rédaction, c’est une chance de l’avoir dans la communauté pour ce type de post (et d’autres trucs aussi hein ^^). Voilou, c’est fini pour l’introduction, bonne lecture, et n’hésitez pas à utiliser clearly pour l’imprimer ou le conserver propre, c’est le genre de billets sur lequel on revient 1. Les variables s’apparentent à des boîtes qui contiennent un élément que l’on peut sortir (= afficher) à différents moments. Autopsie d’une dataviz : une mosaïque interactive de Jean-Claude Juncker. Oct72012 Démarrage d'une peut-être nouvelle série avec l'autopsie d'une dataviz. Première en date : une mosaïque interactive de Jean-Claude Juncker, Premier ministre luxembourgeois.

Photo: Serge Waldbillig Quand j'ai commencé mon dernier stage au Luxembourg, j'ai tout de suite été impressionné par une chose : l'engouement des Luxembourgeois pour leur Premier ministre Jean-Claude Juncker. Pour vous donner un ordre d'idée, le monsieur est tellement populaire qu'il surpasse Jésus Christ ! Vous imaginez si chez nous Jean-Marc Ayrault, François Fillon, Lionel Jospin ou Edouard Balladur avaient été plus populaires en France que Bob Marley ? Je me suis donc dit qu'avant mon départ du Wort, il fallait que je trouve une idée originale pour résumer les 30 ans de vie politique de Jean-Claude Juncker. Or, il est très difficile d'en créer une mouture captivante avec plus d'une quinzaine de dates.

Vous vous imaginez aller jusqu'au bout d'une timeline composée de 500 dates ? , un logiciel gratuit. Autopsie d’une dataviz [2] : un arbre généalogique croisé. Nov262012 L'arbre généalogique de Game of Thrones publié en début de semaine sur ce blog a mis beaucoup, beaucoup de temps à voir le jour.

Autopsie d’une dataviz [2] : un arbre généalogique croisé

Petit billet sur l'ensemble de la démarche, et surtout sur ses rebondissements. Un arbre généalogique de Game of Thrones (GoT), voilà une idée qui me trottait dans la tête depuis un moment. Autopsie d’une dataviz [3] : une carte en anamorphose avec champs de sélection. Autopsie d’une dataviz [4] : des cartes choroplèthes harmonisées. Nov262013 Je partage quelques réflexions à propos de trois cartes choroplèthes publiées récemment sur Rue89Strasbourg.

Autopsie d’une dataviz [4] : des cartes choroplèthes harmonisées

Harmonisation des couleurs et opacité sont notamment au programme. Quand j'ai écrit un article avec cartes et data sur les bastions droite/gauche aux dernières municipales de Strasbourg , j'étais parti pour refaire ce que j'avais fait pour l'abstention. Par souci pratique, j'utilise Google Fusion Tables (GFT) pour héberger les données et les cartes directement sur le compte Google de Rue89Strasbourg. Niveau carte choroplèthe , on peut très facilement "harmoniser" les couleurs de sa carte, ou en utilisant des seaux ("buckets" dans le texte) ou en utilisant ce qu'on appelle des "gradients".

Les gradients font tout automatiquement : on dit juste en combien de pots on veut trier nos données, de la valeur minimale à la valeur maximale. Les seaux ont, quant à eux, l'avantage de laisser l'utilisateur choisir l'éventail de valeurs de chaque pot. @joelmatriche » Le blog de jo. Une des limites des Google Fusion Tables (GFT) est la difficulté de mettre à jour les données.

@joelmatriche » Le blog de jo

Ce script développé par @chrislkeller facilite grandement les choses. Tutoriel.GFT n'est pas un tableur, il est parfois difficile de mettre à jour ou changer des données. Bien sûr, s'il s'agit juste d'importer des données dans une table existante, la fonction "File"/"Import more rows" est de loin le chemin le plus court et le plus facile. Mais s'il faut modifier des données déjà encodées, les choses sont autrement plus corsées... Mais un script développé par @chrislkelle résout se problème et bien plus encore puisqu'il permet de synchroniser automatiquement une feuille de calcul Google avec une table fusion. TUTORIEL : Créer une carte avec Google fusion tables - 071211. Créez une carte avec Google Maps et Fusion Table - NewsResources.