💼 Ma toute première dataviz
Les outils de graphiques interactifs sont de plus en plus "magiques" : pas besoin de coder, même plus besoin de savoir quel graphique choisir car ils le proposent eux-mêmes à partir de la base de données fournie... Flourish vient ainsi de sortir sa fonctionnalité "Start with data". Mais alors qu’est-ce qu’il vous reste à faire ?
Réveiller la dataviz qui est en vous. Chez WeDoData, nous défendons l’idée qu’il reste TOUT à faire, car dans notre métier, il est impossible de se contenter du plat préparé dont on ignore les ingrédients et la recette.
🛠 Alors, nous vous avons concocté un tutoriel pour comprendre toutes les étapes depuis la base de données jusqu'au graphique interactif. Une fois maîtrisé ce process, vous pourrez ensuite vous appuyer intelligemment sur les fonctionnalités d'automatisation et de suggestion des outils.
Au commencement était le set de data. Pour se lancer, le seul pré-requis est d’avoir un tableur de données à représenter. Nous vous proposons de nous plonger dans les indices de la liberté de la presse, calculés pays par pays par Reporters Sans Frontières (pour réaliser votre graphique, nous vous le fournissons au format Excel ici). En explorant le fichier, une question émerge : le contexte socio-politique conditionne-t-il la liberté de la presse dans les différentes régions du monde ?
Vient le choix de la visualisation. Avant d’y répondre, le défi qui se pose est la sélection de la forme visuelle, LA bonne dataviz. Ce choix dépend de plusieurs paramètres : la typologie de vos données (géographique, temporelle, numérique, catégorielle…), la taille de votre base, votre angle éditorial bien sûr, votre audience...
📍Rendez-vous sur From Data to Viz, un site créé par Yan Holtz pour s’y retrouver dans la jungle des visualisations. En fonction des types des colonnes de votre jeu de données, il vous suggère des viz adaptées. Notre Excel présente une colonne de pays et plusieurs colonnes numériques avec des scores sociaux, politiques ou économiques : le site nous oriente vers plusieurs visualisations. C’est le nuage de points (“scatter plot” en anglais) qui nous semble pertinent, car il réussit à croiser trois informations pour une même entité (en abscisse, en ordonnée et en couleur). Or ici, pour chaque pays, nous voulons croiser deux indicateurs socio-économiques et leur note en terme de liberté de la presse.
Ensuite, direction l’outil de graphiques. A chaque viz suggérée, From Data to Viz propose aussi des outils pour les réaliser. Nous optons pour l’excellent Flourish (un compte gratuit vous suffit). Nous cliquons sur “New visualization” et choisissons un “Basic scatter plot” dans le vaste catalogue de ce site (🔍 si vous êtes perdus, passez par le moteur de recherche).
À la fin, survint la dataviz. Flourish propose deux onglets pour chaque viz : “Preview” qui montre la visualisation et “Data” qui dévoile les données derrière cette viz. Rendez-vous dans la section “Data”, supprimez les données d’exemple et copiez-collez les data fournies en Excel.
Sur le côté droit, il vous reste à relier les datas à la visualisation. Concrètement, vous allez attribuer une colonne à chacune des dimensions du graphique :
- la colonne J sur l’axe horizontal (X values) : c’est le contexte social
- la colonne D sur l’axe vertical (Y values) : c’est le contexte politique
- la colonne N sur la couleur (color) : c’est la situation de la liberté de la presse
- la colonne P sur la grille de graphiques (Grid of charts) : c’est l’état des lieux par région du monde
Vous allez voir votre graphique se matérialiser en direct en bas à droite et il s’affichera en grand sur “Preview”.
Bonus : titre, export et ajustements. Ça y est, vous tenez votre premier scatter plot interactif, bravo ! Il vous reste à le titrer, le légender et le sourcer (chapitres Header et Footer dans la colonne de droite). Ce rendu de base prend en compte un certain nombre de règles d’accessibilité et de lisibilité. Mais vous pouvez ajouter des labels, des animations dans cette même colonne.
📩 Partagez-le grâce au bouton d’export en haut à droite. Une fois publié, vous obtenez une URL et même un code d’embed pour l’intégrer à votre site. Si vous voulez aller plus loin en customisation visuelle, téléchargez-le au format SVG pour le retravailler avec des logiciels tels qu’Illustrator, Inkscape ou Figma.
POUR ALLER ENCORE PLUS LOIN
- Datawrapper, un autre site gratuit pour créer ses graphiques interactifs.
- Dataviz project, un autre site de sélection de graphiques pertinents.
