🎄 Des conspirationnistes hyper connectés, des prénoms animés, des murs dénoncés et des SVG dénichés

La newsletter qui fait parler les données

Buena Vista Data Club - #9 - décembre 2024

La newsletter qui fait
parler les données

📣 Contribuer au dĂ©bat ?

La dataviz peut-elle servir Ă  quelque chose dans ce monde en fuite vers les extrĂȘmes ? Vaste et pesante question Ă  laquelle nous avons la prĂ©tention de croire que oui. En rendant visible l’invisible, elle peut notamment contribuer Ă  dĂ©voiler des rĂ©seaux potentiellement dĂ©stabilisateurs.

✍ Dans cette nouvelle Ă©dition, dĂ©couvrez comment nous avons rendu lisible et explorable les liens de la sphĂšre conspirationniste avec Conspiracy Watch
+ un tuto sur notre botte secrĂšte pour capter des SVG dans du code
+ une “performance cartographiĂ©e”‹
+ votre prénom en mode animé
+ les actus et plein d’inspirations

L’équipe de WeDoData

👉 Merci d’ĂȘtre toujours plus nombreux Ă  nous lire.
Bravo pour vos suggestions et inspirations : hello@wedodata.fr

DANS NOTRE RADAR

🌎 Ces data(viz) font l’actu

● Des destructions monstrueuses. Selon l’ONU, plus de 42 000 tonnes de dĂ©bris de bĂątiments recouvrent aujourd’hui la bande de Gaza, soit assez de gravats pour remplir une file de camions-bennes allant de New York Ă  Singapour. D’une incroyable prĂ©cision, les cartographies en extrusion de Bloomberg donnent Ă  voir l’ampleur du dĂ©fi.
À mesurer

● Des constructions belliqueuses. À la frontiĂšre entre la Chine et ses voisins, l’Inde, le Bhoutan ou le NĂ©pal, il n’y a pas de mur Ă  proprement parler, mais un ensemble de villes et villages construits par le gouvernement chinois. Objectif : en faire des colonies de dĂ©fense du territoire. Le New York Times dĂ©voile ces avant-postes aprĂšs avoir scannĂ© les images satellites de la frontiĂšre chinoise avec des outils d’IA.
À scruter

● Des importations coĂ»teuses. Sans eux, l’Europe ne construira pas d’éoliennes, de voitures Ă©lectriques ou de panneaux solaires : 86 matĂ©riaux, dont le lithium, le gallium et les terres rares, sont considĂ©rĂ©s comme critiques pour l’économie europĂ©enne. Le journal flamand De Tijd propose un scrollytelling trĂšs Ă©clairant sur la dĂ©pendance du continent - et de la Belgique en particulier - Ă  ces matiĂšres structurantes de notre avenir.
À scroller (en nĂ©erlandais, donc vive la traduction automatique)

DANS LES COULISSES DE


đŸ”„ La premiĂšre carte interactive du web conspirationniste francophone

Coulisse - Conspiracy Watch : la carte du web conspirationniste francophone - navigation dans l’interface

Le dĂ©fi. Depuis 16 ans, Conspiracy Watch sensibilise aux dangers des thĂ©ories conspirationnistes et antisĂ©mites, ainsi que du nĂ©gationnisme. Pour la premiĂšre fois, son Ă©quipe a analysĂ© de maniĂšre systĂ©matique et approfondie 130 sites francophones identifiĂ©s comme actifs dans la “complosphĂšre” francophone.

Des donnĂ©es sensibles. Dans les mains de WeDoData, des donnĂ©es de diffĂ©rentes natures et au potentiel explosif :

  • 📙 les notices documentaires des experts de Conspiracy Watch sur chacun de ces sites et leur classification dans l’une des six familles complotistes.

  • đŸ’»ïž les chiffres de frĂ©quentation de ces sites via Similarweb.

  • ⛓ un million de liens hypertextes extraits avec Hyphe, outil du MĂ©dialab de Sciences Po : chaque site recensĂ© a en effet Ă©tĂ© visitĂ© par un robot qui en a extrait les liens hypertextes afin de comprendre avec quels autres sites il Ă©tait reliĂ©.

Coulisse - Conspiracy Watch : la carte du web conspirationniste francophone - rĂ©alisĂ© avec l’outil Retina de Ouestware

