![JS
[ 1, 2, 3 ]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-14-2048.jpg?cb=1666240205)
![JS
[ 1, 2, 3 ]
[ "u", "dos", "tres" ]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-15-2048.jpg?cb=1666240205)
![JS
[ 1, 2, 3 ]
[ "u", "dos", "tres" ]
[ "Homes", 3687 ]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-16-2048.jpg?cb=1666240205)
![JS
[ 1, 2, 3 ]
[ "u", "dos", "tres" ]
[ "Homes", 3687 ]
[
[ "Homes", 3687 ],
[ "Dones", 3800 ]
]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-17-2048.jpg?cb=1666240205)
![JS
[
[ "Homes", 3687 ],
[ "Dones", 3800 ]
]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-18-2048.jpg?cb=1666240205)
![JS
{"eti": "Homes", "val": 3687}
{'eti': 'Homes', 'val': 3687}
{eti: "Homes", val: 3687}
[
{eti: "Homes", val: 3687},
{eti: "Dones", val: 3800}
]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-22-2048.jpg?cb=1666240205)
![{
type: "bar",
dec: 0,
data: [
[ "Homes" , 3687 ] ,
[ "Dones" , 3800 ]
]
}](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-23-2048.jpg?cb=1666240205)
![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](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-66-2048.jpg?cb=1666240205)
![Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors valors
x
y
≤
≥
range: [x, y]](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-77-2048.jpg?cb=1666240205)
![visual( {
type: "bar",
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-88-2048.jpg?cb=1666240205)
![visual( {
type: "bar",
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-89-2048.jpg?cb=1666240205)
![visual( {
type: "bar",
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-90-2048.jpg?cb=1666240205)
![visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-91-2048.jpg?cb=1666240205)
![visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-92-2048.jpg?cb=1666240205)
![visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-93-2048.jpg?cb=1666240205)
![VisualJS.load( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-94-2048.jpg?cb=1666240205)
![visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-95-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-96-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-97-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-98-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-99-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-100-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-101-2048.jpg?cb=1666240205)
![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>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-102-2048.jpg?cb=1666240205)
![<script id="barres">
VisualJS.iframe(
{
id: "barres",
]
},
"iframe.css"
);
</script>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-111-2048.jpg?cb=1666240205)
![<script id="barres">
VisualJS.iframe(
{
id: "barres" ,
fixed: [ 340 , 320 ] ,
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
},
"iframe.css"
);
</script>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-112-2048.jpg?cb=1666240205)
![<script id="barres">
VisualJS.iframe(
{
id: "barres" ,
fixed: [ 340 , 320 ] ,
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
},
"iframe.css"
);
</script>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-113-2048.jpg?cb=1666240205)
![<script id="barres">
VisualJS.iframe(
{
id: "barres" ,
fixed: [ 340 , 320 ] ,
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
},
"iframe.css"
);
</script>](https://image.slidesharecdn.com/visual-140602102206-phpapp02/75/idescat-visual-grfics-i-mapes-114-2048.jpg?cb=1666240205)
Idescat Visual: Gràfics i mapes
•2 likes•14,633 views
Report
Share
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
Recommended
More Related Content
Viewers also liked
Viewers also liked(20)
More from Xavier Badosa
More from Xavier Badosa(8)
Idescat Visual: Gràfics i mapes
- 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
- 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 ] ] }
- 46. FlotjQuery D3 stack orderBars pyramid categories cat2013mun cat2013prov ... excanvas (IE>8) maps
- 47. Idescat Visual un encapsulador de solucions càrrega diferida segons demanda (lazy loading)
- 48. Idescat Visual un encapsulador de solucions codi obert https://github.com/idescat
- 51. bar
- 52. rank
- 53. pyram
- 54. tsline
- 55. tsline
- 57. tsbar
- 58. tsbar
- 60. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
- 61. Mapes de zones d'un territori + valors = colors Catalunya Municipis cmap
- 62. Catalunya Municipis, comarques, províncies Mapes de zones d'un territori + valors = colors cmap
- 63. Mapes de zones d'un territori + valors = colors Província Municipis cmap
- 64. Comarca Municipis Mapes de zones d'un territori + valors = colors cmap
- 65. by: "mun" "com" "prov" "com02" "prov08" Mapa de coropletes Mapes de zones d'un territori + valors = colors
- 66. 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
- 67. Map Maker
- 68. Mapa de coropletes Mapes de zones d'un territori cmap
- 69. Mapa de coropletes Mapes de zones d'un territori cmap
- 70. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
- 71. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors
- 72. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim
- 73. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim
- 74. Mapa de coropletes Mapes de zones d'un territori + valors = colors cmap
- 75. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors Mínim valors Màxim x y
- 76. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥
- 77. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥ range: [x, y]
- 78. Mapa de coropletes Mapes de zones d'un territori + valors = colors colors valors x y ≤ ≥ range: p
- 79. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: p quantil p quantil 1-p ≤ ≥
- 80. Mapa de coropletes Mapes de zones d'un territori + valors = colors x y range: 0.01 quantil 0.01 quantil 0.99 ≤ ≥
- 81. 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 ≤ ≥
- 83. Mapa de coropletes Mapes de zones d'un territori + valors = colors range: 0 Mínim valors Màxim colors
- 84. 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
- 85. Mapa de coropletes Mapes de zones d'un territori + valors = colors Dades prèviament agrupades cmap
- 86. cmap
- 88. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 89. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 90. visual( { type: "bar", data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 91. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 92. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 93. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 94. VisualJS.load( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 95. visual( { type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] } );
- 96. 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>
- 97. 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>
- 98. 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>
- 99. 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>
- 100. 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>
- 101. 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>
- 102. 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>
- 103. barres.html
- 105. 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
- 106. 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
- 107. pàgina del gràfic
- 108. pàgina receptora pàgina del gràfic
- 109. pàgina receptora pàgina del gràfic
- 112. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
- 113. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
- 114. <script id="barres"> VisualJS.iframe( { id: "barres" , fixed: [ 340 , 320 ] , type: "bar" , data: [ [ "A" , 7329 ] , [ "B" , 30231 ] , [ "C" , 6485 ] ] }, "iframe.css" ); </script>
- 115. Idescat Visual Gràfics i mapes Periodisme de dades Sessió de treball (IV) Xavier Badosa (@badosa) Barcelona CCCB/OKF 22 de maig de 2014
- 116. Crèdits Calliphora vomitoria, de JJ Harrison (CC BY-SA) Bicicleta, de Michael Vroegop (CC BY) Ampolla, de Bruce Osborn (CC BY-NC-ND)