Sean Gerety

Beautiful Evidence

Tonight I got home and after what seemed like years of waiting, "it" was here.  Edward Tufte's new book "Beautiful Evidence" has arrived on my doorstep. 

Tags: tufte | Design | sparklines

New Edward Tufte Book "Beautiful Evidence"

Edward Tufte's new book "Beautiful Evidence" is available for pre-order.  You can get it here: http://www.edwardtufte.com/tufte/books_be  Better hurry!

New Edward Tufte Book Announcement

Edward Tufte announced on his forum that his new book Beautiful Evidence will be available sometime in April.  In case you don't know who Tufte is, he is considered the "Da Vinci" of data design.  If you don't all of his books go out and get them now. 

Why is his material important?  Because his books are a study in clarity and common sense when presenting data.  Furthermore WPF and XAML will give us the tools to create his concepts.    

Powerpoint and Presentations

I recently pitched an idea to our management.  One of the tools I used was Powerpoint.  And since I'm a long time fan of Professor Tufte, I only wanted to use Powerpoint to help present my business case.  After all it's not about the powerpoint, it's about the conversation with your audience.

I've also been reading Cliff Atkinson's blog called Beyond Bullets.  He's got a great site and some great tools for creating your story and for illustrating it.  Here is one I used to talk about experience.  Check out Cliff's site and attend one of Tufte's courses to learn how to present.  And the pitch?  The pitch was a success.

Scoble Meetup

Saturday night's meetup at 5 seasons was great.  I got to meet Scoble, drink great beer, meet and talk about technology with a host of my tech counterparts here in Atlanta.  Scoble was chatting about Virtual Earth and was he ever right.  It's pretty damn cool.  The satellite photo and resolution (up to 40 yards!) is much better than Google's, and theirs lots of nice design features.  The light transparency of the top bar (IE only).  The double click to zoom and center.  A nice set of tools (permalink, locate me, blog it) and the large % percentage of page devoted to the actual map.  The virtual earth team hit it on the head with their Aerial Photo with Labels option.  This is what Google should have done.  I guess the folks at Virtual Earth where reading Tufte's post on mapped photos. 

Things I didn't care for in Virtual Earth?  I don't like that it opens a new window for directions.  And I'm not crazy about the compass rose; it should give more feedback when you click on it.  And it would be nice to be able to move both the compass rose and the zoom bar to the blue bar or anywhere you'd like. 

Topics at the meetup ranged for sever farm setup with Linux to Smart phones to of course, Windows Vista.  Rob Cannon and I had a great discussion about Avalon and all of the interesting stuff in .NET2.0 and his new gig.  Michael Earls talked about some very cool stuff that he's doing with Windows Media Center and other crunchy bits on .NET 2.0.  I also got to meet Jim Wooley, who is a VB guy working in the mortgage industry.  Jim's also a moderator of the local VB group.

One other interesting thing is that 5 seasons picked the night that Scoble came to dinner to start a blog.  Ken Grisnak is leading their effort to extend the experience of the brewery to the net.  Check it out if you're local or visiting Atlanta.

The only thing I would change about the meetup is to set up the area / tables so that there is more mingling.  See everyone at the next one!     

Update: On the Virtual Earth resolution 1 pixel = 40 yards.  Things I'd like to see:  Access to label info (think right click on the Staples Center in LA and set as the "Starting point" and then right clicking on the Hilton Checkers and set it as "Ending point" and then get a path between the two.  Another cool think would be to have different options for those paths.  Think walking directions in the city and driving directions in the burb's.  Another nice feature would be if multiple views are available of a sat view, make it an option.  Why?  If you look at downtown Manhattan the shadows cast by the buildings obscure the view.

New and Improved Sparkline

Update #2:

I've updated the code snippet below for the latest Avalon build.

Update:

I've changed the graphic to show how the well things look when you zoom.  Just use the Display Zoom slider in AvPad.  I've also changed the XAML example to stack the high and low values next to the stock sparkline and adjusted the Transform scale to provide a better aspect ratio as per Prof. Tufte.  And I've removed the width and height properties from the border element to give it a liquid layout.