Une carte de rĂ©seau Ă  plusieurs mains. Avec un sujet aussi brĂ»lant, la maĂźtrise parfaite des technologies et algorithmes des graphiques de rĂ©seau Ă©tait indispensable. WeDoData s’est donc associĂ© Ă  Ouestware, l’un de ses partenaires, spĂ©cialiste du sujet en France avec leur outil Retina. À WeDoData, la gestion de projet et l’UX-design ; Ă  Ouestware, le dĂ©veloppement de l’outil.

Une navigation puissante. Le web conspirationniste francophone se dessine pour la premiĂšre fois sous nos yeux : il fait apparaĂźtre son extrĂȘme densitĂ©. Peu de sites s’éloignent de cette boule de liens. StupĂ©fiante imbrication alors que les thĂ©matiques dĂ©fendues sont extrĂȘmement variĂ©es : contrĂŽle mental de la population 🧠, complot maçonnique đŸȘŹ, Ă©lite sataniste đŸ‘č, grand remplacement 🔄, Illuminati đŸ‘ïž, Pizzagate 🍕
 L’outil vous permet de filtrer finement cet amas de sites : par thĂ©matique, par intensitĂ© complotiste (nombre de thĂ©ories du complot dĂ©fendues), par audience et par pays.

Coulisse - Conspiracy Watch : la carte du web conspirationniste francophone - les filtres : thématiques, intensité complotiste, pays, audience mensuelle

POUR ALLER ENCORE PLUS LOIN

● Conspiracy Watch dĂ©taille ici la mĂ©thodologie de ce projet inĂ©dit

● DĂ©couvrez Ouestware et leurs projets open source : Retina, Sigma.js ou Gephi

● Merci Ă  toutes les personnalitĂ©s hyper compĂ©tentes qui accompagnent WeDoData depuis des annĂ©es

LES BONS OUTILS

đŸ› ïž On partage nos meilleures astuces

đŸŒ¶ïž Niveau facile
● Pour les free font lovers. LassĂ© de chercher une typo qui fera la diffĂ©rence et que vous ne trouvez pas dans Google font ? La team Velvetyne propose sa liste de fonderies open source oĂč vous dĂ©nicherez pĂ©pites sur pĂ©pites. N’oubliez pas de jeter un Ɠil Ă  leurs propres crĂ©ations expressives et engagĂ©es !

đŸŒ¶ïžđŸŒ¶ïž Niveau moyen
● Pour les explorateurs de photos. Vous travaillez sur un sujet basĂ© sur des centaines de photos rĂ©cupĂ©rĂ©es sur un groupe Telegram ou un mĂ©dia social ? Les Ă©quipes de Bellingcat ont crĂ©Ă© Smart Image Sorter, un outil open source utilisant l’IA pour les classifier Ă  partir d’étiquettes que vous aurez spĂ©cifiĂ©es.

đŸŒ¶ïžđŸŒ¶ïžđŸŒ¶ïž Niveau expert
● Pour les dashboarders. Tristan Guillevin aka Ladataviz vous propose un plugin Figma pour customiser vos dashboards rĂ©alisĂ©s sous Tableau. Vous n’aurez plus Ă  vous casser la tĂȘte Ă  essayer de reproduire/construire votre interface directement dans Tableau. Vous n’ĂȘtes pas Ă  l’aise avec Figma ? Il a concoctĂ© un tuto aux petits oignons đŸ§… pour vous aider Ă  vous lancer.

S’ABONNER

On vous a transféré cette newsletter ?

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

« Les ocĂ©ans, c’est vague. Â»

🌊 Un datajournaliste noyĂ© dans son enquĂȘte 🌊‍

LE COIN DO IT YOURSELF

đŸ•”ïžâ€â™€ïž La technique secrĂšte pour rĂ©cupĂ©rer des visualisations dans le code d’un site

DIY - RĂ©cupĂ©rer une visualisation dans le code d’un site web

L’intĂ©rĂȘt. Vous avez sous vos yeux LA cartographie dont vous avez besoin pour votre projet. Pas de bol, les donnĂ©es ne sont pas disponibles, vous ne pouvez donc pas reproduire cette carte. Avec ce DIY, vous Ă©conomiserez beaucoup de temps en apprenant Ă  rĂ©cupĂ©rer - lorsque cela est possible - des Ă©lĂ©ments SVG (cartes, graphiques de donnĂ©es et autres assets visuels) d’une page web.

