SlideShare a Scribd company logo
1 of 36
Download to read offline
From Data Journalism to Data 
Illustration 
! 
Visualizing Data with JavaScript at 
Twitter 
Nicolas Garcia Belmonte / @philogb
https://interactive.twitter.com/
Platform 
! 
Global / Real-Time / Conversational
Verticals 
! 
Government / News / Sports / TV / Music
Tone of the Visualization 
! 
Narrative / Exploratory / Expositive / Fun
Government 
!
State of the 
Union Address 
SVG + CANVAS
Visual Display
Visual Display
Visual Display
Visual Display
From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter
Web of 
Influence on 
Twitter 
CANVAS
Brazil Elections 
SVG
News 
!
Typhoon 
Haiyan 
CANVAS 
!
Visual Display
Visual Display
Visual Display
Visual Display
Visual Display
Visual Display
Visual Display 
http://github.com/philogb/mingle
Sports 
!
World Cup 
CANVAS + SVG
World Cup 
CANVAS + SVG
When to use WebGL ?
COOL FACTOR
#CannesLions
Interactive Experiences
WebGL Insights 
http://webglinsights.blogspot.com/ 
! 
!
From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter
From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter
Key Takeaways 
!
From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter
@philogb 
https://interactive.twitter.com/

More Related Content

More from philogb

From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...philogb
 
The Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer ConferenceThe Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer Conferencephilogb
 
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at TwitterHacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitterphilogb
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitterphilogb
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitterphilogb
 
La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...philogb
 
Exploring Web standards for data visualization
Exploring Web standards for data visualizationExploring Web standards for data visualization
Exploring Web standards for data visualizationphilogb
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSphilogb
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datosphilogb
 
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.philogb
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.philogb
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript philogb
 
Data visualization for the web
Data visualization for the webData visualization for the web
Data visualization for the webphilogb
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012philogb
 
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011philogb
 
PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011philogb
 
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...philogb
 
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the webJavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the webphilogb
 
JavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit OverviewJavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit Overviewphilogb
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 

More from philogb (20)

From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
 
The Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer ConferenceThe Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer Conference
 
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at TwitterHacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
 
La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...
 
Exploring Web standards for data visualization
Exploring Web standards for data visualizationExploring Web standards for data visualization
Exploring Web standards for data visualization
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
 
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
 
Data visualization for the web
Data visualization for the webData visualization for the web
Data visualization for the web
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011
 
PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011
 
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
 
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the webJavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
 
JavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit OverviewJavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit Overview
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 

Recently uploaded

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 

Recently uploaded (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 

From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter