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

From Data Journalism to Data Illustration

!

Visualizing Data with JavaScript at Twitter

Nicolas Garcia Belmonte / @philogb

https://interactive.twitter.com/

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

http://twitter.github.io/interactive/sotu2014/

http://twitter.github.io/interactive/sotu2014/

Visual Display

Visual Display

Visual Display

Visual Display

Web of Influence on

TwitterCANVAS

https://interactive.twitter.com/election2014/

https://interactive.twitter.com/election2014/

Brazil ElectionsSVG

https://interactive.twitter.com/brazil2014/

https://interactive.twitter.com/brazil2014/

News !

Typhoon Haiyan

CANVAS !

http://twitter.github.io/interactive/philippines/

http://twitter.github.io/interactive/philippines/

Visual Display

Visual Display

Visual Display

Visual Display

Visual Display

Visual Display

Visual Display

http://github.com/philogb/mingle

http://philogb.github.io/mingle/examples/ier/

http://philogb.github.io/mingle/examples/ier/

http://github.com/philogb/mingle

Sports !

World CupCANVAS + SVG

https://interactive.twitter.com/wccompetitree/

https://interactive.twitter.com/wccompetitree/

World CupCANVAS + SVG

https://interactive.twitter.com/wcmentions/

https://interactive.twitter.com/wcmentions/

When to use WebGL ?

COOL FACTOR

#CannesLions

http://philogb.github.io/cannes-lions

Interactive Experiences

http://philogb.github.io/laika

WebGL Insights http://webglinsights.blogspot.com/

!

!

http://philogb.github.io/page/temperature-anomalies

http://philogb.github.io/page/color-cube

Key Takeaways !

@philogb



Technology

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