Upload
mathieubastian
View
3.381
Download
1
Tags:
Embed Size (px)
DESCRIPTION
InMaps is an interactive visual representation of your LinkedIn network, available at inmaps.linkedinlabs.com This presentation was given during the Data Visualization Meetup, hosted at LinkedIn, Mountain View in April 2011. This short presentation focus on the visualization challenges, and in particular the creation of the interactive explorer built with Javascript and HTML5. The presentation also covers some design aspects, including text readability. See also http://blog.linkedin.com/2011/01/24/linkedin-inmaps/
Citation preview
Data Visualization Group in Bay AreaMeetup - April 2011
Mathieu Bastian, Data Scientist
Introduction
• Visualization of your LinkedIn Network
• A map of my career, leverage communities
• Big data, process 100M+ unique networks
Introduction
• Visualization of your LinkedIn Network
• A map of my career, leverage communities
• Big data, process 100M+ unique networks
• We need a Data Science Team
...
Interactive Visualization
Demo
inmaps.linkedinlabs.com
Manifesto
• Visually attractive
• Relevant
• Interactive
Manifesto
• Visually attractive
• Relevant
• Interactive
... And compatible with IE7+ and iPad
1. Data processing
• Pre compute what’s possible on Hadoop
• Force Directed layout on millions graphs
• Data stored on Voldemort
• Stack in Ruby, Java, LinkedIn APIs
2. Visualization
• Large networks, 10 000+ bezier curves
• We tried SVG, Canvas and more...
• We took the Google Maps approach
• Use images and add interactivity layer
• Seadragon + RaphaelJS
Seadragon
• Tiles (256px)
• Zoom & Pan
• IE6+
RaphaelJS
• Interactive
• SVG & VML
• IE6+
Map Design
• Layout and distances
Map Design
• Curved edges and density
Map Design
• Text readability and positioning
• Font between 10 and 14px
• 4 px outline, 80% alpha
• 2px vertical shift
• Avoid overlap
Q&A
http://inmaps.linkedinlabs.com