Here's a new and improved in-line Sparkline example.  By using the Inline tag and slimming down the XAML it becomes even easier to handle.  And I've used some of the typography variants to achieve a better look and feel for the associated data.  Thanks to Filipe Fortes for the Inline tip.

Here's the XAML.

<Border xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/avalon/2005" Background="#ffffff" Padding="9">
    <TextFlow FontFamily="Palatino Linotype" FontSize="12">
        The following is over two hundred days of stock information for Microsoft <Inline Foreground="Blue">MSFT</Inline>
            <Polyline LayoutTransform="scale .1,.5" Points="1,26.23 2,26.19 3,26.14 4,26.1 5,25.76 6,25.89 7,25.73 8,25.62 9,25.83 10,25.54 11,25.86 12,26.1 13,25.94 14,25.94 15,25.93 16,25.78 17,26.12 18,26.3 19,26.33 20,26.35 21,26.13 22,26.48 23,26.56 24,27.22 25,27.24 26,27.54 27,25.95 28,25.45 29,25.33 30,25.53 31,25.16 32,25.22 33,25.51 34,25.45 35,25.61 36,25.48 37,25.59 38,25.8 39,25.95 40,25.85 41,25.08 42,24.93 43,25.2 44,25.31 45,25.03 46,25.19 47,24.41 48,24.15 49,24.5 50,24.63 51,24.89 52,25.13 53,25.18 54,25.16 55,25.38 56,25.09 57,25.37 57,25.72 59,25.83 60,26.35 61,26.37 62,26.37 63,26.39 64,26.7 65,26.53 66,26.5 67,26.7 68,26.88 69,26.61 70,26.57 71,26.46 72,26.77 73,26.99 74,26.59 75,26.95 76,27.15 77,27.02 78,26.9 79,27.08 80,26.96 81,27.01 82,27.29 83,27.4 84,27.65 85,27.91 86,27.71 87,28.25 88,28.8 89,28.48 90,28.01 91,28.3 92,28.1 93,27.81 94,27.54 95,27.7 96,27.43 97,27.57 98,27.66 99,28.16 100,28.21 101,28.24 102,28.14 103,27.45 104,27.37 105,27.52 106,27.46 107,27.21 108,27.04 109,27.15 110,27.18 111,27.36 112,27.4 113,27.04 114,27.06 115,26.74 116,26.65 117,26.61 118,26.59 119,26.38 120,26.24 121,25.98 122,26.2 123,25.67 124,25.66 125,25.84 126,25.71 127,25.45 128,25.4 129,25.73 130,25.11 131,25.1 132,25.35 133,25.15 134,25.15 135,25.5 136,25.69 137,25.98 138,25.8 139,26 140,26.1 141,26.23 142,26.1 143,26.07 144,26.68 145,26.14 146,26.12 147,26.74 148,27.2 149,26.91 150,26.61 151,28.91 152,28.89 153,29.35 154,29.35 155,28.93 156,29.23 157,29.07 157,28.68 159,28.78 160,28.91 161,28.94 162,28.82 163,29.14 164,29.19 165,29.08 166,28.5 167,28.52 168,27.8 169,28.83 170,28.19 171,28.24 172,28.46 173,29.6 174,29.07 175,29.96 176,29.5 177,28.5 178,28.9 179,28.36 180,28.34 181,27.84 182,27.55 183,28.37 184,28.84 185,28.38 186,28.43 187,28.3 188,27.26 189,26.52 190,26.51 191,26.42 192,26.57 193,26.5 194,26.22 195,26.24 196,26.45 197,26.62 198,25.7 199,25.54 200,25.63 201,25.6 202,25.73 203,25.61 204,25.58 205,25.71 206,25.65 207,25.66 208,26.18 209,26.17 210,26.41 211,26.23 212,26.47 213,26.61 214,26.89 215,26 216,26.45 217,26.38 218,26.04 219,26.89 220,26.69 221,27.52 222,27.27 223,27.4 224,27.31 225,26.91 226,27.47 227,27.7 228,27.42 229,26.5 230,26.88 231,26.15 232,25.64 233,25.63 234,25.75 235,25.26 236,25.7 237,25.78 238,26.33 239,26.07 240,26.07 241,25.96 242,25.39 243,24.65 244,24.99 245,24.88 246,24.68 247,23.75 248,23.67 249,24.09 250,24.87 251,24.88 252,24.64 253,24.61 254,24.4 255,24.41 256,24.79 257,24.22 257,24.16 259,24.03 260,24.63 261,24.76 262,25.57 263,25.79 264,25.62 265,25.99 266,26.2 267,26.36 268,25.74 269,25.99 270,26.37 271,25.86 272,26.1 273,25.72 " Stroke="Red" StrokeThickness="1" Opacity="1"></Polyline>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Height="12">
            <TextBlock Height="6">
                <Inline Foreground="Green" FontSize="5"> 29.96 </Inline>
            </TextBlock>
            <TextBlock Height="6">
                <Inline Foreground="Red" FontSize="5"> 23.67 </Inline>
            </TextBlock>
        </StackPanel> you see Avalon allows you to scale data down to a sparkline by taking advantage of vector graphics.

    </TextFlow>
