Code Monkey home page Code Monkey logo

efj-atelier-datavisualisation's Introduction

EFJ - Atelier data visualisations

Ce repository contient les éléments pour l'atelier de data visualisations pour les étudiants de l'EFJ.

Professeur : Hugo Barbieux [email protected]

Twitter

Slides pour l'atelier

Synopsis

Cet atelier a pour but de mettre dans les mains des étudiants une série d'outils de mise en forme des données et de leur donner les clés de compréhension pour s'adapter aux nouveaux outils à venir.

Les étudiants verront clairement en quoi une base de données est une mise en forme particulière de l'information de sorte que ces informations soient interprétables par un ordinateur. De ce fait, les étudiants comprendront comment un programme de visualisation fonctionne et pourront ainsi adapter et nettoyer leurs bases de données en fonction des outils qu'ils choisiront d'utiliser.

Ils pourront à la fin de cet atelier identifier quelle visualisation est la mieux appropriée à l'information qu'ils veulent transmettre et déterminer l'esthétique et l'identité visuelle de leur projet.

Aboutissement

Créer des data visualisations avec différents programmes et pour différentes plateformes.

Identifier comment mettre en forme des données pour transmettre la bonne info.

Évaluation

Pitcher une idée de datavisualisation en quelques lignes comme si on voulait vendre un sujet à un rédacteur en chef. Réaliser cette data visualisation de manière informative, originale et esthétique. Tips pour les pitches ici.

Introduction

Quelques exemples, le champ des possibles en data visualisations. Nous reviendrons sur ces exemples au long de l'atelier pour expliquer et démystifier ces exemples parmi les publications les plus prestigieuses... et pourquoi pas, reproduire ces visualisations.

À voir :

Sigma Awards - section data visualisations.

The Economist - A Year in Graphic Detail

Repères théoriques

Quoi de plus compliqué que des chiffres dans un tableau Excel ? Mettre en forme ces chiffres pour rendre l'information compréhensible pour notre cerveau et faire apparaître des tendances, des ordres de grandeur, des répartitions géographiques, etc.

De quoi est composée une datavisualisation :

  • Structure, échafaudage
  • Contenu (encoding) - la visualisation en elle-même

Utiliser le vocabulaire visuel du FT pour choisir la bonne méthode d'"encoding" en fonction de ce qu'on veut raconter.

  • Annotations (textes de contexte et légende)

Dans quel ordre :

  • Trouver un sujet
  • Trouver des données
  • Vérifier
  • Mettre en récit
  • Créer le design

Culture générale

Narrative Visualization : Telling Stories with Data

Newspaper sites need to change

Wall Street Journal guide

Alberto Cairo

Les dataviz pour trouver des idées de sujet

Parfois, créer une data visualisation ne sert pas seulement à agrémenter son récit d'éléments visuels. En tant que journaliste, visualiser des données permet d'explorer son jeu de données, et ce, avant du publier son sujet. Inzight, programme développé par l'Université d'Auckland, en Nouvelle-Zélande, est parfait pour cette tâche.

Avec une data visualisation, les données se retrouvent en contexte, on se rend alors mieux compte des éventuelles faiblesses de ses données (faut-il chercher d'autres données ?) ou s'il existe d'autres angles intéressants à traiter.

Une notion très importante à prendre en compte est la différence entre corrélation et correspondance.

Mise en formes des données

Certaines bases de données ne sont pas au bon format. Elle sont dans un format large, au lieu d'un format long. On dit que chaque ligne (row) correspond à une seule "observation". Exemple des données de la Banque Mondiale. Une opération de nettoyage sur OpenRefine est necessaire. [Tutoriel pour le nettoyage OpenRefine}(https://blog.ouseful.info/2012/07/30/data-shaping-in-google-refine-generating-new-rows-from-multiple-values-in-a-single-column/).

Graphiques et tableaux

Ce que nous apprend la couverture médiatique de la crise du coronavirus.

Utilisation des plateformes Datawrapper et Flourish pour construire des data visualisations interactives.

Localisations et cartes

Comment parler de data visualisations sans évoquer les cartes ? Mais la localisation de données passe aussi sans cartes. On peut tout aussi bien identifier des personnes sur une photo de groupe.

Attention à ne pas en abuser. Quand utiliser des cartes et quand ne pas les utiliser ? Suivez le guide.

Les médias d'investigation Bellingcat et Forensic Architecture ont publié une carte des violences policières durant les manifestations BLM de 2020. Utilisation des données rendues disponibles pour reproduire une carte similaire.

Utilisation des programmes Flourish, DataWrapper et QGIS pour personnaliser au maximum des cartes.

Code et interactivité

Les données peuvent être encodées en une multitude de formats. Au cours de cet atelier nous avons beaucoup utilisé de CSV et nous avons vu quelques formats d'encodage géographiques.

Mais les data sont presque toujours présentées sous forme de tableau, dans un tableur. Et parfois, c'est aussi la manière la plus efficace de visualiser des données, comme par exemple, des résultats sportifs.

Essayons de créer un tableau interactif sur une page Web. Pour ça, il faut écrire en JavaScript. Allons plus loin en créant un graphique basé sur ce tableau.

On peut simplement créer un compteur en JavaScript. Quand les chiffres sont impressionnants, cette visualisation donne un effet d'accumulation intéressant.

Différentes plateformes

De la presse écrite aux réseaux sociaux. Exemple d'une Une du New York Times.

Un dérivé de la visualisation : l'audiolisation, comme le permet l'appli TwoTone.

Focus sur l'excellent (et inspirant) travail de Mona Chalabi sur Instagram et TikTok.

Pour aller plus loin

L'intérêt de R et du partage des données. Cas concret des données du coronavirus.

efj-atelier-datavisualisation's People

Contributors

hugobarbieux avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.