Embed Size (px)
Citation preview
EffectiveInformation Visualizationwith
SilverlightMatthias Shapiro
Twitter: @matthiasshapiroEmail: [email protected]
If you have no patience whatsoever
http://blogs.veracitysolutions.com
http://designersilverlight.com
Why care about information visualization?
Types of information visualization (crash course)
If you have no patience whatsoever, Part 2
How Silverlight Makes InfoViz easier/better– Displaying Data– Animations– Bing Maps– Some stuff I just whipped up for this
The “I’ll figure it out on my own” Book Club
If you have no patience whatsoever, Part 2
Why We Info Viz
Wait TimesPageviews
ProfitsEmployment
DeficitsCalories
SalariesWords per
minute
Miles travelled
Tweets Per Day
How do we look at this?
Why We Info Viz
• CSV• XML• Excel• Access• Grids Upon Grids Upon Grids…
Why We Info Viz
• CSV• XML• Excel• Access• Grids Upon Grids Upon Grids…
Example: 2009 Stimulus
goes to
Photos from: Aresauburnsphotos, http://www.flickr.com/photos/aresauburnphotos/2678453389/Samm4mrox, http://www.flickr.com/photos/samm4mrox/4079317912/
Example: 2009 Stimulus – Highways?
Example: 2009 Stimulus - Highways
(Treemap)
5 Ways To Display Information Visually(3 Minute Lightning
Version)
SIZECOLORLOCATIONNETWORKSTIME Word Cloud
http://www.wordle.net
SIZECOLORLOCATIONNETWORKSTIME
Map of the Market (Treemap)http://www.smartmoney.com/map-of-the-market/
SIZECOLORLOCATIONNETWORKSTIME
Totally Awesome People
Slightly Less Awesome People
Vectors Mapped onto Google Maphttp://www.aaronkoblin.com/work/
flightpatterns/
SIZECOLORLOCATIONNETWORKSTIME
Nexus (Network Graph)http://nexus.ludios.net/
(no longer operational, but code available)
SIZECOLORLOCATIONNETWORKSTIME
NameVoyagerhttp://www.babynamewizard.com/voyager
SIZECOLORLOCATIONNETWORKSTIME
DONE!
Terminology Time
InfographicsStatic
Interactive Visualization
Dynamic (Interactive)
Infographics
Adam Crowehttp://www.flickr.com/photos/adamcrowe/4002050596
Infographics
Adam Crowehttp://www.flickr.com/photos/adamcrowe/4002050596
Interactive Visualization
New York Timeshttp://www.nytimes.com/interactive/2009/07/31/
business/20080801-metrics-graphic.html
vsInfographic?
Interactive Visualizatio
n?
USERS?Who are your
Silverlight Example:
[Go to Live Sample]
Silverlight Example DeconstructedShowing Size With Circles• Size the AREA not the RADIUS
1 X 1
10
2 X 2
40NOT 20
Silverlight Example DeconstructedShowing Size With Circles“I want to visualize $200 compared to $100”
Silverlight Example DeconstructedShowing Size With Circles
$200
“I want to visualize $200 compared to $100”
Baseline Size and Data
Silverlight Example DeconstructedShowing Size With Circles
$200
Silverlight Example DeconstructedShowing Size With Circles
$200
Silverlight Example DeconstructedShowing Size With Circles
$200
Silverlight Example DeconstructedShowing Size With Circles
$200
Silverlight Example DeconstructedShowing Size With Circles
$200
Silverlight Example DeconstructedShowing Size With Circles
$200
Silverlight Example DeconstructedShowing Size With Circles
$200
$100
Silverlight Example DeconstructedShowing Size With Circles
$200
$100
$100
WRONG
Silverlight Example DeconstructedShowing Size With Circles
$200
$10
Silverlight Example DeconstructedAnimations
• The soul of interactive visualizations
• Animate Everything– Height-Width– Position– Color– Opacity
Silverlight/Bing Example:
[Go to Bing Sample]
Adding a Bing Map to a Silverlight App• Download/Install: Bing Maps Silverlight Control
SDK http://www.microsoft.com/maps/isdk/silverlight/
• Add the following namespace/XAML
Adding Items to a Bing Map• Add a “MapItemControl” and bind to a
source
Animate Everything• Animating Bing Position & Zoom – super
easy
Animate Everything• Animating Items In – Super Easy
[Go To Blend Demo]
Animate, Animate, Animate
“I’ll Figure It Out For Myself” Book ClubEdward TufteInformation Visualization god
Ben Fry
“Visualizing Data”
processing.org
“I’ll Figure It Out For Myself” Book Club
http://benfry.com/
Nathan YauContributing Author for Beautiful Data
http://flowingdata.com/
“I’ll Figure It Out For Myself” Book Club
Rick Barraza
WritableBitmaps
Fluid Dynamics
Other Awesome Math-y Things
http://www.cynergysystems.com/blogs/page/rickbarraza
“I’ll Figure It Out For Myself” Book Club
Joshua Allen & Jon Udell (Descry)
http://www.visitmix.com/labs/descry/
“I’ll Figure It Out For Myself” Book Club
Jeff Paries
http://designwithsilverlight.com/
“I’ll Figure It Out For Myself” Book Club
Foundation Silverlight 3 Animation
XAML animation &code-based animation
Beautiful Visualization (April 2010)
“I’ll Figure It Out For Myself” Book Club
Please Fill Out An EvaluationMatthias Shapiro
Twitter: @matthiasshapiro
http://www.designersilverlight.com
http://www.veracitysolutions.com
