• Like
  • Save
Idescat Visual: Gràfics i mapes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Idescat Visual: Gràfics i mapes

  • 1,231 views
Published

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 …

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
  • 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,231
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
0
Comments
0
Likes
1

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. 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. Gràfics i mapes per a la web per ser representats en un navegador
  • 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. 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. JS 'Això és un text.'
  • 6. JS 'Això és un text.' "Això també."
  • 7. JS 'Això és un text.' "Això també." "M'agrada el Javascript!"
  • 8. JS 'Això és un text.' "Això també." "M'agrada el Javascript!" 'M'agrada el Javascript!'
  • 9. JS 666
  • 10. JS 666 3.14159265
  • 11. JS 666 3.14159265 299792458
  • 12. JS 666 3.14159265 299792458 null
  • 13. JS 666 3.14159265 299792458 null true false
  • 14. JS [ 1, 2, 3 ]
  • 15. JS [ 1, 2, 3 ] [ "u", "dos", "tres" ]
  • 16. JS [ 1, 2, 3 ] [ "u", "dos", "tres" ] [ "Homes", 3687 ]
  • 17. JS [ 1, 2, 3 ] [ "u", "dos", "tres" ] [ "Homes", 3687 ] [ [ "Homes", 3687 ], [ "Dones", 3800 ] ]
  • 18. JS [ [ "Homes", 3687 ], [ "Dones", 3800 ] ]
  • 19. JS {"eti": "Homes", "val": 3687}
  • 20. JS {"eti": "Homes", "val": 3687} {'eti': 'Homes', 'val': 3687}
  • 21. JS {"eti": "Homes", "val": 3687} {'eti': 'Homes', 'val': 3687} {eti: "Homes", val: 3687}
  • 22. JS {"eti": "Homes", "val": 3687} {'eti': 'Homes', 'val': 3687} {eti: "Homes", val: 3687} [ {eti: "Homes", val: 3687}, {eti: "Dones", val: 3800} ]
  • 23. { type: "bar", dec: 0, data: [ [ "Homes" , 3687 ] , [ "Dones" , 3800 ] ] }
  • 24. http://idescat.cat/visual
  • 25. Idescat Visual un encapsulador de solucions independència interfície unificada
  • 26. FlotjQuery D3 stack orderBars pyramid categories cat2013mun cat2013prov ... excanvas (IE>8) maps
  • 27. Idescat Visual un encapsulador de solucions càrrega diferida segons demanda (lazy loading)
  • 28. Idescat Visual un encapsulador de solucions codi obert https://github.com/idescat
  • 29. https://github.com/idescat/visual
  • 30. Idescat Visual un encapsulador de solucions v. 0.9.10
  • 31. bar
  • 32. rank
  • 33. pyram
  • 34. tsline
  • 35. tsline
  • 36. "20131" "201301" tsline
  • 37. tsbar
  • 38. tsbar
  • 39. Mapa de coropletescmap
  • 40. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
  • 41. Mapes de zones d'un territori + valors = colors Catalunya Municipis cmap
  • 42. Catalunya Municipis, comarques, províncies Mapes de zones d'un territori + valors = colors cmap
  • 43. Mapes de zones d'un territori + valors = colors Província Municipis cmap
  • 44. Comarca Municipis Mapes de zones d'un territori + valors = colors cmap
  • 45. by: "mun" "com" "prov" "com02" "prov08" Mapa de coropletes Mapes de zones d'un territori + valors = colors
  • 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. Map Maker
  • 48. Mapa de coropletes Mapes de zones d'un territori cmap
  • 49. Mapa de coropletes Mapes de zones d'un territori cmap
  • 50. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
  • 51. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors
  • 52. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim
  • 53. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim
  • 54. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
  • 55. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim x y
  • 56. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥
  • 57. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥ range: [x, y]
  • 58. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥ range: p
  • 59. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: p quantil p quantil 1-p ≤ ≥
  • 60. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: 0.01 quantil 0.01 quantil 0.99 ≤ ≥
  • 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. Mapa de coropletes Mapes de zones d'un territori + valors = colors range: 0 Mínim valors Màxim colors
  • 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. Mapa de coropletes Mapes de zones d'un territori + valors = colors Dades prèviament agrupades cmap
  • 65. cmap
  • 66. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 67. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 68. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 69. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 70. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 71. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 72. VisualJS.load( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 73. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
  • 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. 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. 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. 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. 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. 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. 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. barres.html
  • 82. <iframe src="barres.html"> </iframe>
  • 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. 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. pàgina del gràfic
  • 86. pàgina receptora pàgina del gràfic
  • 87. pàgina receptora pàgina del gràfic
  • 88. <script id="barres"> VisualJS.iframe( { id: "barres", ] }, "iframe.css" ); </script>
  • 89. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
  • 90. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
  • 91. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
  • 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. Crèdits Calliphora vomitoria, de JJ Harrison (CC BY-SA) Bicicleta, de Michael Vroegop (CC BY) Ampolla, de Bruce Osborn (CC BY-NC-ND)