Parlons datavisualisation

Présentation de Noémie Rivière & Mathieu Elie au D&B Talks #8

http://dbtalks.org/
http://n-m-r.fr/
http://www.mathieu-elie.net/

Transcript

1. D&B Talks #8 Salut ;)
2. PARLONS
   DATAVISUALISATION #dbtalks
3. Noémie Rivière
   Web & Mobile designer
   @campb_LLs #dbtalks
4. DÉFINITION
   DATAVISUALISATION La datavisualisation est l’étude, la science ou l’art de représenter des données de façon visuelle. #dbtalks Un  résumé  visuel  des  données  chiffrées
6. Charles Joseph Minard
   pionier de l’usage moderne de la représentation graphique
   #dbtalks
8. David McCandless
   Journaliste spécialisé en données
   Auteur de « Information is beautiful»
   #dbtalks
9. Les raisons d’un boom
   La numérisation massive des données
   #dbtalks
10. Finance Banque Voyage Internet Télécom Vente Services publics Marketing #dbtalks
11. Dénominateur commun
    quantité / complexité
    #dbtalks
12. BIG DATA
    & LITTLE DATA #dbtalks
13. EMERGENCE
    BIG DATA C’est la victoire du quantitatif statistiques sur le qualitatif. #dbtalks
14. BIG DATA HAS A LITTLE BROTHER
    LITTLE DATA Ce que nous savons a propos de nous-même les  little  data,  nos  données  personnelles  prises  individuellement. #dbtalks
15. POURQUOI FAIRE DE LA
    DATAVISUALISATION #dbtalks
16. Beaucoup de données produites
    Il faut les exploiter
    #dbtalks
17. Excel vs graphique
    Faciliter la compréhension
    #dbtalks
18. Importance démocratique
    Prise de décision
    #dbtalks
19. Interactivité
    Encore plus efficace pour la compréhension
    #dbtalks
20. COMMENT
    TRAVAILLER LA
    DATAVISUALISATION #dbtalks
21. #dbtalks ANALYSE PRODUCTION
22. #dbtalks 1
    Analyse du besoin, du message à véhiculer
    
23. #dbtalks 2
    Analyse des données disponibles
    
24. #dbtalks 3
    Sélection des données pertinentes et croisements
    
25. #dbtalks 4
    Définition du fil d’or de l’infographie, l’histoire / le concept
26. #dbtalks 5
    Définition des représentations graphiques
27. #dbtalks 6
    Itération des représentations jusqu’a trouver la bonne
28. #dbtalks 7
    Déclinaison sur les différents supports
29. VEILLE
    RESSOURCES #dbtalks
30. #dbtalks http://visual.ly/ http://www.columnfivemedia.com/ http://www.visualnews.com/ http://datavisualization.ch/ http://www.behance.net/ http://www.pinterest.com/
31. DATA VISUALIZATION ON THE
    TECH SIDE #dbtalks languages - tools - ideas
32. Mathieu ELIE
    Data Visualization Freelance
    @mathieuel
    http://www.mathieu-elie.net #dbtalks
33. DATA VISUALIZATION #dbtalks Infinite number of tools, because dataviz domain is infinite. From data art, system administration, led walls to business intelligence. Lets see some trending tools, and explore some ideas !
34. CHAPTERS #dbtalks - d3.js the web standard, not so alone - ELK stack, system and BI dataviz super fast - WebGL, 3d dataviz entry point - R, explore data like a data scientist boss ! - 3d printing, dataviz in real life - processing - meet the data art - open refine, import csv, enrich, export
35. D3.JS #dbtalks http://d3js.org/
36. D3.JS #dbtalks THINK D3 AS: - a javascript library with helpers - dom, array, scales, color swatches etc... - a dom manipulation library - a low level lib: make a bart chart maybe painfull at the beginning - but you can make really advanced visualization, with full control
37. D3.JS / EXAMPLES #dbtalks
38. D3.JS / EXAMPLES #dbtalks
39. D3.JS / EXAMPLES #dbtalks
40. D3.JS / EXAMPLES #dbtalks
41. D3.JS #dbtalks As you can see, every examples are made of graphic svg primitives like square, path and so on. Possibilities are infinite and can be stuning but quite lot of work.
42. D3.JS #dbtalks d3 is a great tools for dataviz experts, or those who want to lear basics. For your own need you can use more high level tools like d3 wrapper lib, or lib focused on specific viz (bar chart, map etc..).
43. WEBGL #dbtalks Low level 3d API in browser (HTML5). three.js : the perfect lib to go on. Not really the job of d3.
44. WEBGL : EXAMPLES #dbtalks
45. WEBGL : EXAMPLES #dbtalks
46. WEBGL : EXAMPLES #dbtalks
47. WEBGL : EXAMPLES #dbtalks
48. WEBGL : EXAMPLES #dbtalks
49. WEBGL #dbtalks Many possibilities. 3d and data works together too. so dont miss WebGL for your dataviz projects
50. ELK STACK #dbtalks
51. ELK STACK #dbtalks - logstash -> elasticsearch -> kibana - extra cheap dataviz and stuning - but ! you can query es too -> d3.js - elasticsearch + aggregations framework ajax call -> amazing stats to d3.js ! - explore timeline data quickly: very handy
52. R #dbtalks ouch ! ready to console ??
53. R #dbtalks - explore large sets of data - load csv and so on - explore data, aggregate, apply stats, find max, min, percentiles, and so on.. - produce graphs - R is not for producing dataviz - it is the perfect tool to explore your data
54. R GRAPH EXAMPLE #dbtalks
55. OPEN REFINE #dbtalks - when you have large / inconsistent csv - explore, correct, enrich - export templates: json / es / php, anything text based !!!
56. OPEN REFINE #dbtalks
57. OPEN REFINE #dbtalks - ok for non programmers - not similar to R: has its own advantage - open source / free : run in browser - export templates are really amazing , endless possibilities - any time you have csv, think «open refine»
58. PROCESSING #dbtalks - not a dataviz standard tool but... - great community including data art - so i think you should care.... - .... and open your mind !
59. PROCESSING : EXAMPLE #dbtalks
60. #dbtalks PROCESSING : EXAMPLE
61. PROCESSING #dbtalks - community give more insights on the visual part of your dataviz - imagine some part of this graph are drived by data: - length of some path ? - brightness of some points ? - add maybe 3d or geo located data ?
62. 3D PRINTING #dbtalks so ? why not 3d print data ? - print bars / histogram 3d - print curves: think about lines chart in 3d - and many possibilities...
63. 3D PRINTING EXAMPLE #dbtalks Obama 3d voice print
64. USE CASE : LASTFM HISTORY #dbtalks http://www.mathieu-elie.net
65. USE CASE : LASTFM HISTORY #dbtalks 1 ) grab lastfm api data from ruby 2 ) store in csv 3 ) import in open refine 4 ) export to elasticseach 5 ) call elasticsearch with ajax 6 ) display data with d3.js
66. #dbtalks QUESTIONS ? HELP ? Mathieu ELIE
    Data Visualization Freelance
    @mathieuel
    http://www.mathieu-elie.net