Data Visualization Group in Bay AreaMeetup - April 2011Mathieu Bastian, Data Scientist
Introduction• Visualization of your LinkedIn Network• A map of my career, leverage communities• Big data, process 100M+ un...
Introduction• Visualization of your LinkedIn Network• A map of my career, leverage communities• Big data, process 100M+ un...
Interactive Visualization      Demoinmaps.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 Voldem...
2.Visualization• Large networks, 10 000+ bezier curves• We tried SVG, Canvas and more...• We took the Google Maps approach...
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                         ...
Q&Ahttp://inmaps.linkedinlabs.com
Upcoming SlideShare
Loading in …5
×

LinkedIn - InMaps Data Visualization Meetup April 2011

3,539 views

Published on

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/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,539
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

LinkedIn - InMaps Data Visualization Meetup April 2011

  1. 1. Data Visualization Group in Bay AreaMeetup - April 2011Mathieu Bastian, Data Scientist
  2. 2. Introduction• Visualization of your LinkedIn Network• A map of my career, leverage communities• Big data, process 100M+ unique networks
  3. 3. 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 ...
  4. 4. Interactive Visualization Demoinmaps.linkedinlabs.com
  5. 5. Manifesto• Visually attractive• Relevant• Interactive
  6. 6. Manifesto• Visually attractive• Relevant• Interactive ... And compatible with IE7+ and iPad
  7. 7. 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
  8. 8. 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
  9. 9. Seadragon• Tiles (256px)• Zoom & Pan• IE6+
  10. 10. RaphaelJS• Interactive• SVG & VML• IE6+
  11. 11. Map Design• Layout and distances
  12. 12. Map Design• Curved edges and density
  13. 13. Map Design• Text readability and positioning • Font between 10 and 14px • 4 px outline, 80% alpha • 2px vertical shift • Avoid overlap
  14. 14. Q&Ahttp://inmaps.linkedinlabs.com

×