Les prĂ©-requis. Savoir ce qu’est un fichier SVG. Se dĂ©brouiller avec Figma (vous pouvez dĂ©marrer ici). Enfin, last but not least, maĂźtriser l’art du clic droit au survol du visuel Ă  rĂ©cupĂ©rer depuis votre navigateur et savoir
 le copier-coller.

Mode d’emploi. Prenons un cas concret, cette magnifique carte isochrone montrant le temps nĂ©cessaire pour se rendre dans n'importe quel point de l’Europe en partant de Paris, en utilisant uniquement le train 🚊 ou en marchant đŸš¶â€â™€ïžĂ  un rythme rapide de 5 minutes par kilomĂštre. Les donnĂ©es ne sont pas disponibles et, par ailleurs, il serait fastidieux et long de reproduire cette carte.

DIY - RĂ©cupĂ©rer une visualisation dans le code d’un site web - inspecter le code

1. đŸ•¶ïžïž Commençons par vĂ©rifier que cette carte est bien au format SVG : positionnez-vous au-dessus avec votre curseur et faites un clic droit. Un menu contextuel apparaĂźt avec une option “Inspecter” parmi les actions possibles. Ce libellĂ© peut varier en fonction de votre navigateur : “Inspecter l’élĂ©ment” sur Safari par exemple. SĂ©lectionnez celui-ci.

DIY - RĂ©cupĂ©rer une visualisation dans le code d’un site web - trouver une balise svg dans tout le code de la page web

2. đŸ˜± Pas de panique pour celles et ceux qui ne maĂźtrisent pas le code : vous venez juste d’afficher la fenĂȘtre des outils de dĂ©veloppement. C’est l’envers du dĂ©cor du site web qui s’affiche ici. Dans la partie de gauche, vous voyez le code HTML avec les balises des Ă©lĂ©ments de la page. ‹🔍 Nous y cherchons une balise <svg>. Utilisez la recherche en tapant svg. Parfois, ce fameux SVG est cachĂ© Ă  l'intĂ©rieur d’autres balises (<div>), n’hĂ©sitez donc pas Ă  les ouvrir pour voir s’il s’y cache. Dans notre cas, elle est lĂ  ! đŸŽ‰

DIY - RĂ©cupĂ©rer une visualisation dans le code d’un site web - trouver une balise svg et copier son contenu

3. đŸ–Č Positionnez-vous sur cette balise SVG et cliquez pour la sĂ©lectionner. Faites un simple ⌘+C (MAC) / Ctrl+C (PC) pour le copier.

4. âžĄïž Rendez-vous sur Figma, ouvrez votre projet ou un nouveau document (⌘+N) et faite un ⌘+V (mac) / Ctrl+V (PC) pour coller ce SVG. Tadaaa, vous venez de rĂ©cupĂ©rer la carte. đŸȘ„

DIY - RĂ©cupĂ©rer une visualisation dans le code d’un site web - coller le svg dans Figma et changer les couleurs Ă  la volĂ©e

5. Chaque couche est un objet vectoriel que vous pouvez dĂ©sormais manipuler/modifier. Petite astuce Figma au passage :‹
đŸ„… En sĂ©lectionnant cette carte, le menu “Selection colors” affichera toutes les couleurs qui la composent. Vous pouvez donc Ă©diter ces couleurs Ă  la volĂ©e depuis ce menu, sans avoir Ă  cliquer sur les couches une Ă  une.

DIY - RĂ©cupĂ©rer une visualisation dans le code d’un site web - exemple avec la carte isochrone des temps de transports en Europe

Conclusion. Voici un copiĂ©/collĂ© qui peut vous faire Ă©conomiser pas mal de temps, ça serait dommage de s’en priver.
đŸ‘†ïžCadeau : WeDoData a repris cette carte pour la publier, aprĂšs une bonne couche de design, dans l’Atlas des mobilitĂ©s de la fondation Heinrich Böll.

POUR ALLER ENCORE PLUS LOIN

