Le mot d'introduction
Ce mois-ci, Alain Roan vous invite Ă un meetup sur la mise Ă disposition sur le web de vos visualisations.
Nous vous proposons aussi de découvrir deux outils intéressants pour créer vos dataviz. Vous connaissez le webcomic xkcd et la librairie Python matplotlib ? Vous pourrez créer des visualisations dans le style graphique de xkcd. Rawgraphs est un générateur de dataviz qui propose prÚs de 30 types de graphiques pour représenter des quantités, des hiérarchies et des séries temporelles. Il exporte vos graphiques au format vectoriel, ce qui vous permet de les rééditer facilement.
Enfin, Christophe nous présente une méthode typiquement japonaise pour encourager les gens à voter lors des élections.
Â
Meetup ObservableHQ Framework
Mettre sur le web votre tableau de bord, rapport et application efficacement et gratuitement
20 Juin - 19h Ă Etincelle Alsace Lorraine
ObservableHQ nous Ă©merveille depuis dĂ©jĂ huit ans pour sa facilitĂ© Ă crĂ©er des visualisations de donnĂ©es incroyables avec d3.js et Plot. La tarification de cet environnement a Ă©tĂ© changĂ©e et ce dernier sâenrichit continuellement de nouvelles bibliothĂšques (Bertin.js, DuckDB, geoviz, âŠ). Et surtout, il introduit rĂ©cemment Framework qui permet de dĂ©ployer sur le web en quelques clics, son tableau de bord / rapport /application.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F76cc013e-f69f-4064-968a-40ad267b553c%2FUntitled.png?table=block&id=98d7b2ff-d14a-443b-823a-dde580e0a6ad&cache=v2)
Que vous soyez un vĂ©tĂ©ran de frameworks comme Gatsby, Nextjs et autres gĂ©nĂ©rateurs statiques de site web ou que vous soyez totalement ignorant de la chose, vous serez pareillement Ă©tonnĂ© de la simplicitĂ© et de lâĂ©lĂ©gance de la solution Observable Framework.
Venez voir comment mettre sur le web votre tableau de bord / rapport / application, efficacement et gratuitement. Alain Roan prĂ©sente pas Ă pas les Ă©tapes Ă partir dâun classeur partagĂ© en sĂ©ance. Si vous voulez venir avec votre machine pour faire vous-mĂȘme, vous ĂȘtes les bienvenus.
S'inscrire ici
Humour et dataviz
xkcd (ou XKCD) est une bande dessinĂ©e en ligne crĂ©Ă©e en 2005 par Randall Munroe. Lâauteur la dĂ©finit comme « un webcomic qui parle de romance, de sarcasme, de maths et de langage ». Ce comic strip parait quasiment trois fois par semaine et aborde la culture geek en gĂ©nĂ©ral, mais aussi plusieurs sujets scientifiques comme les mathĂ©matiques ou le rĂ©chauffement climatique. Certaines bandes dessinĂ©es contiennent des datavisualisations particuliĂšrement intĂ©ressantes. Son style graphique unique a Ă©tĂ© intĂ©grĂ© Ă la fameuse librairie de datavisualisation de Python Matplotlib grĂące Ă la mĂ©thode plt.xkcd.
![Un exemple de dataviz humoristique : https://xkcd.com/418/. Vous pouvez reproduire ce style graphique facilement grĂące Ă Matplotlib : ici](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F1cbf5e2b-972f-45fb-b934-afc8be3076c3%2FUntitled.png?table=block&id=c382d49a-936b-4e19-bcf0-b0909cf97e84&cache=v2)
Â
![Une excellente rĂ©alisation âsĂ©rieuseâ de xkcd oĂč on raconte exhaustivement lâhistoire complĂšte du rĂ©chauffement climatique. Cette case de BD mesure 15 000 pixels de long, au fur et Ă mesure quâil avance dans le temps, le lecteur y est accompagnĂ© Ă©tape par Ă©tape Ă lâaide dâune explication sur les donnĂ©es. La rĂ©alisation est disponible ici : https://xkcd.com/1732/](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2Fc29520ff-c77b-4a14-8cdc-57102dbcbc39%2FUntitled.png?table=block&id=bb6be4d7-a7c8-44dc-a89a-717336a1d3d6&cache=v2)
Â
![Un exemple de datavisualisation humoristique publiée par XKCD pendant la crise Covid : https://xkcd.com/2294/](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F0af307e2-d072-4ef7-a0f3-b6e9b80ccef6%2FUntitled.png?table=block&id=27c44386-a03b-46d3-b31c-8e4619738638&cache=v2)
![Dataviz originale](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2Febbf1b74-dff8-4ec4-8b8c-363042091e47%2FUntitled.png?table=block&id=24729339-a265-40f9-bca4-77c9b43a7cfe&cache=v2)
Nous avons pris plaisir à recréer notre dataviz sur les données du nombre de participants au Hackaviz en utilisant le style graphique de XKCD sur Matplotlib. Le résultat est unique, qu'en pensez-vous ?
![Dataviz transformée avec le style graphique de XKCD](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F25268e6d-5168-4739-a9bd-c2063be41a55%2FUntitled.png?table=block&id=2414eac8-3db3-45b4-ade5-bf56e5629e8b&cache=v2)
DĂ©couvrer RAWGraphs dans le guide de la Dataviz
Dans notre guide de la dataviz, nous mettons en avant divers outils. Mais pourquoi avoir choisi RAWGraphs ?
Nous recherchions un outil en ligne gratuit, facile à utiliser, permettant de créer rapidement des visualisations de données. De plus, nous voulions un outil capable d'exporter les visualisations au format vectoriel (svg).
Ce format permet de dĂ©composer les diagrammes en un ensemble dâobjets graphiques (polygones, lignes, cercles et textes) que vous pouvez importer dans des outils de prĂ©sentation tels que PowerPoint, Draw, ou des logiciels vectoriels dĂ©diĂ©s comme Illustrator ou son Ă©quivalent libre Inkscape. Vous pouvez ainsi effectuer des modifications manuelles, souvent impossibles ou difficiles Ă rĂ©aliser directement dans lâoutil de dataviz.
Les autres avantages de RAWGraphs :
- Facilité d'apprentissage
- Large choix de diagrammes
- Possibilité de sauvegarder les projets de visualisation réalisés.
- Aucun transfert de données nécessaire
N'hésitez pas à utiliser RAWGraphs en vous appuyant sur les exemples proposés dans le guide de datavisualisation de TDV.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F27bd6ff4-1de1-48d6-98aa-6737b562d91f%2FSans_titre-1.png?table=block&id=18d958d9-6edd-4e09-a3c7-5a6ff098219f&cache=v2)
Â
Le diagramme parlementaire
Le diagramme sectoriel en hémicycle est utilisé pour représenter une composition parlementaire dans lequel les différents partis sont figurés sous forme de secteurs.
Avec les Ă©lections europĂ©ennes de 2024 et les lĂ©gislatives qui auront lieu Ă la fin de ce mois de juin, cette jolie demi-couronne fleurit sur nos Ă©crans et elle nâest pas prĂšs de sâĂ©tioler.
Cette reprĂ©sentation a toute sa place pour reprĂ©senter lâassemblĂ©e. Nous pouvons saluer le travail des dĂ©codeurs du Monde qui nous propose une visualisation des rĂ©sultats des Ă©lections europĂ©ennes Ă travers ce fameux diagramme parlementaire et une carte avec les diffĂ©rentes contributions de chaque pays.
Â
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F0aa8acfb-64f5-4fc9-a69b-bbf4aa0b8e5d%2Fparlia.jpg?table=block&id=37dbe2ab-f48e-4da0-ade4-4de8c81c881a&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2Ff3c336b7-3c97-4ce3-ae14-16b2895a886c%2Fparlia.jpg?table=block&id=9eb20c03-bdb8-479e-98f9-b4b986b0e15d&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F162d39a7-bbfa-428d-8593-70dcb93e2716%2Fparlia.jpeg?table=block&id=90547028-def3-408f-917e-93abe3779f69&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2Fa6927c8b-c971-465d-bf33-92d23139157e%2FUntitled.png?table=block&id=1ab59e5f-cab3-4889-9d1b-feca909036bd&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2Fc7e453b7-d37e-4a70-8cec-f0e7195ad36a%2FUntitled.png?table=block&id=777e715f-6eec-4820-a4fd-c4117d4b0458&cache=v2)
Toutefois, son dĂ©tournement pour reprĂ©senter le rĂ©sultat des Ă©lections est critiquable : lâabstention Ă©tant le premier parti de France, il prend une place prĂ©pondĂ©rante. Le nombre Ă©levĂ© de partis rend le graphe illisible. Il aurait peut-ĂȘtre mieux fallu utiliser un diagramme en barre.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F5c441ac9-9138-4eae-859b-5f683d467e6f%2F02-resultats-elections-europeennes-juin-2024-france-inscrits-2024-06-d.jpg?table=block&id=791051e2-3586-49c5-a1b5-ab241dbf41b5&cache=v2)
Le billet du Japon
Ă lâoccasion dâune exposition proposĂ©e dans le trĂšs bel espace musĂ©ographique  21_21 design sight  (lâun de mes musĂ©es prĂ©fĂ©rĂ©s) et intitulĂ© « Modes and Characters : Poetics of Graphic Design », jâai pu apprĂ©cier la richesse et la crĂ©ativitĂ© du design japonais, ainsi quâun petit bout de son histoire. Je reviendrai en dĂ©tail sur cette exposition lors dâun prochain billet. Signalons tout de mĂȘme que ce nâest pas pour rien si les Ă©mojis sont nĂ©s au Japon, pays oĂč lâĂ©criture entremĂȘle diffĂ©rents alphabets mĂȘlant caractĂšres, sons et images đ !
Â
![Affiche de lâexposition](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F5cea2e93-0e3c-4648-9234-7a14b0ad4d78%2FUntitled.png?table=block&id=90f6e14f-fc16-474a-84b6-54afebe3b43c&cache=v2)
Alors que nous venons de voter pour élire nos représentants lors des élections européennes, et que nous voterons encore ce mois-ci, laissez-moi vous présenter quelques infographies et visualisations, typiquement japonaises, sur ce thÚme des élections.
![Composition des différentes infographies et visualisation](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F9462c0e7-7ba3-41a9-951f-ca956256c992%2FUntitled.jpeg?table=block&id=2ab3ea36-6c0e-44cc-b516-ea2bd44ad861&cache=v2)
Commençons par ce graphique montrant le taux de participation Ă diffĂ©rentes Ă©lections rĂ©gionales (horizontalement). Ce taux de participation, en pourcentage sur lâaxe vertical, est dĂ©composĂ© par tranche dâĂąge associĂ© Ă une couleur. Ces couleurs sont rappelĂ©es par une barre qui rĂ©vĂšle le poids relatif de chaque tranche dâĂąge. Un graphique bien complexe et des tonnes dâinformations pour appeler Ă voter !
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F46dd3d64-7cf9-40c1-94ea-c948b4753d19%2FUntitled.jpeg?table=block&id=f3ae05c3-8129-42ff-a3e6-35dbba8dd500&cache=v2)
Â
Les infographies suivantes, plus comprĂ©hensibles, sont bien plus percutantes, ont Ă©tĂ© crĂ©Ă©es par le collectif « Vote Poster Project ». Cette Ă©quipe, toujours trĂšs active en 2023, crĂ©e des centaines de posters Ă©lectoraux, ce qui semble surprenant dans un pays qui nâa (pratiquement) pas changĂ© de parti au pouvoir depuis la fin de la guerre et oĂč la politique ne semble plus intĂ©resser personne.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F1be89217-54b2-4307-9594-8013ad88183f%2FUntitled.jpeg?table=block&id=3b40f84c-6a86-4641-bce5-73c7f50a3022&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2Fa673a0ce-0e9e-4d7d-97ef-e1d5f30a4698%2FUntitled.jpeg?table=block&id=5ac3164e-0e21-4865-83df-7abc0e5066e9&cache=v2)
Â
Â
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F70081ebb-0005-4aa8-9f22-02a88b3cfdd2%2FUntitled.jpeg?table=block&id=37f9d0a2-e727-449e-bfa0-94a0a9c3741e&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fadba2cb3-b809-41d0-b7a2-c0e7bfb7edbc%2F6ab18176-bac5-4bdf-bfdb-0820b15bc676%2FUntitled.jpeg?table=block&id=f8af240e-6bb5-4b0b-8f30-710fec9feb5e&cache=v2)
Ătant habituĂ© Ă une communication politique moderne (TV, internet et rĂ©seaux sociaux), jâai Ă©tĂ© Ă©tonnĂ© de constater que ce pays utilise encore, et de maniĂšre prĂ©pondĂ©rante, dâautres mĂ©dias. La puissance et le pouvoir de la communication de rue via des posters imprimĂ©s est dâailleurs mise en avant par les crĂ©ateurs de ce mouvement, nĂ© en 2021. La communication au Japon, quâelle soit politique, commerciale ou autre, est en effet bien plus imprimĂ©e que dans tout autre pays. Encore une singularitĂ© bien japonaise.
ăŸăă.
Â
ââââââââââââââââââ
Cette newsletter de Toulouse-dataviz a Ă©tĂ© rĂ©digĂ©e avec l'outil Notion que nous aimons bien. Si vous lisez cette newsletter et que vous n'ĂȘtes pas encore inscrit au club, il vous suffit de cliquer ici. Pour se dĂ©sinscrire, demandez ici. Toutes les anciennes newsletters sont consultables ici. Vous pouvez aussi rejoindre nos communautĂ©s : Club ou Discord.
Merci à nos sponsors Clever Age, Vector, Pierre Fabre, Etincelle et perceptible qui soutiennent nos activités.