Ressources · Étude de cas

SonoMap, un moteur de cartes

Cinq représentations, du son, et aucune dépendance

SonoMap est un moteur de cartographie statistique développé par Limbus Studio. Il permet de publier une carte interactive à partir d’un simple fichier CSV, en quelques minutes, sans compétence technique. Cinq formes de représentation, neuf fonds de carte, une sonification des données, et pas une ligne de bibliothèque tierce. Récit d’un projet, y compris de ce que l’assistance d’une IA y a changé, et de ce qu’elle n’a pas pu faire.

Voir la démonstration

Aperçu de SonoMap

SonoMap : cartogramme de l’Afrique, chaque pays représenté par un carré coloré selon la valeur d’un indicateur, avec une timeline de 2017 à 2026 sous la carte SonoMap : panneau de réglages en quatre colonnes (Carte, Couleurs, Animation, Sonification), avec l’éditeur de palette et le choix des sons SonoMap : tableau de données, sélection des années et des indicateurs, édition des valeurs pays par pays

SonoMap : construire un moteur de cartographie statistique

Le compromis que tous les outils imposent

Cartographier une donnée devrait être simple. En pratique, les outils disponibles forcent un choix.

Les uns sont puissants mais réservés aux techniciens : D3, QGIS, les bibliothèques de rendu. Ils permettent tout, à condition de savoir programmer. Un rédacteur n’y touchera jamais.

Les autres sont accessibles mais génériques : quelques clics, une carte correcte, et un rendu que l’on reconnaît immédiatement : celui de l’outil, pas celui de la marque. La finesse graphique n’y est pas, et la dépendance à une plateforme tierce non plus.

Il manquait le milieu : une interface qu’un rédacteur maîtrise, un rendu qu’un studio de design assume, et aucune dépendance à personne. C’est ce que Limbus Studio a construit avec SonoMap.

Ce que fait l’outil

Un fichier CSV, quelques minutes, une carte interactive publiée. Cinq formes de représentation, chacune répondant à une question différente.

  • La choroplèthe : chaque territoire coloré selon une valeur, par paliers configurables. Pour comparer une même grandeur entre territoires.
  • Les symboles : des pastilles posées sur les territoires, une par indicateur. Quand plusieurs coexistent au même endroit, ils se regroupent automatiquement en grille compacte. Forme et taille se règlent indicateur par indicateur.
  • Les cercles proportionnels : pour des volumes comparables. Le rayon suit la racine carrée de la valeur : l’œil compare des surfaces, pas des rayons, et doubler le rayon quadruplerait la perception.
  • Le cartogramme : la géométrie s’efface au profit de la donnée. Cinq formes disponibles, du carré à l’hexagone.
  • Les symboles proportionnels multiples : quand volume et catégorie doivent se lire ensemble.

Neuf fonds de carte sont livrés, du monde entier jusqu’à l’échelle d’une ville. Huit palettes sont enregistrées. Les données peuvent porter sur plusieurs années : l’outil anime alors la transition d’une année à l’autre.

Ce qui n’est pas là, et c’est volontaire : pas de D3, pas de Leaflet, pas de Mapbox, pas de TopoJSON, aucune API tierce. SonoMap est écrit en SVG natif. Limbus Studio n’a pas assemblé des briques, le studio a écrit le moteur.

La chaîne de production des fonds de carte

C’est la partie invisible, et la plus déterminante. Toute la géographie vient de Natural Earth, la référence libre du domaine. Limbus Studio a construit un pipeline automatisé qui télécharge les données brutes, les projette (Robinson pour le monde, Lambert-93 pour les échelles françaises), les découpe par continent et par pays, les optimise, et produit environ 250 fichiers SVG prêts à l’usage.

Chaque territoire porte un identifiant ISO stable. Chaque tracé est nettoyé. Chaque frontière contestée est traitée de façon neutre. Le pipeline corrige même certains défauts connus du jeu de données source : des identifiants manquants sur certains pays selon les versions.

Le résultat : des cartes vectorielles fidèles, légères, et qui n’appellent aucun serveur extérieur au chargement.

Le son comme seconde lecture

SonoMap ne se contente pas de montrer : il fait entendre. La sonification traduit la donnée en son, et l’animation d’une série temporelle devient alors perceptible à l’oreille autant qu’à l’œil.