</Border>

Updated Sparkline Example

Here's an updated version of the sparkline example using the new 2005 XAML schema.  This one is inside a textflow element with a TransformDecorator applied to the Polyline element.  You'll notice a couple of things that still need to be fixed.  On the stock symbol for MSFT there's no spacing between the word Microsoft and the word MSFT.  The same goes for the high / low values.  I also have to find the correct item to reposition the low value below the high value.  I wish that you could filter the WinFX SDK to only show results for XAML.  Especially for people like me that are just using AvPad.  For some more info on TransformDecorator check out Filipe Fortes blog entry titled “A Tale of Two Transforms”.  

Here's a screen shot of the results.

And the XAML is below.

<Window

xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Background="#ffffff">

<Canvas>
<TextFlow FontFamily="Gill Sans" FontSize="12" >The

following is over two hundred days of stock

information for Microsoft <TextBlock

Foreground="Blue">MSFT</TextBlock>
 <TransformDecorator Transform="scale .2 .5">
  <Polyline Points="1,26.23 2,26.19 3,26.14 4,26.1

5,25.76 6,25.89 7,25.73 8,25.62 9,25.83 10,25.54

11,25.86 12,26.1 13,25.94 14,25.94 15,25.93 16,25.78

17,26.12 18,26.3 19,26.33 20,26.35 21,26.13 22,26.48

23,26.56 24,27.22 25,27.24 26,27.54 27,25.95 28,25.45

29,25.33 30,25.53 31,25.16 32,25.22 33,25.51 34,25.45

35,25.61 36,25.48 37,25.59 38,25.8 39,25.95 40,25.85

41,25.08 42,24.93 43,25.2 44,25.31 45,25.03 46,25.19

47,24.41 48,24.15 49,24.5 50,24.63 51,24.89 52,25.13

53,25.18 54,25.16 55,25.38 56,25.09 57,25.37 57,25.72

59,25.83 60,26.35 61,26.37 62,26.37 63,26.39 64,26.7

65,26.53 66,26.5 67,26.7 68,26.88 69,26.61 70,26.57

71,26.46 72,26.77 73,26.99 74,26.59 75,26.95 76,27.15

77,27.02 78,26.9 79,27.08 80,26.96 81,27.01 82,27.29

83,27.4 84,27.65 85,27.91 86,27.71 87,28.25 88,28.8

89,28.48 90,28.01 91,28.3 92,28.1 93,27.81 94,27.54

95,27.7 96,27.43 97,27.57 98,27.66 99,28.16 100,28.21

101,28.24 102,28.14 103,27.45 104,27.37 105,27.52

106,27.46 107,27.21 108,27.04 109,27.15 110,27.18

