Idescat Visual: Gràfics i mapes

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Idescat Visual
Gràfics i mapes
Xavier Badosa
(@badosa)
Periodisme de dades Sessió de treball (IV)
Barcelona CCCB/OKF 22 de...

Gràfics i mapes per a la web
per ser representats en un navegador

Gràfics i mapes per a la web
per ser representats en un navegador
<!DOCTYPE html>
<html>
<head>
<title>Això és una pàgina ...

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<...

JS
'Això és un text.'

JS
'Això és un text.'
"Això també."

JS
'Això és un text.'
"Això també."
"M'agrada el Javascript!"

JS
'Això és un text.'
"Això també."
"M'agrada el Javascript!"
'M'agrada el Javascript!'

JS
666

JS
666
3.14159265

JS
666
3.14159265
299792458

JS
666
3.14159265
299792458
null

JS
666
3.14159265
299792458
null true false

JS
[ 1, 2, 3 ]

JS
[ 1, 2, 3 ]
[ "u", "dos", "tres" ]

JS
[ 1, 2, 3 ]
[ "u", "dos", "tres" ]
[ "Homes", 3687 ]

JS
[ 1, 2, 3 ]
[ "u", "dos", "tres" ]
[ "Homes", 3687 ]
[
[ "Homes", 3687 ],
[ "Dones", 3800 ]
]

JS
[
[ "Homes", 3687 ],
[ "Dones", 3800 ]
]

JS
{"eti": "Homes", "val": 3687}

JS
{"eti": "Homes", "val": 3687}
{'eti': 'Homes', 'val': 3687}

JS
{"eti": "Homes", "val": 3687}
{'eti': 'Homes', 'val': 3687}
{eti: "Homes", val: 3687}

JS
{"eti": "Homes", "val": 3687}
{'eti': 'Homes', 'val': 3687}
{eti: "Homes", val: 3687}
[
{eti: "Homes", val: 3687},
{eti...

{
type: "bar",
dec: 0,
data: [
[ "Homes" , 3687 ] ,
[ "Dones" , 3800 ]
]
}

http://idescat.cat/visual

Idescat
Visual
un encapsulador
de solucions
independència
interfície unificada

FlotjQuery
D3
stack
orderBars
pyramid
categories
cat2013mun
cat2013prov
...
excanvas
(IE>8)
maps

Idescat
Visual
un encapsulador
de solucions
càrrega diferida
segons demanda
(lazy loading)

Idescat
Visual
un encapsulador
de solucions
codi obert
https://github.com/idescat

https://github.com/idescat/visual

Idescat
Visual
un encapsulador
de solucions
v. 0.9.10

bar

rank

pyram

tsline

tsline

"20131"
"201301"
tsline

tsbar

tsbar

Mapa de
coropletescmap

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
cmap

Mapes
de zones
d'un territori
+
valors = colors
Catalunya
Municipis
cmap

Catalunya
Municipis, comarques, províncies
Mapes
de zones
d'un territori
+
valors = colors
cmap

Mapes
de zones
d'un territori
+
valors = colors
Província
Municipis
cmap

Comarca
Municipis
Mapes
de zones
d'un territori
+
valors = colors
cmap

by: "mun"
"com"
"prov"
"com02"
"prov08"
Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors

Mapes
de zones
d'un territori
+
valors = colors
features: [...]
id: "MUNICIPI"
label: "NOM_MUNI"
area: [500, 500]
legend: ...

Map
Maker

Mapa de
coropletes
Mapes
de zones
d'un territori
cmap

Mapa de
coropletes
Mapes
de zones
d'un territori
cmap

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
cmap

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors
Mínim
valors
Màxim

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors
Mínim
valors
Màxim

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
cmap

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors
Mínim
valors
Màxim
x
y

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors valors
x
y
≤
≥

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors valors
x
y
≤
≥
range: [x, y]

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
colors valors
x
y
≤
≥
range: p

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
x
y
range: p
quantil p
quantil 1-p
≤
≥

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
x
y
range: 0.01
quantil 0.01
quantil 0.99
≤
≥

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
x
y
range: 0.05
quantil 0.05
quantil 0.95
valor per def...

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
range: 0
Mínim
valors
Màxim
colors

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
Intervals de llargada igual?
Intervals de pes igual?
Gr...

Mapa de
coropletes
Mapes
de zones
d'un territori
+
valors = colors
Dades
prèviament
agrupades
cmap

cmap

visual( {
type: "bar",
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar",
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar",
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

VisualJS.load( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

visual( {
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B" , 30231 ] ,
[ "C" , 6485 ]
]
} );
<link href="../visual.css" rel="s...

barres.html

<iframe src="barres.html">
</iframe>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna ...

pàgina del gràfic

pàgina receptora
pàgina del gràfic

pàgina receptora
pàgina del gràfic

<script id="barres">
VisualJS.iframe(
{
id: "barres",
]
},
"iframe.css"
);
</script>

<script id="barres">
VisualJS.iframe(
{
id: "barres" ,
fixed: [ 340 , 320 ] ,
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B"...

<script id="barres">
VisualJS.iframe(
{
id: "barres" ,
fixed: [ 340 , 320 ] ,
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B"...

<script id="barres">
VisualJS.iframe(
{
id: "barres" ,
fixed: [ 340 , 320 ] ,
type: "bar" ,
data: [
[ "A" , 7329 ] ,
[ "B"...

Idescat Visual
Gràfics i mapes
Periodisme de dades Sessió de treball (IV)
Xavier Badosa
(@badosa)
Barcelona CCCB/OKF 22 de...

Crèdits
Calliphora vomitoria, de JJ Harrison (CC BY-SA)
Bicicleta, de Michael Vroegop (CC BY)
Ampolla, de Bruce Osborn (CC...

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

JSON-stat in the session "The futur... by Xavier Badosa 14144 views
Decoupling Official Statistics by Xavier Badosa 12866 views
Data Dissemination through Data Vis... by Xavier Badosa 15473 views
Consuming Nordic Statbank data with... by Xavier Badosa 10984 views
Periodisme de dades i oficines esta... by Xavier Badosa 15294 views
Difusió estadísTICa oficial by Xavier Badosa 15196 views

Top clipped slide

1 of 116 Ad

1 of 116 Ad