Le projet en une phrase
Transformer les données brutes du budget de l'État français, disponibles en open data sur data.economie.gouv.fr, en un dashboard interactif permettant de visualiser où passent les impôts. Le résultat est accessible sur ouvontmesimpots.fr.
Il ne s'agit pas d'un exercice théorique mais d'un site en production, avec un trafic réel, un SEO effectif et des arbitrages techniques assumés. Les sections qui suivent décrivent ce qui a fonctionné, les points de difficulté et les décisions retenues.
Pourquoi ce projet
Le budget de l'État concerne chaque citoyen, sans qu'il soit véritablement compris dans le détail. Les données existent (la France se situe plutôt bien en matière d'open data) mais elles sont dispersées dans des fichiers CSV peu lisibles, des API partiellement documentées et des PDF de trois cents pages rarement ouverts.
L'objectif était simple : un point unique, clair et visuel, permettant à un citoyen d'entrer un montant d'impôts et de voir concrètement où va chaque euro. Sans jargon budgétaire, sans graphiques Excel peu exploitables.
La stack technique et les raisons des choix
Nuxt 4 et TypeScript : la base
Nuxt s'est imposé naturellement. Le SSR est indispensable pour le SEO (un site consacré aux impôts doit apparaître dans Google) et les server routes de Nitro sont adaptées à la création d'endpoints API qui interrogent et transforment les données de Bercy avant de les transmettre au front.
TypeScript n'est pas optionnel sur ce type de projet. Lorsqu'on manipule des données budgétaires présentant des dizaines de champs, des montants en millions et des calculs de pourcentages, le typage statique intercepte des bugs que des tests unitaires auraient laissé passer.
Chart.js : graphiques interactifs
Chart.js a été utilisé via vue-chartjs pour l'ensemble des graphiques : donuts pour les recettes, barres horizontales pour les dépenses par mission, lignes pour l'exécution mensuelle et l'évolution de la dette. La bibliothèque est légère, bien documentée et suffisamment flexible pour les personnalisations nécessaires.
Le principal défi technique concerne les barres de dépenses avec drill-down. Lorsqu'un utilisateur clique sur une mission (par exemple "Défense"), les barres s'ouvrent pour révéler les programmes individuels. Cela implique la gestion de l'état d'ouverture, les animations de transition et le recalcul des hauteurs de conteneur. Non trivial, mais le résultat est fluide.
Tailwind CSS et mode sombre
Tailwind v4 a été utilisé via @nuxt/ui. Le mode sombre est détecté automatiquement (prefers-color-scheme) ou basculé manuellement. Derrière cette apparente simplicité, tous les graphiques Chart.js doivent réagir au changement de thème : couleurs des axes, des grilles, des tooltips, des légendes. Un composable useChartTheme() a été créé pour fournir des couleurs réactives à l'ensemble des charts.
L'architecture des données : cœur du projet
Les sources
Les données proviennent de deux sources principales :
- data.economie.gouv.fr, l'API de Bercy. On y trouve le PLF (Projet de Loi de Finances) avec les recettes et dépenses détaillées, ainsi que les situations mensuelles d'exécution budgétaire
- INSEE et Eurostat pour le PIB et l'évolution de la dette publique en pourcentage du PIB
Le pipeline serveur
Chaque type de donnée dispose de sa propre route API côté serveur (/server/api/). L'approche retenue consiste à concentrer la transformation côté serveur et à transmettre au client des données propres, prêtes à être affichées.
Exemple concret : l'API de Bercy renvoie les dépenses ligne par ligne, avec un code mission et un code programme. La route serveur les agrège par mission, les trie par montant décroissant, calcule les pourcentages du total et regroupe les programmes sous chaque mission. Le front n'a plus qu'à boucler et afficher.
Autre cas représentatif : l'exécution mensuelle. Bercy fournit des données cumulatives (total depuis janvier). Pour obtenir les montants mensuels, ceux qui font sens dans un graphique, il faut soustraire chaque mois du précédent. L'opération est effectuée côté serveur, pas côté client.
Le cache
Toutes les routes API sont mises en cache pendant une heure (s-maxage=3600). Les données budgétaires ne varient pas toutes les cinq minutes, et cette stratégie évite de solliciter excessivement les API de Bercy. Choix pragmatique : suffisamment frais pour les mises à jour mensuelles, suffisamment mis en cache pour absorber un pic de trafic.
Les fonctionnalités structurantes
Le simulateur "Pour 100 euros d'impôts"
Fonctionnalité principale du dashboard. L'utilisateur saisit un montant (100 euros, 1 000 euros, 10 000 euros) et visualise immédiatement la répartition : tant pour la Défense, tant pour l'Éducation, tant pour la dette. Techniquement, il s'agit d'un ratio montant divisé par recettes totales appliqué à chaque mission. Visuellement, le dispositif rend le budget tangible.
Les insights dynamiques
Plutôt que des chiffres bruts, le dashboard calcule des métriques plus parlantes :
- La dette par citoyen (dette totale divisée par 68 millions d'habitants)
- Les dépenses par seconde (environ 1,3 million d'euros)
- La "date de libération fiscale", jour théorique où les recettes annuelles couvrent les dépenses
L'ensemble est calculé dynamiquement dans un composable useInsights() à partir des données réelles. Aucun chiffre n'est inscrit en dur.
Le drill-down sur les dépenses
Les dépenses sont présentées par mission (grands postes budgétaires). Un clic sur une barre ouvre le détail des programmes individuels. L'apport est significatif : "Mission Défense : 56 milliards" reste abstrait, mais cette enveloppe devient lisible lorsqu'elle se décompose en "Équipement des forces" pour 29 milliards et "Préparation et emploi des forces" pour 12 milliards.
SEO et accessibilité : considérés dès la conception
Un site d'utilité publique invisible dans Google n'atteint pas son objectif. Le SEO a été pensé dès le début :
- SSR complet, le contenu est dans le HTML initial, pas généré en JavaScript
- Balises Open Graph et Twitter Cards pour le partage
- Schema.org (WebSite et FAQPage avec quatre questions/réponses)
- Sitemap, robots.txt et llms.txt
- Meta descriptions et titres optimisés
Côté accessibilité : labels ARIA sur l'ensemble des éléments interactifs, textes alternatifs pour les lecteurs d'écran, contrastes respectés en mode clair comme en mode sombre.
RGPD : le strict nécessaire
Google Analytics est utilisé pour mesurer l'audience mais bloqué par défaut. Consent Mode v2 est en place avec un bandeau sobre : accepter, refuser, et c'est tout. Aucun dark pattern, aucun bandeau couvrant la moitié de l'écran, aucun "intérêt légitime" dissimulé dans un sous-menu.
Le site fonctionne parfaitement sans aucun cookie analytique, ce qui devrait constituer la référence.
Quelques chiffres clés du budget 2025
Parmi les données mises en évidence par le dashboard :
- La dette publique représente environ 113 % du PIB en 2025, contre 95 % en 2015
- L'État dépense environ 1,3 million d'euros par seconde
- Les trois premiers postes de dépenses sont l'Enseignement scolaire, la Défense et les Engagements financiers (charge de la dette)
Ces chiffres ne cherchent pas à produire un effet, mais à informer. Un citoyen informé est mieux placé pour participer au débat budgétaire.
Les enseignements du projet
Travailler avec des données publiques est formateur. Les API ne sont pas toujours bien documentées, les formats évoluent entre les millésimes, et il faut parfois recouper plusieurs sources pour obtenir un chiffre fiable. Le rendu en vaut l'investissement : ces données appartiennent à la collectivité, les rendre lisibles constitue un acte à la fois technique et civique.
Sur le plan technique, le motif "server routes qui transforment, composables qui exposent, composants qui affichent" s'est révélé robuste. Il est clair, testable et maintenable.
Voir le résultat
Le site est en ligne : ouvontmesimpots.fr. Entrer un montant d'impôts permet de visualiser la répartition euro par euro. Gratuit, sans inscription et sans publicité.
Un projet de dashboard ou de visualisation de données ? Prenons contact. Transformation de données brutes en interfaces claires et interactives.