Ce n’est pas un effet. C’est d’abord une question d’accessibilité : une carte reste, par nature, hors de portée des personnes qui ne voient pas. Le son ouvre la donnée à ces publics. Et il révèle parfois autre chose : l’oreille perçoit des rythmes et des ruptures que l’œil, occupé à comparer des teintes, laisse passer.

Concrètement, c’est la hauteur qui porte la donnée : chaque valeur devient une note, les valeurs basses sonnent grave, les hautes sonnent aigu. Pour que le résultat reste musical plutôt que criard, les notes sont contraintes à une gamme (par défaut une pentatonique mineure, qui n’a pas de fausse note), sur une étendue d’octaves réglable. Le reste relève du choix éditorial : un timbre d’instrument (kalimba, pluck, harpe, cloche ou crystal) et une tessiture générale (grave, moyenne, aiguë). Quand la carte anime une série temporelle, les notes s’égrènent au rythme de la timeline, et l’évolution d’une année à l’autre s’entend comme une phrase mélodique.

L’interface éditeur, là où tout se joue

C’est le point de rupture de la plupart des outils, et c’est là que Limbus Studio a mis le plus d’énergie.

  • Import CSV en une étape, avec détection automatique du type de chaque colonne.
  • Édition en place, ligne par ligne, avec sauvegarde asynchrone et indicateur de modifications non enregistrées.
  • Un sélecteur de couleur unifié : partout où l’on choisit une couleur, on retrouve la même interface. Code hexadécimal, bibliothèque de palettes, aperçu immédiat.
  • Un aperçu en temps réel des symboles : forme, couleur et taille se règlent en voyant le résultat.
  • Des interactions publiques discrètes : au survol d’un territoire, un filet fin sombre apparaît, plutôt qu’un changement de couleur qui trahirait la donnée qu’on est justement en train de lire.

Ce dernier point résume l’état d’esprit. Un survol qui repeint un pays en bleu détruit l’information que la choroplèthe portait. Un filet d’un pixel signale la même chose sans rien effacer. C’est le genre d’arbitrage qu’aucune spécification ne contient, et qui fait la différence entre un outil utilisable et un outil juste.

Ce que l’IA a fait, et ce qu’elle n’a pas fait

SonoMap a été développé avec l’assistance de Claude, l’assistant d’Anthropic. Autant le dire clairement plutôt que de laisser croire à une prouesse solitaire.

Ce que cette assistance a apporté : de la vitesse d’écriture, une aide au débogage, la capacité de tenir une trentaine d’étapes documentées sans perdre le fil, et un interlocuteur pour éprouver une hypothèse technique à voix haute.

Ce qu’elle n’a pas apporté, et ne pouvait pas apporter :

  • Savoir que le survol ne doit pas repeindre le pays. Cela ne s’écrit pas dans une spécification. Cela vient d’avoir vu des cartes rater pour cette raison.
  • Choisir la racine carrée pour le rayon. La règle est connue ; savoir qu’elle compte, et pourquoi, relève du métier.
  • Décider quelles cinq représentations valaient la peine d’exister, et lesquelles étaient des gadgets.
  • Concevoir l’interface éditeur. Un rédacteur n’est pas un développeur : chaque écran a été pensé pour quelqu’un qui a une carte à publier, pas un modèle de données à comprendre.
  • Trancher les compromis. Que garder, que retirer, que refuser. C’est le travail, et il n’est pas délégable.

Autrement dit : l’IA écrit vite le code qu’on lui décrit. Elle ne sait pas ce qu’il faut décrire. Vingt ans de design et de développement servent précisément à cela : savoir quoi demander, et reconnaître quand la réponse est mauvaise.

L’itération courte, comme méthode

Le projet s’est construit en une trentaine d’étapes documentées, chacune validée par un test concret avant de passer à la suivante. Les livraisons se font par deux à six fichiers, jamais par blocs entiers.

Cette discipline n’a rien d’une coquetterie. Elle permet de corriger vite, d’ajuster une couleur ou un comportement au survol, et de ne jamais se retrouver devant un ensemble cassé dont on ne sait plus quelle modification est responsable. Elle vaut avec ou sans assistance d’IA, mais elle devient indispensable avec, parce que la vitesse d’écriture augmente et que le risque d’accumuler des erreurs non détectées augmente avec elle.

