Visualisation des données et Open data (Introduction)

  • 1,528 views
Uploaded on

Support du cours "Visualisation des données et Open data" pour l'année 2014

Support du cours "Visualisation des données et Open data" pour l'année 2014

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,528
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
1
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ICL3B02a : Outils et services numériques pour de projets de communication en contexte multilingue et global Licence 3, Filière Communication et Formation Interculturelles, INALCO Séance 4 : Visualisation des données & Open Data (Introduction) 7 avril 2014 Jirasri Deslis, Ingénieur R & D Département Traitement du Signal et des Images, Télécom ParisTech, Institut Mines -Télécom 1
  • 2. Plan de l’intervention 1. Visualisation des données : charte, diagramme, production de timeline 2. Introduction de l’Open Data et Google Table Fusion (production de la cartographie ) 3. Gestion de projet avec SMARTSHEET Support repris du cours en 2013 et mis à jour en 2014 Sources des images de couverture : http://www.educatorstechnology.com/2014/01/15-great-timeline-creation-web-tools.html http://www.w3.org/DesignIssues/LinkedData.html http://datascientistinsights.com/2012/12/05/design-thinking-for-effective-data-visualization/ 2
  • 3. 1. Visualisation de données *VISUALISATION DE DONNÉES. n. f. [vizɥalizasjɔ̃ də dɔne] : branchement d’une base de données à une interface graphique dans le but d’en faciliter l’exploration et la compréhension. Autrefois statique, l’interactivité la rend aujourd’hui encore plus efficace (car tout le monde sait bien que l'on retient mieux les nombres quand on peut jouer avec). http://dataveyes.com/ Définition par dataveyes.com 3
  • 4. 1. Visualisation de données Source : http://www.idrc.ca/EN/Documents/Summary-Report-French-new-template-04-May-2012.pdf Importance de la visualisation de données ……la visualisation promet de devenir un outil de premier plan pour présenter l’information à des fins de compréhension et de prise de décisions; tous essaient d’améliorer les qualités esthétiques et pratiques de la visualisation, et de trouver le meilleur équilibre entre elles (Lindquist, 2011b, 15). In. Examen de la visualisation de données, Un rapport rédigé par Jacqueline Strecker, titulaire d’une bourse de recherche du International Development Recherche Center , Canada Lindquist, Evert (2011b). “Surveying the World of Visualization”, document d’information, HC Coombs Policy Forum 4
  • 5. 1. Visualisation de données Histoire de la visualisation de données visuelles , Gaëtan Gaborit http://fr.slideshare.net/gaetangab/visualisation-de-donnes- les-leons-de-lhistoire-13139160 5
  • 6. 1. Visualisation de données Communicating Data in a Visual Way ( source : http://bit.ly/dp9C8W ) Exemples des données visuelles , par C. Rusen 6
  • 7. Voir également : http://cursus.edu/dossiers-articles/articles/19375/creation-simple-gratuite-graphiques/ 1. Visualisation de données http://www.petale-graphique.fr/ Exercice 7
  • 8. 1. Visualisation de données http://www.petale-graphique.fr/configurateur.php Exercice Une prise en main rapide Pour accéder aux fonctionnalités du générateur à partir de la page d'accueil du site, vous devez activer le lien du configurateur automatique (rubrique fonctionnalités). Vous n'avez plus ensuite qu'à suivre pas à pas les 3 grandes étapes proposées : - créer votre graphique (type, couleur, options diverses, dimension, saisie des données, génération du graphique) - vérifier le résultat produit - utiliser le code généré pour une utilisation en ligne Source : http://cursus.edu/dossiers-articles/articles/19375/creation-simple-gratuite-graphiques/ 8
  • 9. 1. Visualisation de données Générer le graphique sur Pétale http://www.petale-graphique.fr/configurateur.php 9
  • 10. 1. Visualisation de données Générer le graphique sur Pétale 10
  • 11. 1. Visualisation de données Générer le graphique sur Pétale <iframe frameborder="0" width="700" height="500" src="http://www.petale- graphique.fr/embed/embed.php?largeur= 700&hauteur=500&donnees=Femme:40,E nfant :10,Homme:50&modele=histogramme&an imation=oui" allowtransparency="true" style="background- color:transparent;"></iframe> [iframe frameborder="0" width="700" height="500" src="http://www.petale- graphique.fr/embed/embed.php?largeur= 700&amp;hauteur=500&amp;donnees=F emme:40,Enfant :10,Homme:50&amp;modele=histogram me&amp;animation=oui" allowtransparency="true" style="background-color:transparent;"] Un peu de modification sur Blog WP avec 11
  • 12. 1. Visualisation de données Exemple de l’intégration sur un Blog http://deslis.wp.mines-telecom.fr/2014/04/05/test-iframe/ Extension iFrame dans WordPress 12
  • 13. 1. Visualisation de données A lire http://www.henriblum.com/article5/petale- graphique-lancement 13
  • 14. 1. Visualisation de données Exemple concret de l’usage de Pétale http://www.socialbakers.com/facebook- statistics/france 14
  • 15. 1. Visualisation de données In >> Gaëtan Gaborit ,http://fr.slideshare.net/gaetangab/visualisation-de-donnes-les- leons-de-lhistoire-13139160 Exercice : Histoire de « Timeline » 15
  • 16. 1. Visualisation de données Exercice : Timeline, production avec « MyHistro » 16
  • 17. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Utiliser le contenu en provenance de Wikipédia 17
  • 18. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Extraction des événements de la page Wikipédia Un exemple de la période Préhistoire - Evénement : Préhistoire -Date : 4000 à 2500 ans av. J.-C. - Lieu : Sur le site archéologique de Ban Chiang, dans le nord-est du pays, près d’Udon Thani 18 Description
  • 19. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Extraction des événements de la page Wikipédia Exemples de la période « Histoire » 19
  • 20. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Extraction des événements de la page Wikipédia Exemples de la période « Histoire » - Evénement : Les royaumes de Sukhothaï et Lannathai -Date : ± 1238 - 1558 - Lieu : Sukhothaï 20 Description
  • 21. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Extraction des événements de la page Wikipédia Exemples de la période « Histoire » - Evénement : Le royaume d'Ayutthaya -Date : 1350 - 1767 - Lieu : Ayutthaya 21 Description
  • 22. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 22 Connecter sur http://www.myhistro.com/ avec le compte FB (par exemple)
  • 23. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Créer les événements pour construire une histoire 23
  • 24. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande VDO Youtube sur Ban Chiang 24 - Evénement : Préhistoire -Date : 4000 à 2500 ans av. J.-C. - Lieu : Sur le site archéologique de Ban Chiang, dans le nord-est du pays, près d’Udon Thani Lieu : Udon Thani Description Date avant JC Photo
  • 25. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Créer une histoire 25
  • 26. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande Glisser + Déposer l’événement Préhistoire (de la partie Gauche > Droite) 26
  • 27. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 27Visualiser le premier événement Préhistoire Nom de l’événement dans le Timeline
  • 28. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 28Visualiser le premier événement Préhistoire
  • 29. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 29Visualiser le premier événement Préhistoire Description Photo Vidéo Lieu
  • 30. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 30 Ajouter un autre événement Ajouter un événement
  • 31. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 31 - Evénement : Le royaume d'Ayutthaya -Date : 1350 - 1767 - Lieu : Ayutthaya Galerie de photos
  • 32. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 32 Possibilité d’ajouter les lien vers d’autre sites dans la description
  • 33. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 33 Lire tous les événements dans l’histoire Naviguer entre les événement
  • 34. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 34 Code pour intégrer sur le web, blog…
  • 35. 1. Visualisation de données Exercice : Timeline, Histoire de la Thaïlande 35 Voir le résultat de l’intégration sur le blog http://deslis.wp.mines-telecom.fr/2014/04/05/test-iframe/
  • 36. http://outilstice.com/2012/10/myhistro-creer-des-frises-du-temps-interactives/ 1. Visualisation de données Exercice : Timeline, « MyHistro », Ex. de l’intégration sur un site 36
  • 37. http://www.timetoast.com/timelines/97514 1. Visualisation de données A savoir : Timeline, avec Timetoast 37
  • 38. http://visual.ly/ 1. Visualisation de données Visualisation des données avec Visual.ly 38
  • 39. http://vimeo.com/77642915 1. Visualisation de données Visually Explainer 39
  • 40. http://bit.ly/13nVccl 1. Visualisation de données Exemple : Comparaison des comptes Twitter Musée du Louvre et Musée d’Orsay 40
  • 41. 1. Visualisation de données Suggestion à lire http://bit.ly/Yo0mDe 41
  • 42. http://ed.ted.com/lessons/david-mccandless-the-beauty-of-data-visualization 1. Visualisation de données Suggestion à consulter 42
  • 43. http://fr.wikipedia.org/wiki/Donn%C3%A9es_ouvertes Définition 2. OpenDATA Une donnée ouverte (en anglais open data) est une information publique brute, qui a vocation à être librement accessible et réutilisable. La philosophie pratique des données ouvertes préconise une libre disponibilité pour tous et chacun, sans restriction de copyright, brevets ou d'autres mécanismes de contrôle. 43
  • 44. http://fr.wikipedia.org/wiki/Donn%C3%A9es_ouvertes Quelques repères historiques 2. OpenDATA  1966 : l'adoption de la loi sur le libre accès à l'information, la Freedom of Information Act, amendée plusieurs fois notamment en 2007 par la loi OPEN Government Act  mars 2009, le projet data.gov (en) est lancé en décembre de la même année la Directive du gouvernement ouvert est publiée et pose les trois piliers de la coopération entre l'État et les citoyens qui sont la transparence du gouvernement, la participation et la collaboration  Au Royaume-Uni, un projet analogue14 est officiellement lancé en janvier 2010, par Gordon Brown et sous l'impulsion de Tim Berners-Lee. 44
  • 45. http://fr.wikipedia.org/wiki/Donn%C3%A9es_ouvertes Quelques repères historiques 2. OpenDATA En France, l'ouverture se fait dans le domaine du droit en 2002 (8 ans avant le gouvernement britannique qui a ouvert son site « Acts and statutory »16 en 2010). Des mouvements citoyens comme Wikimedia France, Open Street Map France ou Regards Citoyens évangélisent sur le thème pendant plusieurs année avant que les pouvoirs publics n'agissent….. 45
  • 46. La Mise à disposition des données dans différents pays 2. OpenDATA 46 http://data.gov.uk/ https://www.data.gov/
  • 47. La Mise à disposition des données dans différents pays 2. OpenDATA 47https://www.data.gouv.fr/
  • 48. http://opendata.paris.fr/opendata/ EX. Au niveau de la municipalité 2. OpenDATA 48
  • 49. http://fr.wikipedia.org/wiki/Fichier:L%27Open_Data_%C3%A0_la_Loupe.webm Visionner la vidéo 2. OpenDATA 49
  • 50. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français http://www.data.gouv.fr/fr/dataset/aeroports-francais-coordonnees-geographiques 50
  • 51. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables 51
  • 52. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français https://www.google.com/fusiontables/DataSource?dsrcid=implicit&folder=0B490CcFm_ei4S0sxTXBtbTZSREk 52 Créer / Connecter plus d’application / Fusion Tables in Google Drive/ Connecter
  • 53. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français https://www.google.com/fusiontables/DataSource?dsrcid=implicit&folder=0B490CcFm_ei4S0sxTXBtbTZSREk 53 Créer /Google Fusion Table / importer le fichier Aéroport / next
  • 54. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français https://www.google.com/fusiontables/DataSource?dsrcid=implicit&folder=0B490CcFm_ei4S0sxTXBtbTZSREk 54
  • 55. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 55 Remplir les informations
  • 56. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 56
  • 57. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 57
  • 58. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 58
  • 59. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 59
  • 60. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 60
  • 61. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 61 https://www.google.com/fusiontables/DataSource?docid=1mgH44QxKIpI6yjJhv_hxHIJAXnHExxBb 0aX2tcbE
  • 62. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 62
  • 63. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 63 https://www.google.com/fusiontables/DataSource?docid=1mgH44QxKIpI6yjJhv_hxHIJAXnHExxBb0a X2tcbE
  • 64. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 64
  • 65. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 65
  • 66. 2. OpenDATA Exercice : visualisation des données avec Google Fusion Tables Etude de cas: une production de la cartographie des aéroports français 66http://deslis.wp.mines-telecom.fr/2014/04/05/test-iframe/
  • 67. http://www.google.com/publicdata/directory?hl=en_US&dl=en_US#!st =DATASET Exemple des sources des données 2. OpenDATA 67
  • 68. Plus d’info 2. OpenDATA 68 http://www.etalab.gouv.fr/
  • 69. Plus d’info 2. OpenDATA 69 http://www.cnnumerique.fr/wp-content/uploads/2012/06/2012-06- 05_AvisCNNum_12_OpenData.pdf
  • 70. Plus d’info 2. OpenDATA 70 http://fr.slideshare.net/TVALLEY/livre-blanc-open-data-tic-et-tourisme
  • 71. 3. SMARTSHEET Enjeux du diagramme de Gantt pour la gestion de projet Cet outil répond à deux objectifs : planifier de façon optimale ainsi que communiquer sur le planning établi et les choix qu'il impose. Le diagramme permet : -de déterminer les dates de réalisation d'un projet, -d'identifier les marges existantes sur certaines tâches, - de visualiser d'un seul coup d'œil le retard ou l'avancement des travaux. 71
  • 72. 3. SMARTSHEET 72
  • 73. 3. SMARTSHEET http://youtu.be/bkxXIDap4M0 73 Généralité
  • 74. 3. SMARTSHEET https://www.youtube.com/watch?v=ixwZEcMuysc 74
  • 75. 3. SMARTSHEET 75 https://www.youtube.com/watch?v=W5dO66z3mlI
  • 76. 3. SMARTSHEET 76
  • 77. 3. SMARTSHEET https://www.smartsheet.com/b/home?lang=fr_FR 77 Connecter avec le compte Gmail
  • 78. 3. SMARTSHEET 78
  • 79. 3. SMARTSHEET 79
  • 80. 3. SMARTSHEET 80 Pour aller plus loin https://www.youtube.com/user/SmartSheet
  • 81. 3. SMARTSHEET 81 Suggestion à lire http://www.tutorials-computer-software.com/2009/12/tutorial- exemple-cdc-charges-internet.html