Outils du web-journalisme : datavisualisation, infographies, animations interactives

Datavisualisations, diaporamas, animations, quiz…

les outils éditoriaux interactifs

mediaculture.fr

Data-journalisme kezaco ?1

Le Télégramme Les nouvelles facettes du journalisme IFRA - 2008-2009AJPI- Cyrille Frank / mediaculture.fr - mai 2015

Mettre en image des informations/données chiffrées, géographiques

Faire parler les données brutes

Synthétiser les enjeux essentiels

Les traduire visuellement

http://mediaculture.fr


Des techniques qui ne datent pas d’hier !



William Playfair (1759-1823) : ingénieur

D’après la présentation de Marion Boucharlat - La datavisualisation, c’est quoi en fait ?


http://fr.slideshare.net/marionboucharlat/presentation-dataviz?qid=81b63e8c-558f-4de3-ac1f-cb907957f553&v=default&b=&from_search=1


Charles Dupin (1784-1873) : mathématicien et ingénieur





Charles Joseph Minard (1781-1870) : ingénieur





Florence Nightingale (1820-1910) : infirmière





Le lecteur-citoyen veut comprendre le complexe Mais il souhaite que ce soit accessible et rapide Il a une exigence de transparence sur les données

publiques

Le data-journalisme répond à un besoin



Le data-journalisme est lié à une opportunité : la démocratisation des moyens

L’open-data est venu répondre (partiellement) au besoin de transparence (surtout depuis 2009 aux USA, 2011 en France)

Les outils de datamining et de data-visualisation pour les designers se sont perfectionnés

Des sites en ligne grand public sont apparus pour créer des graphiques et des infographies


Les outils grand public2


Des graphiques : infogr.am



Courbes, camemberts, bulles…



Combinaison de plusieurs graphiques pour créer des infographies



Exemple :

Comparaison des dépenses budgétaires

en 2014, entre France et USA



Etape 1: trouver chiffres crédibles



Etape 1: trouver chiffres crédibles



Etape 2: traiter les données sous forme de tableau (import Excel possible)



Etape 3: publier et récupérer le code embarqué (« embedd »)



Etape 4: embarquer le code dans sa page web



Résultat :


http://www.mediaculture.fr/2012/05/18/infogram-openstreetmap/


Des graphiques plus souples : datawrapper.de*



Plusieurs mises en forme dynamiques (qui s’adaptent à partir d’un même jeu de données)



Diagrammes en bâtons horizontaux



Cartes « choroplètes »



Exercice : quel type d’infographie pour ce jeu de données ?



Trouver les données : l’accès aux sources

data.gouv.fr insee.fr ined.fr data.gov data.oecd.org/fr data.worldbank.orgwho.int/gho/database/fr/ uis.unesco.org/datacentre/pages/default.aspx

Liste infinie : il faut trouver les sources des rapports : ministre de l’emploi, de la santé, du travail etc.

Ne pas hésiter à utiliser la fonction site:interieur.gouv.fr (par ex.) pour chercher sur ce site uniquement

Et le filetype:xls ou filetype:csv pour obtenir des données sous forme de tableurs.



Photos interactives : thinglink.com


https://www.thinglink.com/scene/652228971148083201


Exemple : infographie interactive


https://www.thinglink.com/scene/654911151661907969


Etape 1: importer la photo



Etape 2 : éditer la photo



Etape 3 : ajouter des liens, choisir les icones



Etape 4 : choisir la taille, récupérer le code



Etape 5 : copier le code dans la page web



Photos interactives : stipple.com*

*Compatible sous Drupal


http://stipple.com


Photos interactives : widgetic.com



Infographies illustrées : easel.ly



Bibliothèque d’images vectorielles



Catalogue de fonds texturés



GGraphiques éditables



Importation de visuels (png sur fond transparent)



Infographies illustrées : piktochart.com*

*Payant (mais pas très cher)



Créer une infographie, quelle méthodologie ?

1.Récupérer les données, les vérifier, les compléter

2.Faire le tri : sélectionner les chiffres les plus importants/parlants

3.Faire un croquis général de mise en forme

4.Rassembler les visuels dont on a besoin

5.Monter l’infographie sur un outil



Exercice : quel type d’infographie pour ce jeu de données ?


http://www.sciencesetavenir.fr/sante/20150513.OBS8923/beuveries-express-chez-les-jeunes-un-phenomene-inquietant.html


Réponse graphique possible :



Compte à rebours : widgetic.com



Animation « avant/après » : widgetic.com



Animation « avant/après » : juxtapose.knightlab.com



Galerie en accordéon : widgetic.com



Galerie en accordéon : widgetic.com



51

Des cartes interactives Google Maps

maps.google.com


http://timeline.knightlab.com/

http://voila-le-travail.data-projet.com/carte-inegalites-revenus/


Cartes interactives : storymap.knightlab.com


https://www.dropbox.com/s/ctlvz81s7v71vnz/Capture%20d%27%C3%A9cran%202015-05-18%2022.24.51.png?dl=0


Etape 1: indiquer le lieu et remplir les différents champs



Etape 2: ajouter des slides



Etape 3: exporter le code



Outil de cartographie open-source (avancé)

openstreetmap.org


http://www.openstreetmap.org/


Outil de cartographie open-source (avancé)

openstreetmap.org



leafletjs.com


http://leafletjs.com/index.html

http://leafletjs.com/


Des cartes interactives (niveau avancé) : cartodb.com


http://cartodb.com


Exemples :


http://graphics.latimes.com/responsivemap-pollution-burdens/


Les chronologies : timeline.knightlab.com


http://www.arte.tv/fr/comment-le-progres-nous-aura-t-il-fait-evoluer-en-l-an-42012/6704612,CmC=6704740.html


Les chronologies : tiki-toki.com



Diaporama : photosnack.com



Sondages, quiz, test de personnalité : pollsnack.com



Liseuse de documents : slidesnack.com



Liseuse de documents : slidesnack.com (ajout d’un commentaire sonore)


Le Télégramme Les nouvelles facettes du journalisme IFRA - 2008-2009Les nouveaux formats éditoriaux - Cyrille Frank 2014

Le parallaxe : plus immersif

Source : letsfreecongress.org

http://letsfreecongress.org




http://letsfreecongress.org/

http://letsfreecongress.org/


Des kits tout prêts : scrollkit

Source : wordpress.org

http://www.wordpress.org





Des kits tout prêts : sequence

Source : www.sequencejs.com

http://www.sequencejs.com/

http://www.sequencejs.com/


Agrégation sociale/multimédia : storify.com



Animation video : popcorn.webmaker.org


https://popcorn.webmaker.org/editor/143339/edit








Webdocumentaire et video animées : Racontr.com

Source : racontr.com*Ex Djehouti


https://beta.racontr.com/fr/




Des outils accessibles* : Klynt.net

*Mais pas gratuit !


http://www.klynt.net/


Ce n’est pas parce

qu’une chose est Techniquement possible,

qu’il faut la faire


Quel format met le mieux

en valeur le propos ?

Le plus clair Le plus simple Le plus agréable Le plus impactant


Quel est le service rendu au lecteur ?

Plus de…

Sens Plaisir Pratique Socialisation


Et avons-nous les moyens de nos ambitions ?

Temps Matériel

Compétence …

Commencer par faire simple !



Merci de votre attention !

[email protected] Blog : mediaculture.fr

Newsletter : mediacademie.orgSur Twitter : @cyceron



http://mediacademie.org

http://www.twitter.com/cyceron

Internet

Outils du web-journalisme : datavisualisation, infographies, animations interactives