De l’application à l’extension

SonoMap est né comme une application sur mesure. Il a ensuite été porté en extension WordPress, pour être utilisable depuis l’administration d’un site, là où travaillent les rédacteurs, sans qu’ils aient à changer d’outil ni à demander l’aide de quiconque.

L’outil est en production et continue d’évoluer. Les chantiers en cours portent sur les valeurs de référence configurables, un export enrichi, et la poursuite du travail d’accessibilité.

Questions fréquentes

Qu’est-ce qu’une carte choroplèthe ?

En résumé. Une carte choroplèthe colore chaque territoire selon une valeur numérique, par paliers. C’est la forme la plus lisible pour comparer une même grandeur entre territoires, à condition de bien calibrer les paliers.

Dans une choroplèthe, l’intensité ou la teinte d’un territoire traduit directement une donnée : densité, taux, montant. L’œil compare instantanément les zones sombres et claires, ce qui en fait la représentation cartographique la plus immédiate pour situer un phénomène sur un territoire donné.

Tout se joue dans le découpage en paliers. Un seuillage mal choisi peut regrouper des valeurs très différentes ou exagérer des écarts minimes, et ainsi trahir la donnée qu’il est censé montrer.

Choisir la bonne forme et le bon découpage relève d’un travail de datavisualisation, pas d’un réglage automatique. Dans SonoMap, la choroplèthe est l’une des cinq représentations disponibles, avec des paliers configurables pour éviter que la couleur ne mente sur la réalité des chiffres.

Questions associées : Qu'est-ce qui fait une bonne datavisualisation ? · Qu’est-ce qu’ACF et pourquoi cela complique-t-il la maintenance ? · Qu'est-ce que la dataviz ?

Pourquoi développer son propre moteur de cartes plutôt qu’utiliser une bibliothèque ?

En résumé. Les bibliothèques cartographiques existantes imposent un compromis : puissantes mais réservées aux techniciens, ou accessibles mais génériques. SonoMap a été développé en SVG natif, sans dépendance, pour échapper à ce choix.

Les solutions comme D3 ou Leaflet permettent tout, à condition de savoir programmer, tandis que les outils clés en main produisent un rendu reconnaissable qui n’est pas celui de la marque. Entre les deux manquait une interface qu’un rédacteur maîtrise et un rendu qu’un studio de design assume.

Limbus Studio a écrit SonoMap en SVG natif, sans D3, sans Leaflet, sans Mapbox et sans API tierce. Le studio n’a pas assemblé des briques, il a écrit le moteur.

Ce choix préserve la finesse graphique et l’autonomie d’un outil qui ne dépend d’aucune plateforme extérieure : les cartes n’appellent aucun serveur tiers au chargement. SonoMap a été développé avec l’assistance de l’IA, qui accélère l’écriture du code sans décider des arbitrages de conception, lesquels restent du ressort du métier.

Questions associées : Quels outils utilise Limbus Studio pour la dataviz ? · Un code complexe est-il un mauvais code ? · L'IA permet-elle de se passer d'un développeur pour créer un site ?

D’où viennent les fonds de carte de SonoMap ?

En résumé. De Natural Earth, la référence libre du domaine. Limbus Studio a construit un pipeline automatisé qui télécharge les données brutes, les projette, les découpe et produit environ 250 fichiers SVG.

Le pipeline part des données ouvertes de Natural Earth, les projette selon l’échelle, Robinson pour le monde, Lambert-93 pour la France, puis les découpe par continent et par pays. Chaque territoire reçoit un identifiant ISO stable et chaque tracé est nettoyé et optimisé pour rester léger.

Environ 250 fichiers SVG en résultent, du planisphère jusqu’à l’échelle d’une ville. Le pipeline corrige même des défauts connus du jeu source, comme des identifiants manquants selon les versions.

Les cartes obtenues sont vectorielles, fidèles, et n’appellent aucun serveur extérieur au chargement, contrairement à une API cartographique tierce. Cette chaîne de production est la partie invisible du projet, et la plus déterminante : elle garantit des fonds réutilisables, cohérents et indépendants de toute plateforme.