111,27.36 112,27.4 113,27.04 114,27.06 115,26.74

116,26.65 117,26.61 118,26.59 119,26.38 120,26.24

121,25.98 122,26.2 123,25.67 124,25.66 125,25.84

126,25.71 127,25.45 128,25.4 129,25.73 130,25.11

131,25.1 132,25.35 133,25.15 134,25.15 135,25.5

136,25.69 137,25.98 138,25.8 139,26 140,26.1 141,26.23

142,26.1 143,26.07 144,26.68 145,26.14 146,26.12

147,26.74 148,27.2 149,26.91 150,26.61 151,28.91

152,28.89 153,29.35 154,29.35 155,28.93 156,29.23

157,29.07 157,28.68 159,28.78 160,28.91 161,28.94

162,28.82 163,29.14 164,29.19 165,29.08 166,28.5

167,28.52 168,27.8 169,28.83 170,28.19 171,28.24

172,28.46 173,29.6 174,29.07 175,29.96 176,29.5

177,28.5 178,28.9 179,28.36 180,28.34 181,27.84

182,27.55 183,28.37 184,28.84 185,28.38 186,28.43

187,28.3 188,27.26 189,26.52 190,26.51 191,26.42

192,26.57 193,26.5 194,26.22 195,26.24 196,26.45

197,26.62 198,25.7 199,25.54 200,25.63 201,25.6

202,25.73 203,25.61 204,25.58 205,25.71 206,25.65

207,25.66 208,26.18 209,26.17 210,26.41 211,26.23

212,26.47 213,26.61 214,26.89 215,26 216,26.45

217,26.38 218,26.04 219,26.89 220,26.69 221,27.52

222,27.27 223,27.4 224,27.31 225,26.91 226,27.47

227,27.7 228,27.42 229,26.5 230,26.88 231,26.15

232,25.64 233,25.63 234,25.75 235,25.26 236,25.7

237,25.78 238,26.33 239,26.07 240,26.07 241,25.96

242,25.39 243,24.65 244,24.99 245,24.88 246,24.68

247,23.75 248,23.67 249,24.09 250,24.87 251,24.88

252,24.64 253,24.61 254,24.4 255,24.41 256,24.79

257,24.22 257,24.16 259,24.03 260,24.63 261,24.76

262,25.57 263,25.79 264,25.62 265,25.99 266,26.2

267,26.36 268,25.74 269,25.99 270,26.37 271,25.86

272,26.1 273,25.72 " Stroke="Red" StrokeThickness="2"

Opacity=".5">
  </Polyline>
 </TransformDecorator><TextBlock Foreground="Green">

29.96 </TextBlock><TextBlock Foreground="Red"> 23.67

</TextBlock>
 you see Avalon allows you to scale data down to a

sparkline by taking advantage of it's vector graphics

rendering.</TextFlow>
</Canvas>
</Window>

I've got a couple of things left to do on this one.  Bind the polyline to XML, and bind the size of the sparkline so that it's tied to the font size.  I'll get to that next week.  Have a great weekend. 

Tufte in Atlanta, GA

Edward Tufte will be in Atlanta to teach his course on 28 Feb 2005 and 01 Mar 2005.  http://www.edwardtufte.com/tufte/courses

If you have $320 dollars it's money well spent.  Not only do you get three of his books (each about $55 retail) you also get the The Cognitive Style of PowerPoint essay and the best statistical graphic ever drawn, the map of losses suffered by Napoleon's army in the Russian campaign of 1812.  Did I also mention that Tufte's speaking style is very engaging?  Or that this one day course will improve your eye for design?

If you are going, show up early.  Professor Tufte is early and is very accessible.  Bring a notebook to take notes.  Sit in front.  Enjoy!

XAML Sparkline example

I have long been a fan of Professor Tufte's work.  He has been a proponent of a providing a higher data density in information display and commingling of data and text.  One of his ideas is sparklines: "small, high-resolution graphics embedded in a context of works, numbers, images".  There is already quite a bit of discussion on sparklines on his site, and a draft chapter from his forthcoming book Beautiful Evidence.

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1&topic=
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Lk&topic_id=1&topic=

