La newsletter qui fait
parler les données

Dans les petits et grands secrets de la dataviz 🤫

Le mois dernier, vous avez été nombreux à répondre à notre sondage sur les contenus “coup de cœur” de cette newsletter. 
C’est l’heure des résultats : vous avez mis les tutoriels et les bonnes pratiques pour la conception et création de dataviz en tête de vos envies. Mais pas loin derrière, votre goût pour les coulisses de projets et la veille internationale s’est exprimé. Des envies de viz et de data donc, à l’image de cette alliance du fond et de la forme qui nous plaît tant.

Au menu de cette quatrième édition, des bulletins de vote, des “queer code”, du no-code, un moineau, des Gifs et des terrasses au soleil.

Bonne lecture et si vous avez une remarque, une question, une suggestion, nous sommes ici : hello@wedodata.fr

✍️ L’équipe de WeDoData

DANS NOTRE RADAR

🌎 Ces data(viz) ont fait l’actu

● Voix dissonantes. Europe Elects fait le point, pays par pays, sur les dynamiques de vote en ce mois d’élections européennes : taux de participation, favoris, enjeux nationaux, tout est décrypté en dataviz. Essentiel pour mesurer le retour en force de la droite et de l’extrême droite dans ce scrutin.
À voter par ici

● Arc-en-ciel de plomb. Alors que juin va résonner au rythme des Gay Pride, la Rainbow Map de l’association ILGA Europe offre un panorama unique sur les politiques envers les LGBTQIA+, leur discrimination, les crimes et discours de haine et l’état de la reconnaissance légale du genre dans 49 pays.
À protéger ici

● À qui le Tour ? Pour la première fois de son histoire, le Tour de France ne conclura pas sa course à Paris, Jeux Olympiques obligent. L’occasion pour “Le Monde” de revenir sur cette course mythique à travers les départements qu’elle sillonne intensément depuis 120 ans.
À pédaler ici

DANS LES COULISSES DE…

🕺 Des dataviz interactives et filtrables, le tout sans coder

Pourquoi on vous en parle ? Car le point de départ de France Digitale, association de startups et financeurs de l’innovation, est celui que connaissent beaucoup d’organisations : posséder un listing de ses membres sous une forme très statique - tableur ou PDF - et enrager de ne pas réussir à donner à voir cette communauté.
🚀 Le rêve : un annuaire en ligne de startups pour visualiser des données comme leur répartition par technologies utilisées, par effectifs, etc. et pouvoir filtrer dynamiquement la base totale par secteur ou par région.

⚠️ Le défi : un budget et un temps contraints.
❇️ La solution : faire de la dataviz en no-code. On n’avait jamais essayé à WeDoData, et alors ?

Concrètement, on a fait comment ? On se dirige rapidement vers Bubble.io, une solution de conception Web en no-code, offrant la possibilité d’héberger des données (notre fameuse liste de startups). Une fois l’outil pris en main, nous souscrivons au plugin Chart JS. À l’heure où nous écrivons ces lignes, 55 templates de graphiques sont disponibles, pour un coût abordable (170 $ à vie) et bien sûr c’est responsive, donc adapté au mobile !

Les mains dans le cambouis. Pour les personnes intéressées, voici en accéléré les grandes étapes par lesquelles nous sommes passés :
1/ intégrer une base de données de startups dans Bubble.io 
2/ connecter le plugin de graphiques interactifs
3/ construire des graphiques à partir desdites données
4/ créer un annuaire filtrable des startups
5/ essayer d’intégrer au pixel près le beau design qu’on a imaginé
6/ trouver la manière de filtrer les graphiques
7/ porter le tout sous mobile.
Et voilà le résultat : le mapping des startups de l’IA en France

Des dataviz sans coder ? Oui, mais pour produire ces tableaux de bord en 
no-code, il y a des contreparties : la nécessité de retravailler les données en amont pour qu’elles s’adaptent aux templates de graphiques, la limite en taille de la base de données Bubble et la dépendance à un service tiers.

POUR ALLER ENCORE PLUS LOIN

● WeDodata a décliné ce savoir-faire dans une série d’annuaires dataviz en no-code, après les startups de l'IA, voici les startups de l’industrie et les startups de l’impact.

LES BONS OUTILS

🛠️ On partage nos meilleures astuces

🌶️ Niveau facile
● Pour les “fondeurs” de carte. En quelques clics, vous êtes servis sur le site Pixel Map Generator : choisissez une projection, un fond de carte, la forme de pixel désiré 🟡, 🟩, 🔷, 🛑, la taille de ces derniers et leur espacement et générez votre carte custom.

🌶️🌶️ Niveau moyen
● Pour les explorateurs de dataviz. “Financial Times” donne accès à son Lexique visuel de la visualisation de données, une ressource indispensable quand on est perdu dans ses choix de graphiques. À ajouter dans vos favoris avec le Dataviz Project et le Dataviz Catalogue.

🌶️🌶️🌶️ Niveau expert
● Pour les accros aux urnes. L’open data français vient de s’enrichir de millions de votes, en l’occurrence les résultats complets d’une cinquantaine de scrutins français depuis 1999 (par bureaux de vote, communes, etc.). Et grâce au travail de l’équipe du site data.gouv, ils sont aussi proposés dans un format parquet optimisé.

S’ABONNER

On vous a transféré cette newsletter ?

N’oubliez pas de vous inscrire gratuitement pour recevoir les suivantes

« Pourriez-vous ajouter un queer code dans l’infographie ? »

🌈 Un client 🌈

LE COIN DO IT YOURSELF

🤹‍♀️ Animer un graphique avec Figma et l’exporter en vidéo/Gif