Questions associées : Quels outils utilise Limbus Studio pour la dataviz ? · Qu’est-ce que le HPOS et pourquoi est-ce important lors d’une refonte ? · Qui est propriétaire du logo et des fichiers sources ?

Qu’est-ce que la sonification de données ?

En résumé. La sonification traduit des données en son. Là où un graphique s’adresse à l’œil, elle s’adresse à l’oreille : elle rend une évolution perceptible autrement et ouvre la donnée aux publics que le visuel laisse de côté.

Dans SonoMap, c’est la hauteur qui porte la donnée : chaque valeur devient une note, les valeurs basses sonnent grave, les hautes sonnent aigu. Les notes sont contraintes à une gamme, une pentatonique mineure par défaut, pour rester musicales, sur une étendue d’octaves réglable.

L’intérêt est d’abord une question d’accessibilité : une carte reste par nature hors de portée des personnes qui ne voient pas, et le son leur ouvre la donnée.

L’oreille révèle aussi des rythmes et des ruptures que l’œil, occupé à comparer des teintes, laisse parfois passer, notamment quand la carte anime une série temporelle et que l’évolution s’entend comme une phrase mélodique. La data sonification est une expertise rare, que Limbus Studio pratique depuis plusieurs années.

Questions associées : Une datavisualisation peut-elle être accessible ? · Une dataviz est-elle accessible aux personnes malvoyantes ? · Que fait Limbus Studio ?

Pourquoi le rayon d’un cercle proportionnel suit-il la racine carrée de la valeur ?

En résumé. Parce que l’œil compare des surfaces, pas des rayons. Doubler le rayon d’un cercle quadruple la surface perçue, donc une valeur deux fois plus grande paraîtrait quatre fois plus grande.

Un cercle proportionnel encode une valeur par sa taille. Si le rayon était directement proportionnel à la donnée, la surface, elle, croîtrait au carré : le lecteur, qui perçoit l’aire du disque et non son rayon, surestimerait fortement les grandes valeurs et fausserait toute comparaison.

Faire suivre au rayon la racine carrée de la valeur rétablit la correspondance : la surface redevient proportionnelle à la donnée, et ce que l’œil perçoit correspond à ce que la carte veut dire.

Ce genre de règle, connue mais souvent ignorée, distingue une datavisualisation juste d’un simple graphique décoratif. Savoir qu’elle compte, et pourquoi, relève du métier : c’est un arbitrage qu’aucune spécification technique ne contient et qu’une assistance par IA n’aurait pas décidé seule. Vingt ans de design et de développement servent précisément à reconnaître ces règles et à les appliquer.

Questions associées : Qu'est-ce qui fait une bonne datavisualisation ? · Un code complexe est-il un mauvais code ? · WordPress est-il moins sécurisé qu'un site sur mesure ?

SonoMap est-il disponible comme extension WordPress ?

En résumé. SonoMap a d’abord été conçu comme une application sur mesure, puis porté en extension WordPress pour être utilisable depuis l’administration d’un site, sans compétence technique. Il est en production sur des projets de Limbus Studio.

L’outil est né comme une application autonome, avant d’être intégré à WordPress sous forme d’extension. Objectif : le mettre là où travaillent les rédacteurs, dans l’administration du site, pour publier une carte à partir d’un simple fichier CSV sans changer d’outil ni solliciter un développeur.

Cette portabilité illustre la façon dont Limbus Studio construit des applications métier sur mesure et les rend accessibles au sein d’un site WordPress.

SonoMap reste en production et continue d’évoluer, avec des chantiers en cours sur les valeurs de référence configurables, un export enrichi et l’accessibilité. Le passage de l’application à l’extension montre qu’un développement sur mesure peut vivre à la fois hors de WordPress et dans son administration, selon l’usage visé.

Questions associées : Qu'est-ce qu'une application web métier ? · Quelle IA Limbus Studio utilise-t-il pour accélérer ses projets WordPress ? · Faut-il un site WordPress ou une application développée avec l'IA (Claude, Cursor) ?

Un projet qui gagnerait à s’appuyer sur des cartes ?

Sans dépendre d’une plateforme tierce, ni sacrifier la finesse graphique.

Voir la démonstration

À lire aussi

Écrivez-nous

Dites-nous en deux lignes ce que vous cherchez à faire. Réponse sous 48 heures.