Infografies
Repte Barcelona Dades Obertes
Quarta edició_2021
4 de febrer de 2020
www.ferranmorales.com
Infographics & Motion Graphics
20 años trabajando en Mundodeportivo, Infografías papel/web y motion graphics
6 años en el RACC (freelance).
Apasionado de las nuevas
Estudios: Diseño publicitario narrativas digitales, el Storytelling
Formación en CSS, JSON y Unity y el análisis de los datos.
Information is Beautiful (Oro y 3 finalista) Mi primera prioridad al crear
ÑH (1 Plata y 2 bronces) un visualización es el usuario
SND (5 Award of Excellence)
SIGMA (finalista)
Metodología de trabajo
De que trata el Documentamos el Analizamos y Escogemos plataforma 
proyecto. proyecto y optimizamos los datos y diseñamos
Buscamos la gestionar tareas y los exportamos 
informació.
...y muchas más
Documentar toda la información
https://slack.com/
Podemos Enlazar 
crear canales noticias
Comentar 
las noticias
Añadir 
usuarios
Crear las tareas del proyecto
https://trello.com/
Al finalizar 
Creamos el flujo de trabajo la tarea la 
por columnas: Creamos movemos a 
tantas la carpeta 
1. Proyectos a realizar tarjetas como Finalizados
2. Proyectos en curso tareas
3. A la espera de revisión
4. Finalizados
Trabajar los datos
Elementos de una
correcta infografía
Titular y subtitular
Es recomendable situarlos en la parte superior y 
utilizar un título muy impactante para captar al 
lector.
Podemos utilizar un subtitulo para detallar alguna 
cosa que consideramos importante.
Logotipo
Es recomendable ubicarlo al principio de la 
infografía.
Elementos de una
correcta infografía
Peso visual
Es recomendable compensar el peso visual de la 
composición.
En esta infografía el titular tiene mucha 
importancia es recomendable contraponer un 
elemento en la base para asentar la infografía.
Se puede compensar utilizando el mismo color.
La información la ubicaremos en la parte central.
Elementos de una
correcta infografía
Elegir un elemento visual efectivo
Será el elemento más grande, en este caso al 
tratar de los domicilios de Barcelona un mapa es 
el elemento recomendable.
Utilizar una misma gama cromática.
Una leyenda o un texto siempre ayuda a entender 
la visualización
Elementos de una
correcta infografía
Utilizar una retícula
Para colocar el resto de elementos es 
recomendable utilizar una rejilla base para 
compensar visualmente.
Depende de la historia, los datos y la 
visualización puede variar la cantidad de 
columnas utilizadas.
Elementos de una
correcta infografía
Dirigir la atención donde nos interesa 
Un recurso que funciona muy bien es utilizar un 
pictograma sobre el tema a tratar, la gente asocia 
rápidamente de que hablamos.
El tamaño de la tipografía y el texto en negrita es 
importantísimo para destacar dicha información.  
1
Elementos de una
correcta infografía
Orden de lectura 2 3
Cuando un usuario mira una visualización no 
tiene que estar perdido sin saber como leerla.
Tenemos que facilitarle el orden de lectura de los 
elementos.
4 5
6
Ejemplos infografias
Color 
Podemos utilizar un color 
para destacar el elemento 
importante de nuestra 
visualización.
Utilizar números también 
facilita el orden de lectura 
del gráfico.
Ejemplos infografias
Orden lectura 
Podemos utilizar 
flechas para indicar 
el orden de lectura 
de una visualización 
con muchos 
elementos.
Ejemplos infografias
Compensar el peso de los elementos.
Crear esta infografía
Infografia web
Realizaremos esta infografía paso a paso:
1. Buscar los datos del tema a tratar
2. Esbozar la infografía en papel
3. Realizar la maquetación en Genially
4. Limpiar y optimizar los datos
5. Crear las visualizaciones en Datawrapper
6. Insertarlas en Genially
7. Publicaremos la infografía
Estos son los datasets:
Padro Open Data BCN
Superfície mitjana de l'habitatge
Buscar datos
Open Data BCN
Antes de crear una infografía 
tenemos que analizar que datos 
tenemos y de que queremos 
hablar.
No podemos tener datos de 
todo, es recomendable estudiar 
y analizar todos los datos que 
nos ofrece el portal Open Data 
BCN en su web.
Es recomendable tener un 
repositorio de la información que 
encontramos (slack o word).
Documentar todos datos y elementos a utilizar
Los datos Textos Imágenes
Tener en una carpeta los Crear un documento de texto el cual tendrá Crear una carpeta con las 
datos que hemos encontrado, la siguiente estructura. imágenes que tenemos:
podemos dejar en otra carpeta · Esbozo escaneado
los datos que no utilizaremos. En este momento algunas cifras no las · Logo BCN
tenemos pero podemos crear una hipótesis · Logo Open Data
Ocupació mitjana als domicilis de lo que queremos visualizar · Logo colegio
Superficie mitjana de l’habitatge · Imagen skiline 
Maquetar los elementos
Esbozar la infografía
Es recomendable realizar un 
esbozo en papel de la idea que 
tenemos de visualización y los 
elementos que tenemos.
Genially
Registrase
Utilizaremos genially para la 
maquetación de la visualización, 
vincularemos los elementos que 
realizaremos en datawrapper.
Nos registramos con google o 
creamos un usuario nuevo.
https://www.genial.ly/login
Genially
Crear genially
En esta página tendremos todos 
nuestros trabajos y también 
podemos crear un nuevo.
Clicar en “Crear Genially”
Genially
Plantillas
Genially nos ofrece plantillas de 
visualizaciones que podemos 
utilizar para nuestras 
visualizaciones, en la parte 
superior podemos filtrar las 
gratuitas.
Clicamos la visualización que 
nos interesa (aparecerá un “+”).
Genially
Plantillas
Si nos interesa utilizar esta 
plantilla clicamos en “usar esta 
plantilla”, podemos cambiar los 
colores.
Genially
Editar plantilla
Esta pantalla será la que 
utilizaremos para modificar e 
insertar elementos de nuestra 
visualización.
Clicamos encima de los 
elementos para modificar el 
contenido.
En nuestro caso realizaremos 
una infografía sin utilizar 
ninguna plantilla.
Clicamos en el logotipo situado 
en la parte superior izquierda. 
Genially
Guardar plantilla
Al volver al menú anterior 
tenemos que nombrar la 
visualización que tenemos, la 
podemos borrar si no nos 
interesa.
Genially
Eliminar plantilla
Clicamos encima de los tres 
puntos situados en la parte 
superior derecha y eliminamos 
la plantilla.
Clicamos en “Crear Genially”.
Genially
En blanco
Genially nos ofrece plantillas o 
crear desde cero un diseño.
Clicamos en ”En blanco”.
Genially
En blanco
En esta pantalla podemos 
utilizar unos tamaños 
preestablecidos o utilizar un 
tamaño propio.
Nuestra visualización tendrá una 
tamaño proporcional a dinA1.
Desactivamos mantener 
proporción y introducimos:
840px. x 1200px
Genially
Panales genially
En la parte izquierda tenemos 
todos los elementos que 
podemos utilizar para nuestra 
visualización.
En la parte inferior podemos 
clicar en el tercer botón de la 
derecha para modificar el 
tamaño, también tenemos la 
posibilidad de añadir páginas y 
aceder a ellas con las flechas.
Genially
Añadir páginas
Clicamos en el botón “añadir 
páginas” se abrirá esta ventana, 
podemos utilizar una plantilla o 
una hoja en blanco, clicamos 
“añadir”.
Genially
Nuevas páginas
En el menú de la derecha 
tenemos todas las hojas que 
tenemos en el documento, 
clicamos encima de la que nos 
interesa para verla o editarla.
Genially
Eliminar páginas
Podemos eliminar las hojas que 
hemos creado, nos situamos en 
la página que queremos borrar y 
clicamos el icono de la basura, 
en la ventana que aparece 
clicamos “Eliminar”.
Genially
Crear titular
Clicamos en el botón de “texto” 
nos dan diferentes formatos, en 
nuestro caso seleccionamos 
“Título 1”
Es recomendable tener en un 
documento de texto de la suite 
de drive los textos de nuestra 
infografía y en una carpeta las 
imágenes que utilizaremos.
Genially
Modificar tamaño titular
Al tener los textos en el 
documento Word podemos 
copiar y pegarlos en el titular 
que hemos creado, podemos 
modificar el tamaño clicando en 
el menú superior, al lado de la 
letra “B”.
Desplazamos el titular en la 
parte superior.
Genially
Insertar imágenes
Para insertar una imagen, 
clicamos en el icono ”imagen” y 
a continuación clicamos en
“suelta aquí…”
Buscamos la imagen del 
logotipo de Barcelona, 
aparecerá en la parte inferior, 
clicamos sobre ella y se 
colocara en la plantilla.
En la parte superior nos da la 
opción de reemplazar la imagen.
Logo BCN
Genially
Desplazar imágenes
Si clicamos encima de la imagen 
la podemos reducir o ampliar y 
también colocarla en el lugar 
que queremos. 
Genially
Colocar imágenes
Colocamos las imágenes del 
skyline y el logotipo de Open 
Data BCN en la base de la 
infografía, también podemos 
poner el logotipo del centro, en 
este caso he creado un 
recuadro para simular el espacio 
del logotipo.
Imagen Skyline BCN
Logo Open Data BCN
Genially
Colocamos subtítulo
Clicamos en texto y a 
continuación en subtítulo, 
automáticamente se coloca en 
el centro del documento, 
podemos modificar el tamaño y 
la ubicación.
Genially
Colocamos destacados
Clicamos en texto buscamos la 
maquetación de elementos con 
un número que podemos 
destacar, podemos reducirlo y 
desplazarlo al lugar que 
queremos.
Podemos modificar el alineado 
de los objetos, en este caso los 
alineamos a la izquierda.
Seleccionar los textos por 
separado y modificar el tamaño.
Destacado: 18 pt.
Cifra: 98 pt
Texto destacado: 18 pt
Genially
Colocamos texto
Genially nos da el formato para 
colocar el texto, en nuestro caso 
reduciremos el tamaño un poco
Texto principal: 16 pt.
Genially
Recursos iconos
Genially nos ofrece 
gratuitamente un librería de 
iconos, para poder utilizarlos, 
nos situamos en “Recursos” y 
podemos buscar lo que 
queremos, en nuestro caso 
queremos ”personas”, nos 
aparecerán todos los iconos de 
personas, clicamos sobre el y se 
situa en el centro.
Genially
Recursos iconos
Buscaremos el icono de una 
casa y lo colocamos al principio 
del titular del destacado.
Genially
Copiar elementos
Podemos seleccionar los 
elementos que queremos y 
copiarlos en otra parte, con la 
tecla mayúscula los 
seleccionaremo uno a uno o 
podemos seleccionar todos.
Genially
Colocamos los elementos como 
la imagen seleccionada.
Tamaño cifra: 60 pt.
Cambiar tipografía
Es mejor siempre utilizar una 
misma familia tipográfica, 
seleccionamos los textos y 
clicamos en ”source Sans Por” 
ajustamos los elementos si es 
necesario. 
Genially
Duplicar destacados
Realizaremos de nuevo el 
mismo proceso de seleccionar 
los elementos que queremos 
copiar y los pegamos a la 
derecha con los datos correctos.
Una desventaja de Genially es 
que una caja de texto no puede 
tener tamaños diferentes 
tenemos que crear cajas de 
texto con tamaños diferentes.
Genially
Insertar gráfica
Seleccionamos “Recursos” en 
esta ocasión clicaremos en la 
gráfica de barras horizontales, al 
clicar sobre ellas como siempre 
nos coloca en el centro del 
documento la gráfica con datos 
simulados, a la derecha 
podemos introducir a mano los 
datos necesarios.
Genially
Modificar gráfica
Seleccionamos “configuración” 
para configurar el color o que 
elementos mostramos.
La configuración es muy 
limitada, pero nos va bien para 
crear una pequeña simulación 
de como quedara la infografía.
Genially
Modificar gráfica
Seleccionamos “configuración” 
para configurar el color o que 
elementos mostramos.
La configuración es muy 
limitada, pero nos va bien para 
crear una pequeña simulación 
de como quedara la infografía.
Para acceder a la configuración 
de la gráfica clicamos en el 
icono con tres líneas.
Genially
Previsualizar
Podemos ver como va 
quedando la infografía en 
cualquier momento, la barra que 
hemos utilizado los datos 
aparecen cuando tienes el ratón 
encima de la barra.
Genially
Genially es una plataforma muy 
fácil de utilizar para maquetar 
los elementos dispuestos como 
queremos, pero las gráficas que 
tiene son un poco limitada, en 
este momento utilizaremos 
Datawrapper para las gráficas o 
los mapas.
+
+
Buscar y descargar los datos
En el portal de Open Data 
BCN descargaremos los 
datos:
Padro Open Data BCN
Enlace datos en:
CSV dades
Importar el CSV en Google Spreadsheets 
Utilizaremos google Drive 
para importar el documento 
CSV que hemos descargado.
1. Crear un nuevo 
documento de
Hoja de calculo.
2. Importar el archivo CSV.
(Archivo/Importar).
Totales población, domicilios y promedio.
Para conseguir el total de 
población i domicilio de la 
ciudad de BCN:
· Realizaremos una suma 
de la files F i G:
=SUM(F2:F74)
=SUM(G2:G74)
· Para obtener el 
promedio dividimos los 
dos totales:
=F76/G76
Crear una Tabla dinámica
Para conseguir los cinco 
barrios con más población 
realizaremos una Tabla 
dinámica de les columnas 
E-F-G.
Visualizar valores población y domicilios por barrio.
Seleccionamos:
· Filas: “Nom_Barri”.
· Columnas: ”Poblacio”
                     “Domicilis”