L’intérêt. Et si on animait un graphique sans passer par un logiciel de motion design (After Effects pour ne pas le citer) ? Et bien maintenant, c’est possible avec Figma.

Les pré-requis. Maîtriser Figma et notamment la partie “prototype” avec ses options d’animations. Vous ne savez pas faire ? Pas de souci, voici le tuto qu’il vous faut. Pour les besoins de ce DIY, il faudra également installer le plugin Figma Aninix qui servira juste pour l’export vidéo ou Gif. Toute l’animation sera faite uniquement avec les outils disponibles dans Figma.

Les grands principes. L’idée va être de créer 2 états d’un même graphique et d’animer le passage d’une scène à l’autre grâce au mode prototype de Figma et plus précisément aux options “After delay” et “Smart animate”. Une fois votre animation en place, vous pourrez l’exporter avec Aninix.

Ce qu’il faut retenir. Pour être animé, un élément doit se trouver au moins dans deux frames, avoir le même nom, et des paramètres (couleur, taille, position…) différents d’une frame à l’autre. Pour les plus aguerris, utilisez les animations dans les composants variants pour réaliser des animations asynchrones.


Cadeau ! On vous propose de passer directement dans l’outil pour être dans le vif du sujet où on vous a préparé un pas-à-pas à copier. N’hésitez pas à nous partagez vos créa sur les réseaux sociaux en tagguant @we_do_data. Let’s go ⬇️

Un exemple inspirant. Avec un peu de bricolage et une bonne compréhension des logiques d’animation dans Figma, vous pouvez imaginer des déroulés plus complexes. Voici un exemple, réalisé uniquement dans Figma par WeDoData pour l’Institut National de la Propriété Industrielle (INPI) : l’évolution des dépôts de brevets, marques, dessins et modèles depuis 2015.

POUR ALLER ENCORE PLUS LOIN

● Pour les habitués des interfaces d’animation, le plugin Figmotion permet de faire du motion design plus pointu dans Figma. Véritable outil dans l’outil, il propose une timeline, des animations basées sur des expressions et bien plus encore.

DIFFUSER

Vous aimez Buena Vista Data Club ?

Partagez-la à vos proches ou votre réseau en leur transférant par mail 
ou via les réseaux sociaux

✨ La bonne reco de…
Brice, directeur de projet

La carto qu’il te faut pour trouver 
ta terrasse au soleil

Comme moi, vous n’en pouviez plus de cette interminable fin d’hiver ? Vous guettiez chaque petit filet de lumière entre deux nuages ou averses pour vous ressourcer ? Alors préparez-vous pour le grand retour des terrasses avec jveuxdusoleil.fr, un site qui sonne comme un cri du coeur (ci-dessus, centré sur le Titon, notre café QG éclairé de fin de journée). Où que vous habitiez, il simule l’ombre en fonction de l’heure de la journée, vous permettant de savoir le moment idéal pour vous poser dans votre rade préféré.

DANS NOTRE SAC

🍪 Les pépites data du mois

● C’est cubique. Voyager en France parmi 46 millions de bâtiments en 3D en open source et classés par date de construction, c’est désormais possible grâce à l’IGN et Bert Temme, un développeur néerlandais, fou d’applications géospatiales : allez-y zoomer !

● C’est flippant. Les animaux migrent à cause du changement climatique et avec eux… les virus. Grist, le média écologique, et Associated Press se plongent dans l’ampleur des dangers à venir dans un dossier mixant dataviz, illustrations et enquêtes.

● C’est cérébral. Quels sont les termes que ChatGPT associe le plus au mot “intelligence” ? Santiago Ortiz, de l’agence Moebio Labs, a demandé des centaines de fois à ChatGPT : “L’intelligence est… ?” Résultat bluffant sous forme d’un incroyable arbre d’interconnexions et sa table sémantique.

● C’est décoiffant. La dataviz a cette grande capacité de dévoiler des tendances dans tous les domaines… dont le renouveau de la coupe mulet chez les joueurs de foot : un scrollytelling inattendu du média australien ABC.

La viz de la fin

La data designeuse Krisztina Szűcs poursuit son projet Plot Parade avec cette subtile création qui mêle dataviz et illustration, inspirée de l’univers de Rahul Khobragade. Krisztina offre plus qu’une visualisation puisqu’elle vous donne la possibilité de créer ce graphique - et plein d’autres - avec vos propres données. En effet, Plot parade est un générateur de graphiques artistiques créé sur la base de D3.js.

Au mois prochain pour de nouveaux partages

Avant de nous quitter, quelques dates à ne pas rater :

🗓 Outlier, la conférence annuelle de la Data Visualization Society, aura lieu du 12 au 14 juin à Chicago. La grande messe de la dataviz mondiale sera aussi en ligne. // Le Datajournalisme Climat Challenge a fait éclore 7 projets aussi variés que l’impact des castors, la plongée dans le cerveau des climatosceptiques et le sauvetage d’une dune. // Suivez le nouveau média “Dans les algorithmes” qui vient nourrir la réflexion sur la société des calculs et ses dysfonctionnement et ouvrir des alternatives.

WeDoData est un studio de datavisualisation, de design d’informations et de nouvelles narrations : wedodata.fr

Retrouvez-nous sur les réseaux sociaux :
X-Twitter • Linkedin • Facebook • Instagram • Youtube • Medium

🪃 On vous a transféré cette newsletter ?
Abonnez-vous gratuitement

📪 Vous préférez lire cette newsletter en ligne
C’est par là

📡 Vous ne jurez que par un bon vieux flux RSS
Le voici 

👋 Vous voulez déjà nous quitter ?
Désabonnez-vous par ici