Since Avalon, XAML and Longhorn will give us more control and a greater data density (If the price of monitors come down), sparklines are a great exercise to try out XAML and Avalon's capabilities. 

Here is a first attempt at building a sparkline.  I had tried various methods for piecing the sparkline together from using a single Canvas to using DockPanel's to nested Canvases.  Here's a couple of shots. 
 

Here's what I did.

1. Go to MSN money or a finance site and grab a cvs (comma delimited) of a stock for a year.  Transform the data in to a position pairs (incremental value, data value).  This is your graph line.
2. Grab the high and low value for display and the stock symbol name.  I then put each item into it's respective canvas.  One canvas for the stock symbol, one for the graph line and one for the high low values. 
3. Then using a TransformDecorator rescale the graph to fit  Tufte's recommended ratio.  (see thread).  You'll have to move the graph line canvas up hence the negative value for the graph line canvas. 

All in all it's pretty easy.  Here's the next steps.

1. Accept a xml file for input.
2. Create an mixed text and sparkline example.  I just have to get the correct tree structure. 

Here's some of the usage scenarios of Longhorn, XAML and sparklines.

Dr. Smith using his tablet PC enters a patient’s room and pulls up the patients “chart”.  This is done via a web service that pulls data from the in-room instruments and historic data from the patient’s doctor and hospital records.   On the chart is 20 plus sparklines with data from the last 60 days.  The doctor can view the sparklines and get a quick look at the overall health of the patient.  Dr. Smith is curious about the glucose levels of his patient and “mouse’s” over the glucose sparkline with his tablet pen.  The sparkline gets a zoom icon on the bottom right corner and Dr. Smith clicks the sparkline.  The sparkline then zooms out (think of magnify plus setting the sparkline to the top of the z-order) and the doctor can then see detailed information to make a more informed decision.

Or…

Alternate views of perfmon.  Instead of values being over laid and obfuscated, you would instead get a stacked and moveable view of sparklines.  You could re-arrange the sparklines to your liking.

Or…

You want to watch your stocks, so in Longhorn you add a new tile app that presents one year of stock data as a sparkline tile on the sidebar that pulls its data from a web service via Indigo.  This tile app would have the same zoom function as above. 

And last but not least the code.

