Skip to content

Instantly share code, notes, and snippets.

@auremoser
Last active September 20, 2015 20:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auremoser/7af041b09d919912c8f8 to your computer and use it in GitHub Desktop.
Save auremoser/7af041b09d919912c8f8 to your computer and use it in GitHub Desktop.
MOW: Radio Canada (fr)

traduction par l'auteur, Florent Daudens ###Map of the Week, CartoDB ####Guest author: Florent Daudens ####Link (en): http://blog.cartodb.com/mow-radiorent

Montréal a une curieuse tradition : beaucoup de gens déménagent le 1er juillet. Ce qui provoque une chasse aux logements dans les mois précédents.

Deux journalistes de Radio-Canada, Pasquale Harrison-Julien (@pasqualehj) et Florent Daudens (@fdaudens), ont voulu savoir combien coûtent les loyers en moyenne dans la métropole et en banlieue.

Résultat : deux cartes. L’une qui permet de voir le prix moyen des loyers dans 35 zones de la ville et de sa banlieue, par nombre de chambres. L’autre qui permet de comparer ces données avec les données officielles de la Société canadienne d’hypothèques et de logement (SCHL), l’organisme gouvernemental qui surveille le marché. Explications.

Nous avons d’abord fouillé dans les données de la SCHL. Le hic : ces données établissent un portrait d’ensemble, tant pour les locataires qui conservent le même bail depuis 20 ans que ceux qui souhaitent louer aujourd’hui. Elles ne permettent pas de savoir combien coûte un loyer pour ceux qui cherchent un appartement aujourd’hui.

On vous passe les détails pour en arriver au résultat final, le tout est expliqué ici. En bref : scraping des petites annonces sur Kijiji pendant deux semaines; géocodage et nettoyage des données avec OpenRefine; analyse avec un tableur; distribution des points dans les polygons des zones utilisées par les instances gouvernementales et création des SHP avec QGIS.

Au final, nous avions 10 000 petites annonces réparties dans les 35 zones.

Avec ces données, nous avons pu commencer nos interviews. Confronter et valider les données, obtenir différents points de vue et ainsi dépasser la simple visualisation pour aller vers du journalisme de données qui met en contexte et décrypte.

Où est mon appart’?

Puis nous nous sommes tournés vers CartoDB, car nous avions plusieurs exigences : interpréter notre base de données avec des cartes en français et en anglais (le Canada est un pays bilingue); afficher une vue d’ensemble de toutes les zones, mais aussi permettre à chaque internaute de zoomer sur son quartier; filtrer par nombre de chambres; offrir une vue mobile stable.

Les polygones étaient inclus dans nos fichiers SHP et l’assistant d’importation de CartoDB les a reconnus sans problème.

Nous avons donc commencé par styliser nos deux cartes avec l’assistant CartoDB pour générer des chloroplèthes. Puis ajusté les tranches de couleurs, afin de les rendre uniformes pour tous les types d’appartements et ainsi garder la même échelle de couleurs entre toutes les catégories d’appartements.

En plus de pouvoir zoomer sur un quartier précis, nous voulions aussi permettre à l’utilisateur de filtrer par nombre de chambres pour qu’il puisse pleinement comparer avec sa propre situation. Nous avons donc utilisé cartodb.js avec la méthode createLayer, pour pouvoir filtrer par SQL.

Pour programmer le style de chaque filtre, c’est plutôt simple. Nous avons copié le style CSS généré par l’assistant de CartoDB en changeant simplement l’identifiant de la colonne. Exemple :

#nom_de_la_base_de_donnees [1chambre <= 800] {
   polygon-fill: #fee0d2;
}
#nom_de_la_base_de_donnees [1chambre <= 600] {
   polygon-fill: #fff5f0;
}

#nom_de_la_base_de_donnees [2chambres <= 800] {
   polygon-fill: #fee0d2;
}
#nom_de_la_base_de_donnees [2chambres <= 600] {
   polygon-fill: #fff5f0;
}

Quant à la bulle d’information (tooltip) sur chaque zone, nous l’avons configurée avec l’assistant CartoDB, après quelques tentatives infructueuses dans le code. Cela semble plus simple avec la méthode createVis que createLayer.

Une fois le modèle monté pour la première carte, il ne restait plus qu’a faire quelques ajustements pour la seconde. Et surtout, avec le code ainsi structuré, c’était facile de l’adapter pour la version anglophone; il suffisait de traduire les bulles d’informations.

Résultat :

Avec le recul, nous voyons quelques pistes d’améliorations possibles. Nous aurions aimé pouvoir styliser les fonds de carte offerts. Et aussi limiter les niveaux de zoom minimal et maximal, ainsi que le périmètre de la carte pour encadrer la navigation de l’internaute.

Cela dit, nous avons pu configurer les cartes pour nous approcher au plus près de la réalité des internautes. Des dizaines de milliers d’entre eux se sont sentis interpellés par le sujet et ont consulté l’article. De plus, nous avons pu montrer les cartes sur nos chaînes de télévision, et ainsi rendre un sujet complexe accessible grâce à sa dimension visuelle. Nous avons même réussi à en parler sur notre chaîne radio!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment