Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Infographics 
From data to knowledge 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
About me:  Δήµαρχος Ιγνάτιος   
Email 
info@ignasialcalde.es 
Multimedia University degree, Master's degree in Information Society and Knowledge and 
several postgraduate courses in data analysis and visualization. Writer of Information 
Visualization: from data to knowledge. (only in Spanish by now). 
Microblog 
t @ignasialcalde www.ignasialcalde.es 
 
Web 
Educator & Consultant 
Data literacy 
Data visulization 
Knowledge Management 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Infographics 
From data to knowledge 
Basics 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some questions 
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
•  What’s an infographic?  
•  What’s a data visualization? 
•  Have you made some ? 
•  Is it a new technique? 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics 
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Which one do you like most? 
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Which one do you like most? 
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Data process  
Idea Visulization 
Clean 
Analize 
Data 
Iterative 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
It’s not  new … 
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
https://vimeo.com/96084551 
 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some examples  
2	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
5	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Examples  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
5	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Examples  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
5	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Examples  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
7	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Examples  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
7	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
Examples 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
7	
  
GESTIÓN	
  DE	
  LA	
  CARGA	
  
COGNTIVA	
  
h?p://youtu.be/6zH_mj4m3kI	
  
	
  
Examples 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some reasons 
Infographics 
From data to knowledge 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Why we like infographics?  
14	
  
•  Infoxication  
•  Easy to understand 
•  Reading and  
memory 
•  Socialization 
8	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Tell stories visually 
Infographics definition 
19	
  
Chiqui Esteban 
National Geographics 
Infographist  
 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Infographics vs Visualization 
20	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Visualization 
22	
  
h?p://visual.ly/2014-­‐world-­‐popula?on-­‐digital-­‐visualiza?on?view=true	
  
	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basic rules 
Infografia 
Representa la informació gràficament 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
39	
  
Some basics 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics 
23	
  
Pictures                    Data                Graphics 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Layout 
30	
  
Header 
Body 
Footer	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics 
23	
  
http://www.colorblender.com 
	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics 
27	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics  
28	
  
h?p://extremepresenta?on.typepad.com/.a/6a00d8341bfd2e53ef00e553577fea8833-­‐pi	
  
	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics  
28	
  
 
A relationship tries to show a connection or correlation between two or 
more variables through the data presented, like the market cap of a given 
stock over time versus overall market trend. 
 
A comparison tries to set one set of variables apart from another, and 
display how those two variables interact, like the number of visitors to five 
competing web sites in a single month. 
 
A composition tries to collect different types of information that make up 
a whole and display them together, like the search terms that those 
visitors used to land on your site, or how many of them came from links, 
search engines, or direct traffic. 
 
A distribution tries to lay out a collection of related or unrelated 
information simple to see how it correlates, if at all, and to understand if 
there's any interaction between the variables, like the number of bugs 
reported during each month of a beta. 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics  
28	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
 
	
  
	
  
Some basics  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Resources  
28	
  
ICONS: WWW.THENOUNPROJECT.COM 
 
FONTS: WWW.GOOGLE.COM/FONTS 
 
CSS3 GENERATOR: WWW.CSS3MAKER.COM 
 
OPTIMISE & RESIZE IMAGES: 
WWW.IMAGEOPTIMIZER.NET 
 
COLOUR PALLETTE FROM IMAGE: 
WWW.DEGRAEVE.COM/COLOR-PALETTE 
 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
 
	
  
	
  
•  What do we want to 
comunicate? 
•  Which relatioship there is with 
data? 
•  How many dimensions do we 
want to show? 
•  Is there some time data? 
•  Is there any geographical data? 
Some questions  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Show, don’t tell 
30	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Some basics rules 
34	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Infographics 
From data to knowledge 
Tools 
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Tools for  non designers  
 
35	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Non cloud tools 
38	
  
Illustrator 
 
 
 
 
 
 
 
Inkscape 
 
 
 
 
 
 
 
h?p://design.tutsplus.com/tutorials/how-­‐to-­‐
create-­‐outstanding-­‐modern-­‐infographics-­‐-­‐
vector-­‐3524	
  
	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Infogr.am 
35	
  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
Infogr.am 
35	
  
•  Do we make some 
work to together ?  
Ignasi Alcalde 
Knowledge Management 
www.ignasialcalde.es Infographics: from data to knowledge 
45	
  
t	
   @ignasialcalde