Idescat Visual: Gràfics i mapes

6,331 views

Published on

Visual is a Javascript library for data visualization developed by the Statistical Institute of Catalonia (Idescat). It is based on popular open source solutions. Visual offers a simple interface that encapsulates the complexity of these solutions for the most common chart types.

These are the slides of a workshop about Idescat Visual that I gave at CCCB (May 22nd, Barcelona) in the context of a series of data journalism sessions and the Big Bang Data Exhibition. In Catalan.

Video available at http://vimeo.com/98022154

Published in: Data & Analytics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,331
On SlideShare
0
From Embeds
0
Number of Embeds
4,325
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Idescat Visual: Gràfics i mapes

  1. 1. Idescat Visual Gràfics i mapes Xavier Badosa (@badosa) Periodisme de dades Sessió de treball (IV) Barcelona CCCB/OKF 22 de maig de 2014
  2. 2. Gràfics i mapes per a la web per ser representats en un navegador
  3. 3. Gràfics i mapes per a la web per ser representats en un navegador <!DOCTYPE html> <html> <head> <title>Això és una pàgina web</title> </head> <body> ... </body> </html>
  4. 4. Gràfics i mapes per a la web per ser generats en un navegador <!DOCTYPE html> <html> <head> <title>Això és una pàgina web</title> </head> <body> <script> ... </script> </body> </html>
  5. 5. JS 'Això és un text.'
  6. 6. JS 'Això és un text.' "Això també."
  7. 7. JS 'Això és un text.' "Això també." "M'agrada el Javascript!"
  8. 8. JS 'Això és un text.' "Això també." "M'agrada el Javascript!" 'M'agrada el Javascript!'
  9. 9. JS 666
  10. 10. JS 666 3.14159265
  11. 11. JS 666 3.14159265 299792458
  12. 12. JS 666 3.14159265 299792458 null
  13. 13. JS 666 3.14159265 299792458 null true false
  14. 14. JS [ 1, 2, 3 ]
  15. 15. JS [ 1, 2, 3 ] [ "u", "dos", "tres" ]
  16. 16. JS [ 1, 2, 3 ] [ "u", "dos", "tres" ] [ "Homes", 3687 ]
  17. 17. JS [ 1, 2, 3 ] [ "u", "dos", "tres" ] [ "Homes", 3687 ] [ [ "Homes", 3687 ], [ "Dones", 3800 ] ]
  18. 18. JS [ [ "Homes", 3687 ], [ "Dones", 3800 ] ]
  19. 19. JS {"eti": "Homes", "val": 3687}
  20. 20. JS {"eti": "Homes", "val": 3687} {'eti': 'Homes', 'val': 3687}
  21. 21. JS {"eti": "Homes", "val": 3687} {'eti': 'Homes', 'val': 3687} {eti: "Homes", val: 3687}
  22. 22. JS {"eti": "Homes", "val": 3687} {'eti': 'Homes', 'val': 3687} {eti: "Homes", val: 3687} [ {eti: "Homes", val: 3687}, {eti: "Dones", val: 3800} ]
  23. 23. { type: "bar", dec: 0, data: [ [ "Homes" , 3687 ] , [ "Dones" , 3800 ] ] }
  24. 24. http://idescat.cat/visual
  25. 25. Idescat Visual un encapsulador de solucions independència interfície unificada
  26. 26. FlotjQuery D3 stack orderBars pyramid categories cat2013mun cat2013prov ... excanvas (IE>8) maps
  27. 27. Idescat Visual un encapsulador de solucions càrrega diferida segons demanda (lazy loading)
  28. 28. Idescat Visual un encapsulador de solucions codi obert https://github.com/idescat
  29. 29. https://github.com/idescat/visual
  30. 30. Idescat Visual un encapsulador de solucions v. 0.9.10
  31. 31. bar
  32. 32. rank
  33. 33. pyram
  34. 34. tsline
  35. 35. tsline
  36. 36. "20131" "201301" tsline
  37. 37. tsbar
  38. 38. tsbar
  39. 39. Mapa de coropletescmap
  40. 40. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
  41. 41. Mapes de zones d'un territori + valors = colors Catalunya Municipis cmap
  42. 42. Catalunya Municipis, comarques, províncies Mapes de zones d'un territori + valors = colors cmap
  43. 43. Mapes de zones d'un territori + valors = colors Província Municipis cmap
  44. 44. Comarca Municipis Mapes de zones d'un territori + valors = colors cmap
  45. 45. by: "mun" "com" "prov" "com02" "prov08" Mapa de coropletes Mapes de zones d'un territori + valors = colors
  46. 46. Mapes de zones d'un territori + valors = colors features: [...] id: "MUNICIPI" label: "NOM_MUNI" area: [500, 500] legend: [280, 345] projection: "mercator" center: [1.74, 41.7] scale: 9000 geoJSON SHP
  47. 47. Map Maker
  48. 48. Mapa de coropletes Mapes de zones d'un territori cmap
  49. 49. Mapa de coropletes Mapes de zones d'un territori cmap
  50. 50. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
  51. 51. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors
  52. 52. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim
  53. 53. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim
  54. 54. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
  55. 55. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim x y
  56. 56. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥
  57. 57. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥ range: [x, y]
  58. 58. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥ range: p
  59. 59. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: p quantil p quantil 1-p ≤ ≥
  60. 60. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: 0.01 quantil 0.01 quantil 0.99 ≤ ≥
  61. 61. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: 0.05 quantil 0.05 quantil 0.95 valor per defecte ≤ ≥
  62. 62. Mapa de coropletes Mapes de zones d'un territori + valors = colors range: 0 Mínim valors Màxim colors
  63. 63. Mapa de coropletes Mapes de zones d'un territori + valors = colors Intervals de llargada igual? Intervals de pes igual? Grups s/ desviació? Grups s/ trencaments naturals? cmap
  64. 64. Mapa de coropletes Mapes de zones d'un territori + valors = colors Dades prèviament agrupades cmap
  65. 65. cmap
  66. 66. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  67. 67. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  68. 68. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  69. 69. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  70. 70. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  71. 71. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  72. 72. VisualJS.load( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  73. 73. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  74. 74. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  75. 75. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  76. 76. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  77. 77. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  78. 78. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  79. 79. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  80. 80. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } ); <link href="../visual.css" rel="stylesheet" /> <script src="../lib/lazyload.js"></script> <script src="../visual.js"></script> <script src="../visual.setup.js"></script> </head> <body> <div id="visual" class="visual"></div> <script> </script>
  81. 81. barres.html
  82. 82. <iframe src="barres.html"> </iframe>
  83. 83. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula
  84. 84. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula
  85. 85. pàgina del gràfic
  86. 86. pàgina receptora pàgina del gràfic
  87. 87. pàgina receptora pàgina del gràfic
  88. 88. <script id="barres"> VisualJS.iframe( { id: "barres", ] }, "iframe.css" ); </script>
  89. 89. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
  90. 90. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
  91. 91. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
  92. 92. Idescat Visual Gràfics i mapes Periodisme de dades Sessió de treball (IV) Xavier Badosa (@badosa) Barcelona CCCB/OKF 22 de maig de 2014
  93. 93. Crèdits Calliphora vomitoria, de JJ Harrison (CC BY-SA) Bicicleta, de Michael Vroegop (CC BY) Ampolla, de Bruce Osborn (CC BY-NC-ND)

×