Un développeur data visualisation fait le lien entre les données et l'écran. Il code en JavaScript ou en TypeScript, s'appuie sur D3.js pour les échelles et les formes, dessine en SVG ou en Canvas, et intègre ses graphiques dans React, Vue ou Svelte. On le recrute quand Power BI ou Tableau ne suffisent plus : graphique dans un produit client, carte interactive, rédaction d'un média, tableau de bord temps réel.
Les CV mélangent souvent deux profils. Le développeur front qui a branché Chart.js sur une page, et celui qui sait pourquoi un nuage de 200 000 points doit quitter le SVG, pourquoi un axe en barres part de zéro et comment un lecteur d'écran lit une courbe. Un portfolio séduisant ne dit rien de la tenue du code quand les données changent ou grossissent.
Un partage d'écran sur un graphique que le candidat a codé fait un bon départ : faites-lui montrer ce qui se passe quand le volume double ou qu'une valeur manque. L'accessibilité et le choix des échelles suffisent pour un junior. Le rendu en Canvas et l'organisation du code dans le framework viennent en plus pour un senior.
La boîte à outils d'un développeur data visualisation
D3.js
La bibliothèque JavaScript de référence pour les graphiques sur mesure, en version 7. Elle ne fournit pas de graphiques tout faits : elle donne des échelles, des formes, des axes, des layouts et un mécanisme qui relie les données aux éléments affichés. Un bon profil sait quels modules il utilise et lesquels touchent au DOM.
SVG
Le format de dessin vectoriel du navigateur. Chaque barre ou point est un élément de la page, facile à styler, à rendre accessible et à exporter. Au-delà de quelques milliers d'éléments, la page ralentit.
Canvas et WebGL
Canvas dessine des pixels sur une seule surface et tient des dizaines de milliers d'éléments. WebGL passe par la carte graphique pour aller plus loin, souvent avec une bibliothèque comme deck.gl. La contrepartie : le survol, le clic et l'accessibilité sont à reconstruire.
React, Vue, Svelte et TypeScript
Les graphiques vivent presque toujours dans une application. Le développeur doit faire cohabiter D3 et le framework sans que les deux modifient les mêmes éléments, et typer ses composants pour qu'ils restent réutilisables.
Observable Plot et Vega-Lite
Des outils de plus haut niveau pour les graphiques courants. Observable Plot vient de l'équipe de D3. Un profil expérimenté sait quand ils suffisent et quand le sur-mesure en D3 se justifie, ce qui pèse sur le délai et la maintenance.
Cartographie (d3-geo, TopoJSON)
Projections, fonds de carte et cartes choroplèthes. Le travail porte sur la simplification des contours, le choix d'une projection adaptée à la France et la justesse de ce qu'on colorie.
Accessibilité (WCAG, RGAA)
Un graphique doit rester compréhensible au clavier, avec un lecteur d'écran et pour les personnes daltoniennes. Les WCAG 2.2 demandent par exemple un contraste de 3:1 pour les éléments graphiques nécessaires à la lecture. Le RGAA, référentiel français, s'appuie sur ces règles.
Tests et outillage
Tests unitaires sur les calculs, tests visuels par capture d'écran pour détecter un graphique cassé, catalogue de composants de type Storybook. C'est ce qui permet de faire évoluer une bibliothèque de graphiques sans tout revérifier à la main.
Le poste reste rare et prend des formes variées. Dans un éditeur de logiciel, le développeur dataviz construit les graphiques du produit et une bibliothèque partagée entre équipes. Dans un média, il produit des visualisations pour des articles, souvent dans des délais courts. En ESN ou en agence, il intervient sur des tableaux de bord sur mesure pour un client. Les offres le cherchent sous plusieurs intitulés : développeur dataviz, ingénieur dataviz, développeur front-end dataviz, data visualization engineer. Le portfolio compte, mais seule une discussion technique montre comment le code tient avec de vraies données.
Les compétences à contrôler chez un développeur dataviz
- D3.js : data join, échelles et formes
- Rendu SVG, Canvas et WebGL
- Performance sur gros volumes
- Intégration dans un framework front
- Choix de l'encodage visuel
- Accessibilité des graphiques
Données qui bougent, gros volumes, lisibilité : cinq questions D3.js
Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.
Question 1 · junior à confirmé
Une série se met à jour toutes les dix secondes : des points apparaissent, d'autres disparaissent. Comment écrivez-vous cette mise à jour avec D3 ?
Une bonne réponseUn data join avec une fonction de clé, du type data(points, d => d.id), puis selection.join() avec des fonctions distinctes pour l'entrée, la mise à jour et la sortie. Les points qui restent gardent leur élément et peuvent glisser vers leur nouvelle position par une transition. Les points qui partent sont retirés proprement, ceux qui arrivent sont créés au bon endroit.
Signal d'alerteTout effacer avec selectAll().remove() puis redessiner à chaque mise à jour. Ou un data join sans clé, qui associe les données aux éléments par leur position et fait sauter les points d'une série à l'autre.
Question 2 · confirmé
Un nuage de points doit afficher 200 000 points avec une infobulle au survol, et la version SVG rame. Que proposez-vous ?
Une bonne réponsePasser sur Canvas, voire WebGL si le volume grossit encore : un seul élément dessiné au lieu de 200 000 nœuds dans le DOM. Le survol ne passe plus par un événement par point mais par un index spatial, d3.quadtree ou d3.Delaunay et sa méthode find, qui retrouve le point le plus proche du curseur. Un profil solide demande aussi si chaque point doit être lisible : une agrégation en hexagones ou une carte de densité répond souvent mieux à la question posée.
Signal d'alerte« J'optimise le CSS » ou « j'ajoute un debounce » en gardant 200 000 cercles SVG. Aucune idée de la façon de savoir quel point est survolé une fois le dessin fait sur Canvas.
Question 3 · confirmé
Dans une application React, qui doit écrire dans le DOM du graphique : React ou D3 ?
Une bonne réponseIl sépare les modules. Ceux qui ne touchent pas au DOM (d3-scale, d3-shape, d3-array, d3-format) servent à calculer, et React rend les éléments SVG dans le JSX. Pour d3-axis, d3-zoom, d3-brush ou les transitions, il passe par une ref et un useEffect, avec un nettoyage au démontage. La règle tient en une phrase : jamais React et D3 sur le même nœud. Il mémorise les échelles pour éviter de tout recalculer à chaque rendu.
Signal d'alerteUn d3.select('body') ou un sélecteur global dans le composant, qui multiplie les graphiques à chaque rendu. Des écouteurs de zoom jamais retirés.
Question 4 · confirmé
Le métier demande un camembert à douze parts et un graphique en barres dont l'axe commence à 950. Que répondez-vous ?
Une bonne réponseSur le camembert : les angles et les surfaces se comparent mal, surtout à douze parts. Il propose des barres horizontales triées, avec les petites catégories regroupées. Sur l'axe : la longueur d'une barre code la valeur, donc l'axe part de zéro, sinon un écart de 2 % ressemble à un doublement. Pour montrer de petites variations, il passe à une courbe ou à un graphique en points, où le zéro n'est pas obligatoire, ou il affiche directement l'écart.
Signal d'alerteExécuter la demande sans rien dire, ou un refus de principe sans proposer d'alternative au métier.
Question 5 · confirmé
Comment rendez-vous un graphique en courbes utilisable au clavier et par une personne qui utilise un lecteur d'écran ?
Une bonne réponseUn SVG avec role="img", un titre et une description qui donnent le message du graphique, et un tableau des données accessible à côté. Si le graphique est interactif, les points se parcourent au clavier avec un focus visible et l'infobulle s'ouvre aussi au focus. Les lignes atteignent un contraste de 3:1 avec le fond (critère 1.4.11 des WCAG) et l'information ne repose pas sur la couleur seule : étiquettes directes en bout de courbe, motifs ou formes.
Signal d'alerte« On met un attribut alt », ou une palette choisie au goût sans vérifier contraste ni daltonisme. Un aria-label sur chacun des mille points, sans résumé.
Recevez la fiche d'entretien complète en PDF
La fiche pour mener l'entretien de bout en bout, prête à imprimer ou à partager avec le manager.
- 30 questions sur 6 axes, avec la bonne réponse, le signal d'alerte et la relance
- Le niveau visé pour chaque question
- Une mise en situation de 20 minutes et ce qu'on attend du candidat
- La grille d'évaluation de 1 à 4, axe par axe
Recruter en dataviz : les points que soulèvent les recruteurs
Quelle différence entre un développeur dataviz et un consultant Power BI ?
Le consultant Power BI travaille dans un outil de BI : modèle de données, DAX, rapports configurés. Le développeur dataviz écrit du code, en JavaScript ou TypeScript, pour des graphiques qu'aucun outil ne propose ou qui doivent s'intégrer dans un produit web. Le premier vient plutôt de la data, le second du développement front. Si vos graphiques restent internes et standards, un outil de BI suffit souvent.
Faut-il exiger D3.js, ou un bon développeur React suffit-il ?
Un développeur React solide peut monter en compétence sur D3, mais la courbe existe : data join, échelles, gestion des dates, rendu Canvas. Pour un premier poste dataviz dans une équipe sans référent, cherchez une expérience D3 réelle. Si un senior encadre, un profil front avec une bonne culture visuelle et des notions de statistique peut convenir. Les questions sur le data join et l'intégration React font vite la différence.
Quel test technique proposer à un développeur dataviz ?
Un exercice court en direct fonctionne mieux qu'un projet à rendre. Donnez un graphique existant qui rame ou qui redessine tout à chaque mise à jour, et demandez de le corriger en expliquant ses choix. Une variante consiste à faire critiquer un graphique trompeur. Vous voyez en une demi-heure le niveau de code, la méthode de diagnostic et le jugement sur la lisibilité.
Un portfolio suffit-il pour juger un développeur data visualisation ?
Il montre le sens visuel et la variété des sujets traités. Il ne montre pas le comportement du code avec des données qui changent, des volumes importants ou une contrainte d'accessibilité. Demandez de revenir sur un projet du portfolio : d'où venaient les données, ce qui a posé problème, ce qui serait refait autrement. Un profil qui a construit lui-même répond avec précision.
Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.
