SlideShare uma empresa Scribd logo
1 de 36
Baixar para ler 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
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/ 
! 
!
Key Takeaways 
!
@philogb 
https://interactive.twitter.com/

Mais conteúdo relacionado

Mais de 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
 

Mais de 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
 

Último

Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 

Último (20)

Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 

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