<Border ID="root" xmlns="http://schemas.microsoft.com/2003/xaml" Background="#e7edf8" Height="30" Width="200">
<Canvas>
 <Canvas>
 <Text Canvas.Top="5" ID="StockSymbol">MSFT</Text>
 </Canvas>
 <Canvas Left="30" Top="-10">
 <TransformDecorator>
  <TransformDecorator.Transform>
  <ScaleTransform ScaleX=".5" ScaleY="1" />
  </TransformDecorator.Transform>
  <Polyline Points="1,26.23&#xD;&#xA;2,26.19&#xD;&#xA;3,26.14&#xD;&#xA;4,26.1&#xD;&#xA;5,25.76&#xD;&#xA;6,25.89&#xD;&#xA;7,25.73&#xD;&#xA;8,25.62&#xD;&#xA;9,25.83&#xD;&#xA;10,25.54&#xD;&#xA;11,25.86&#xD;&#xA;12,26.1&#xD;&#xA;13,25.94&#xD;&#xA;14,25.94&#xD;&#xA;15,25.93&#xD;&#xA;16,25.78&#xD;&#xA;17,26.12&#xD;&#xA;18,26.3&#xD;&#xA;19,26.33&#xD;&#xA;20,26.35&#xD;&#xA;21,26.13&#xD;&#xA;22,26.48&#xD;&#xA;23,26.56&#xD;&#xA;24,27.22&#xD;&#xA;25,27.24&#xD;&#xA;26,27.54&#xD;&#xA;27,25.95&#xD;&#xA;28,25.45&#xD;&#xA;29,25.33&#xD;&#xA;30,25.53&#xD;&#xA;31,25.16&#xD;&#xA;32,25.22&#xD;&#xA;33,25.51&#xD;&#xA;34,25.45&#xD;&#xA;35,25.61&#xD;&#xA;36,25.48&#xD;&#xA;37,25.59&#xD;&#xA;38,25.8&#xD;&#xA;39,25.95&#xD;&#xA;40,25.85&#xD;&#xA;41,25.08&#xD;&#xA;42,24.93&#xD;&#xA;43,25.2&#xD;&#xA;44,25.31&#xD;&#xA;45,25.03&#xD;&#xA;46,25.19&#xD;&#xA;47,24.41&#xD;&#xA;48,24.15&#xD;&#xA;49,24.5&#xD;&#xA;50,24.63&#xD;&#xA;51,24.89&#xD;&#xA;52,25.13&#xD;&#xA;53,25.18&#xD;&#xA;54,25.16&#xD;&#xA;55,25.38&#xD;&#xA;56,25.09&#xD;&#xA;57,25.37&#xD;&#xA;57,25.72&#xD;&#xA;59,25.83&#xD;&#xA;60,26.35&#xD;&#xA;61,26.37&#xD;&#xA;62,26.37&#xD;&#xA;63,26.39&#xD;&#xA;64,26.7&#xD;&#xA;65,26.53&#xD;&#xA;66,26.5&#xD;&#xA;67,26.7&#xD;&#xA;68,26.88&#xD;&#xA;69,26.61&#xD;&#xA;70,26.57&#xD;&#xA;71,26.46&#xD;&#xA;72,26.77&#xD;&#xA;73,26.99&#xD;&#xA;74,26.59&#xD;&#xA;75,26.95&#xD;&#xA;76,27.15&#xD;&#xA;77,27.02&#xD;&#xA;78,26.9&#xD;&#xA;79,27.08&#xD;&#xA;80,26.96&#xD;&#xA;81,27.01&#xD;&#xA;82,27.29&#xD;&#xA;83,27.4&#xD;&#xA;84,27.65&#xD;&#xA;85,27.91&#xD;&#xA;86,27.71&#xD;&#xA;87,28.25&#xD;&#xA;88,28.8&#xD;&#xA;89,28.48&#xD;&#xA;90,28.01&#xD;&#xA;91,28.3&#xD;&#xA;92,28.1&#xD;&#xA;93,27.81&#xD;&#xA;94,27.54&#xD;&#xA;95,27.7&#xD;&#xA;96,27.43&#xD;&#xA;97,27.57&#xD;&#xA;98,27.66&#xD;&#xA;99,28.16&#xD;&#xA;100,28.21&#xD;&#xA;101,28.24&#xD;&#xA;102,28.14&#xD;&#xA;103,27.45&#xD;&#xA;104,27.37&#xD;&#xA;105,27.52&#xD;&#xA;106,27.46&#xD;&#xA;107,27.21&#xD;&#xA;108,27.04&#xD;&#xA;109,27.15&#xD;&#xA;110,27.18&#xD;&#xA;111,27.36&#xD;&#xA;112,27.4&#xD;&#xA;113,27.04&#xD;&#xA;114,27.06&#xD;&#xA;115,26.74&#xD;&#xA;116,26.65&#xD;&#xA;117,26.61&#xD;&#xA;118,26.59&#xD;&#xA;119,26.38&#xD;&#xA;120,26.24&#xD;&#xA;121,25.98&#xD;&#xA;122,26.2&#xD;&#xA;123,25.67&#xD;&#xA;124,25.66&#xD;&#xA;125,25.84&#xD;&#xA;126,25.71&#xD;&#xA;127,25.45&#xD;&#xA;128,25.4&#xD;&#xA;129,25.73&#xD;&#xA;130,25.11&#xD;&#xA;131,25.1&#xD;&#xA;132,25.35&#xD;&#xA;133,25.15&#xD;&#xA;134,25.15&a