Para ordenar por 
población o domicilios, 
clicar en “Ordenar por”.
Ordenar por población o domicilios.
Seleccionamos:
· Filas: “Nom_Barri”.
    · Orden: Descendente
    · Ordenar: “Poblacion”
Podemos mover el orden 
de visualización de los 
valores arrastrando la 
selección:
Formato de números
En el valor que tenemos le 
daremos formato de 
número personalizado 
para introducir el punto de 
millar:
#,##0
Revisar configuración de la hoja de cálculo: punto o coma
En ocasiones al trabajar 
con un documento CSV 
los valores pueden venir 
con “,” 0 “.” para modificar 
la configuración de la hoja 
de cálculo podemos 
seleccionar España “.” o 
Mexico “,”.
Dependiendo el programa 
va mejor una versión o la 
otra.
Exportar datos: Copiar celdas
Seleccionamos las celdas 
que nos interesa y las 
copiamos.
Editar/Copiar
Exportar datos como CSV
Preparar los datos que nos 
interesa en una hoja.
Seleccionamos 
Descargar/(.csv, hoja actual)
Seleccionamos el archivo 
CSV en la carpeta del 
proyecto.
En el portal de Open Data 
BCN descargaremos los 
datos:
Superficie mitjana de l’habitatge
Preparamos los datos y 
obtendremos los metros 
por persona de los barrios:
Excel datos tratados
Descargamos los datos para la segunda visualización
En el portal de Open Data 
BCN descargaremos los 
datos:
Padro Open Data BCN
Enlace datos en:
CSV dades
Superfície mitjana de 
l’habitatge llogat per 
barris
Descargamos los datos para la segunda visualización
Primero, nos descargamos este dataset:
Superfície mitjana de 
l’habitatge llogat per 
barris
Cambiamos los puntos a comas para 
que los reconozca como números.
Nos descargamos el 
dataset y vemos que hay 
una columna "Trimestre". 
Para tener el promedio 
anual, tendremos que 
hacer el promedio de los 
2 trimestres que hay 
publicados para 2020.
Lo haremos con una 
Tabla Dinámica.
Buscamos en la columna y eliminamos los "N.A." (o 
cualquier elemento que no sea un número.
Hemos calculado el promedio de 
superficie m2 para cada barrio
Nos descargamos el segundo conjunto de datos.
Me interesa esta columna “Personas por domicilio”
Nuestro objetivo es calcular los m2 por persona. Para esto calcularemos: m2 por persona 
= m2 superfície media / personas por domicilio. Comenzaremos enganchando la columna 
“m2 per habitatge” al lado de “personas por domicilio”.
Hemos cambiado el nombre de la columna de “Nombre” a “m2 per habitatge” 
Añadimos columna “m2 
Operación para calcular m2 por persona per persona”
Finalmente para mostrar las diferencias entre los barrios más ricos y pobres de la ciudad, 
ordenamos los resultados por orden decreciente y eliminamos todas las filas menos las 
tres con los valores más altos y las dos con los valores más bajos. 
Esto es lo que 
representaremos a 
continuación en el 
segundo gráfico de 
columnas
Datawrapper
Abrimos
https://www.datawrapper.de/
Datawrapper
Pegamos los datos que 
hemos copiado desde google 
sheets en la caja de la 
derecha.
Cliclamos “Proceed”
Datawrapper
Revisamos que los datos los 
captura correctamente.
Clicamos “Proceed”.
Datawrapper
Seleccionamos “Bar Chart”.
A continuación clicamos en 
”Refine”.
Datawrapper
Seleccionamos:
· “Move labels to separate line””.
· Value alignment “right”.
· Bar color “#b7bdc8”.
· Bar background.
Clicamos en annotate:
Datawrapper
Borramos el texto de Title.
En Data source, ponemos la 
referencia de los datos, en 
nuestro caso “Open Data 
Barcelona”.
En Link introducimos la dirección
Padro Open Data BCN
Seleccionamos “Proceed”.
Datawrapper
Podemos resaltar un o más 
datos en “Highlight elements”.
Seleccionamos “Proceed”.
Datawrapper
Seleccionamos
“Datawrapper (2012)” y también 
Español.
Seleccionamos “Proceed”.
Datawrapper
Seleccionamos
“Publish chart”
Obtendremos un enlace que lo 
colocaremos en Genialy para ver 
la visualización.
A continuación clicar en
“+ New Chart”
Para crear el otro gráfico.
Datawrapper
Clicamos en “XLS/CSV upload”
Seleccionamos en archivo 
“Personas_m2.csv”
Enlace:
Personas_m2.csv
Realizamos los mismo pasos 
que la visualización anterior.
Open Data superficie m2.
Datawrapper. Mapa Barcelona
Para realizar el mapa de 
Barcelona con la ocupación 
mediana (personas por 
domicilio) abrimos el documento 
”2020_padro_ocupacio_mitjana”
Seleccionamos las columnas
E y F, de la línea 2 hasta la 74.
Datawrapper. Mapa Barcelona
Abrimos Datawrapper y 
seleccionamos “New Map”.
A continuación seleccionamos
“Choropleth map”.
Datawrapper. Mapa Barcelona
Buscamos “Barcelona” en el 
buscador.
Seleccionamos:
“Spain > Barcelona > Boroughs”
A continuación clicamos en
“Proceed”.
Datawrapper. Mapa Barcelona
Nos situamos en la columna 
“Value” y clicamos en
“insert column on the right”.
A continuación pegamos los 
datos al principio de la primera 
celda de “Value”.
Clicamos en ”Proceed”.
Datawrapper. Mapa Barcelona
Clicamos en ”Proceed”.
Datawrapper. Mapa Barcelona
Seleccionamos la columna “C”
· Type > Steps
· Legends > Ranges
· Position > bottom right
A continuación clicar “Proceed”
Datawrapper. Mapa Barcelona
Borrar en texto de “Title”
En Data source, ponemos de 
nuevo la dirección de los datos 
del portal Open Data BCN.
A continuación clicamos en
“Tooltips” > Customize tooltips
En el texto de arriba ponemos
{{ value }}
{{ c }}
Clicamos en “Proceed”
Datawrapper. Mapa Barcelona
Publicamos el mapa para 
obtener la dirección para insertar 
el mapa en “Genially”.
Copiamos la dirección
Datawrapper
Tenemos el mapa. Tenemos la gráfica de m2 por persona. Tenemos la gráfica población por barrios.
https://datawrapper.dwcdn.net/nEaqr/1/ https://datawrapper.dwcdn.net/ckSjf/3/ https://datawrapper.dwcdn.net/m4aIs/3/
Genially
Abrimos de nuevo Genially, 
clicamos en “insertar” y en “URL” 
pegamos el link del mapa.
https://datawrapper.dwcdn.net/nEaqr/1/
Colocamos el mapa con el 
tamaño que consideremos, en 
ocasiones dependiendo del 
tamaño puede no verse alguna 
parte de la visualización del 
Datawrapper.
Genially
Añadir la gráfica población por 
barrios.
https://datawrapper.dwcdn.net/m4aIs/3/
Gráfica de m2 por persona.
https://datawrapper.dwcdn.net/ckSjf/3/
Clicamos en previsualizar 
para si esta bien o tenemos 
que modificar algun 
elemento.

Genially
Para publicar la infografía 
tenemos que clicar en el botón 
listo, seleccionar Publico en la 
web e introducir el título.
A continuación apretar Listo.
Infografia
Moltes gràcies