● Pour complĂ©ter ce DIY, vous pouvez utiliser le plugin SVG Gobbler (sur Google Chrome uniquement) qui vous permettra de tĂ©lĂ©charger tous les SVG d’un site, mais pas ceux bien cachĂ©s comme la carte de notre tuto.

● Vous optimisez vos fichiers PNG et JPG ? Conservez cette bonne pratique avec vos fichiers SVG en utilisant l’incontournable site SVGOMG.

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

Karen, datajournaliste de l’équipe

Oui, les murs ne servent Ă  rien

Une “performance cartographiĂ©e”, voilĂ  un format inĂ©dit qu’ont offert Philippe Rekacewicz, gĂ©ographe-cartographe, et Karen Akoka, spĂ©cialiste des migrations internationales Ă  l’occasion du festival “Les murs ne servent Ă  rien” dans la DrĂŽme. DĂ©couvrez ce dialogue - heureusement filmĂ© - entre les deux experts : l’un s’exprimant par la projection de cartes dessinĂ©es et sensibles, sa spĂ©cialitĂ©, l’autre par le rĂ©cit de ce monde nourri de nombreux fantasmes sur les migrations. Savez-vous, par exemple, que les migrations Sud-Sud et Nord-Sud surpassent en volume celles du Sud vers le Nord ?

🌐 Le site “Visionscarto”, lieu de recherche et d’expĂ©rimentation sur les 1001 façons de « dessiner Â» le monde tel qu’on le perçoit
📖 Le livre “Cartographie radicale” publiĂ© chez La DĂ©couverte

DANS NOTRE SAC

đŸȘ Les pĂ©pites data du mois

● C’est graphique. Les “Petites images du climat” sont des posters au style Ă©purĂ© mais impactant, rĂ©alisĂ©s Ă  partir de plusieurs bases de donnĂ©es - fournies par l’Agence spatiale europĂ©enne - sur la montĂ©e des eaux, les Ă©missions CO2 ou les feux de forĂȘt.

● C’est emboĂźtĂ©. Reuters nous embarque Ă  bord d’un scrollytelling infographique et illustrĂ© avec pertinence : il retrace l’itinĂ©raire secret utilisĂ© par les trafiquants de drogue pour transporter les produits chimiques nĂ©cessaires Ă  la fabrication du fentanyl.

● C’est perfectionniste. Le map maker Dom Riccobene s’amuse Ă  imprimer en 3D des cartes topographiques de lieux existants ou imaginĂ©s. DĂ©couvert avec sa carte du cĂ©lĂšbre jeu GTA, il remet le couvert et s’attaque Ă  celle du jeu Read Dead Redemption.

● C’est stratosphĂ©rique. Cartographier les 58 formes de nuages existantes de maniĂšre synthĂ©tique, c’est le dĂ©fi qu’ont relevĂ© Marion Saint-Luc et Jessica Vial dans une visualisation gĂ©ante qui allie densité  et lĂ©gĂšretĂ©.

La viz de la fin

Votre prĂ©nom est-il has been ? Karim DouĂŻeb, incroyable crĂ©atif du data-design, a la rĂ©ponse avec sa derniĂšre crĂ©ation : Baby Names. Vous tapez votre prĂ©nom et en une seconde, les lettres de celui-ci se dĂ©forment en suivant la courbe du nombre de bĂ©bĂ©s baptisĂ©s comme vous. C’est fun et instructif. Le graphique se customise en couleurs et se tĂ©lĂ©charge. Et en plus, les donnĂ©es sont disponibles pour la France et les États-Unis.

Viz de la fin - Baby Names par Karim DouĂŻeb / Jetpack.ai - observer les tendances des prĂ©noms donnĂ©s Ă  la naissance en fonction des annĂ©es en France et aux États-Unis

On se retrouve l’an prochain

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

đŸ‡«đŸ‡· Festival OSINT#2 Ă  la GaitĂ© lyrique Ă  Paris les 6 et 7 dĂ©cembre : il met l’accent sur les enquĂȘtes OSINT en pĂ©riode de conflit armĂ©, un sujet central depuis l'invasion de l’Ukraine et la guerre IsraĂ«l-Hamas.
🌎 Information is Beautiful Awards 2024, le cĂ©librissime concours mondial de datadesign, ouvre les portes des candidatures le 15 dĂ©cembre.

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