Samuel Wan : News, Information and Resources

Blog Treemap Visualizer

View it here.
Download the source files here.

Released under Creative Commons Attribution license, which means you can use it for anything, as long as you give me credit. It was a two-day project from months ago, so I can't remember all the details. The treemap is divided into regions representing different categories of blog posts. Each square represents a post, and its area is relatively proportionate to the number of comments in each post. In other words, the more interest in a post, the larger its area. The lightness of each rectangle's color reflects its recency, so the most recent posts should have the lightest colors (see below for details on HLS-RGB conversion algorithm).

The source code contains some interesting MT blog classes I wrote to make the project work: Blog Data Provider, Blog-to-TreeModel converter, Movable Type XML Parser and convertor to the Blog Data Provider.

The TreemapDisplay component has some interesting code snippets you might find useful: recursive squarified treemap layout algorithm based on code by Ben Bederson (read full text for links), renderer based on the results of the layout algorithm, and an HLS-to-RGB conversion algorithm. I ported the HLS-to-RGB algorithm from some free code in some language I'd never seen before, I think it was called "Delphi" or something like that. You really need an HLS-to-RGB converter for treemaps because you can use lightness and saturation as an extra visual indicator, in addition to size, for comparing different values in the treemap.

Please click on the "more" link below to read the rest of the story, lots of interesting stuff in this post! By the way, I apologize if you came to this website looking for the original research information on treemaps... my high ranking in google is a side-effect of the whole blog phenomenon, and sometimes my site gets ranked 2nd or 3rd on search topics out of proportion to the meta intentions of the content. However, I've got lots of useful links in the full text of this post if you want quick access to the most useful resources on treemaps.

UPDATE: Looks like there's a bug in my layout algorithm... can you see what it is?

ORIGINS OF THE PROJECT
I first learned about treemaps during grad school in my favorite class, SI682 Information Visualization, first taught by Dr. Furnas, and then taught by Dr. Mirel. I missed Dr. Furnas' class because I didn't have the prerequisites to take it before he left for sabbatical, but he let me audit his lectures. The next year, I got to attend the class for real, with Dr. Barbara Mirel as the instructor. She introduced us to many of the same info-vis papers and models as Dr. Furnas, but she came from an applied usability engineering background at Lucent and made user-testing a major component of our class projects on info-visualization. I think the usability aspect gave the course a stronger practical value, especially for someone like me who likes to build prototypes instead of just read about them.

I was building prototypes during and after class during the whole semester: radial layout, really bad fisheye views, elastic windows, magic lenses, query filters, etc. I think treemap and fisheye view visualizations gave me the most trouble because I was trying to build prototypes based on the original research papers, which focused on the underlying theory. I didn't know that I could find papers that explained algorithms for actually implementing these darn things. Eventually, I found the Sarkar-Brown distortion algorithm (see earlier posts on my fisheye-view listbox component).

I've spent the past year doing something totally different, building real-time collaborative environments, but a few months ago, I took a weekend to give treemaps another go as a way of keeping up my interest in HCI research.

RESOURCES FOR TREEMAPS
SmartMoney.com offers a treemap of the stock market, and when Dr. Mirel demonstrated the applet in class, I instantly wished we could do something like this in Flash. A few months ago, I decided to give treemaps another try, and found more information at the University of Maryland's HCIL website. They have a whole section devoted to treemaps, including papers, sample code, and applets.

I had some difficulty translating the Java code into Actionscript because of the idiosynchracies in Flash MX's object model and library symbol linkages, but hey, it sure beats the pants off of coding graphics by hand in Swing :)

I think the squarified layout offers the most aesthetically pleasing arrangement because the human eye can compare surface area more easily if the width/height aspect ratio is closer to 1. The slide-and-dice layout has awful aspect ratios, and makes you feel like your comparing zebra stripes with a vertigo effect. Currently, my favorite research paper (in terms of writing style, content, and clear sequence of explanations), is "Squarified Treemap", by Bruls, Huizing, and van Wijk.

ABOUT THE SOURCE CODE
The treemap display component follows the MVC model. You have a treemap display component which accepts a Tree Data Model. Unfortunately, Actionscript doesn't support interfaces or strong typing, so you'll just have to take my word that the component design is as close to Java as I could manage. I might have gone overboard on object-oriented design a few months ago when I was playing around with Visual Studio, and got too used to playing in a clean OOP language. Other interesting tools built in the course of this project include a special Blog Data Model, a plugin-based blog parser for different blog types, and a BlogData-to-TreeModel converter. They're all in the source code, including the MT template.

Again, I wrote all of this stuff in 2 days, and haven't touched it for months, so please be patient (or volunteer some help) if you want documentation. Hope you enjoy this code :-)

-Sam

Green Grass and Brush Strokes

View "Green Grass" (refresh to see new growth)
View "Brush Strokes"
Source Code for "Green Grass" and "Brush Strokes"

I was waiting for AT&T to arrive for my cable modem installation. I looked outside and saw thin branches of a tree in the wind, so I wrote this flash movie to generate bamboo leaf brush-strokes. It took about half an hour or so...

I don't have time to take this effect anywhere, feel free to use the code as you wish. Maybe even post a link to something you've made with my code.

Basically, I use the curveTo method to draw a triangle with two curved edges. By varying the location of the anchor, location of the triangle tip, width of the triangle, and height of the triangle, I'm able to create an impression of leaves and grass.

Bevel Components Version 2 Beta

Man, this took a lot longer than I expected. I ended up re-writing much of the core structure from scratch last night. This is just a beta, I need some beta testing if you've got time. Please post bugs in the comments section.

View Demo
or
Download Source and Documentation

Two new components: Thin Bevel has only one bevel on its edge as many people requested. Style Manager lets you visually choose style colors and apply them to one or more components without having to write any Actionscript.

The documentation is a textfile that describes the component methods. It should be easy enough to figure out the component color parameters. Here's something very cool: The new component, Style Manager, acts like an FStyleFormat object. You can choose the colors of the style manager, and add the instance names of other components in the first parameter, "Target Components". When you run the Flash movie, the Style Manager will automatically colorize all of the registered components.

For example, the "Target Components" parameter of the style manager in the demo contains the instance names of all the scrollbars and bevel components. When you run the movie, all of those components will have a blue tint, as specified in the Style Manager's color parameters.

This is just a beta... I'd like to get more testing done before moving on to documentation and MXP packaging.

Thunderlizard Presentation

I just taught two sessions at the Thunderlizard Web Design conference in Seattle. In the first session, I talked about Rapid Flash Application development with components, using the same source file from last week's workshop in New York. The main difference is that I covered a lot more material in Seattle because I didn't have a cold, but otherwise, the source files are the same.

In the second session, I talked a bit about OOP and Actionscript, with a focus on how to build re-usable components. I also got to walk through a Flash application using SharedObjects, and spent a few minutes describing the LocalConnection feature.

Source code for the Flash Applications and OOP Actionscript are now online. Thanks to everyone who attended the session!

FF2002 NY - Download Presentation and Source Code

I've created a webpage for the presentation source code and accompanying documentation. You can now access the presentation at http://samuelwan.com/flashforward/newyork2002/.

Thanks to everyone who attended my session! Feel free to post comments or email me if you have any questions. For those who attended the session, I'd really appreciate it if you could fill out the feedback form that the Flash Forward organizers usually send out after the conference. Your feedback is really helpful to the organizers and speakers, and hopefully I'll get the chance to present again :)

Bevel Panel Components

***UPDATE: The live preview .flas are now available here***

Download Zip File (components, demos, source files, and documentation)
View Single Bevel Demo
View Double Bevel Demo
Live Preview source files

User interfaces frequently employ beveling techniques to distinguish one section of an interface from another section. Traditionally, beveling in Flash took a lot of manual labor to draw each vector rectangle. Fortunately, these two bevel panel component allows you to create beveled rectangles quickly and easily. Unlike regular vector graphics, the beveled edges of these rectangles will not distort when you resize the component. You can change the colors of the beveled panel by using the color component parameters in the property inspector. Other component parameters allow you to specify the width of the bevels, as well as invert the beveling scheme.

The component also supports several methods for manipulating the component via Actionscript. For more information and demonstrations of the component methods, check out the online demonstrations for single and double bevels. The downloadable zip file includes examples and very thorough documentation.

Thanks to Eric Jordan, virtuoso of beveled interfaces, for beta-testing the components!

Fisheye Menu 1.01 Patch

Thanks to Robert for pointing out that oversized focusLength parameter values will screw up the rendering. I've fixed the problem and also added failsafes for oversized maxSize parameter values. It's recommended that you download version 1.01 here if you intend to use this component for your own projects.

-Sam

Fisheye Menu in Flash MX

View Demo
Download Source Code

PERSONAL NOTES
So I've read a lot of posts on the flashcoders mailing list lately, debating about the power vs. complexity of Macromedia components and whether we'd be better off with a thinner architecture. As a general rule in UI design, solid usability comes with a higher cost in development effort and testing, and Macromedia components are no exception to the rule. The architecture behind components such as the ListBox component allows Flash developers to extend the functionality of those widgets while re-using all of the coding efforts that made them so user-friendly in the first place. I think this fisheye menu demonstrates the extensibility of the Framework engineers' architecture. Not only is it usable, but it also smoothly inherits the FSelectableListClass functionality and integrates into the FUIComponent class hierarchy.

Flash developers might recognize fisheye menus from Joshua Davis' "Tsunami" special effect. Fisheye views have actually been around for much longer than Flash (Furnas, 1986). The main difference is in the mathematics and user interaction, which follow tighter constraints in a full implementation of fisheye distortion.

OVERVIEW
This implementation of the fisheye menu extends the original Listbox component. The Flash-based fisheye menu takes advantage of the natural vector scalability found in the SWF format, and adopts Macromedia UI Component techniques for quick development time and optimized run-time performance. The vertical distribution of menu items is based on the Sarkar-Brown distortion function. Menu items above the focus index are distributed with an inverted Sarkar-Brown function, and items below the focus index are distorted with a non-inverted function. Focus spanning is based on the design patterns found in Ben Bederson's Swing-based Java source code (http://www.cs.umd.edu/hcil/fisheyemenu/).

The fisheye menu is identical to the listbox component in every way, except for the vertical distribution of items. The fisheye menu supports all of the APIs, selection, multi-selection, and event-handling features found in the original Macromedia FListBox component. Four additional component parameters allow the user to customize the fisheye distortion effect:

COMPONENT PARAMETERS
Focus Length - Number of menu items shown at full size near the mouse cursor
Distortion - Degree of distortion in the Sarkar-Brown distortion function.
(Any integer greater than 0)
Max Size - Maximum height of a focused menu item
Highlight Border - Border color of the item under the mouse cursor.

REFERENCES:
Sarkar, M., & Brown, M. H. (1992). Graphical Fisheye Views of Graphs. In Proceedings of Human Factors in Computing Systems (CHI 92) ACM Press, pp. 83-91.

G. W. Furnas. Generalized fisheye views. In M. M. Mantei and P. Orbeton, editors, Proceedings of the ACM Conference on Human Factors in Computer Systems, SIGCHI Bulletin, pages 16--23, New York, U.S.A., 1986. Association for Computer Machinery. 10

Bederson, B. B. (November 2000). Fisheye Menus. In Proceedings of ACM Conference on User Interface Software and Technology (UIST 2000), pp. 217-226, ACM Press.

Hollands, J. G., T. T. Carey, M. L. Matthews, and C. A. McCann. "Presenting a Graphical Network: A Comparison of Performance Using Fisheye and Scrolling Views." Proceedings of the Third International Conference on Human-Computer Interaction. 1989. v.2. p.313-320.

RSS Parser

Download Here

Before I started building a Flash UI for the Movable Type blog, I needed a good collection of XML templates and parsers/converters. The first thing I built was an RSS converter, which allows you to asynchronously load an RSS feed, convert into a data object (for easier handling), and return the object to a callback method.

Here's a snippet from the internal documentation...

AUTHOR: Samuel Wan
DATE: May 2002
DESCRIPTION:
A factory object which parses an XML feed and returns the information
as a data object by passing the object as an argument to a callback
function in the specified callback target. Only works with RSS 0.91
or earlier. For complete documentation, refer to the Actionscript in
the first keyframe of the RSSDataFactory movieclip.

EXAMPLE:
this.receiveRSSObject = function(rssObject)
{ trace("Channel Title: " + rssObject.channels[0].title);
for(var i = 0; i < rssObject.channels[0].items.length; i++)
{ trace("Item Title: " + rssObject.channels[0].items[i].title);
}
}
rssObj = new RSSDataFactory()
rssObj.parseFeed("http://www.samuelwan.com/information/index.xml",
this, "receiveRSSObject");

Dynamic PieChart

Someone really needed a piechart with dynamically settable values. Since I wrote the piechart components, I figured I was responsible for demonstrating a solution.

View Demo or Download source

Expression by Proxy: Original Files

Download Source (885kb, zip)
All images, source code, and animation copyright by Samuel Wan, 2000-2002. The contents of these files may be studied for educational purposes. Redistribution of any part of the source code is not permitted.

From the looks of the Flash structure and code, it looks like I originally wrote this in Flash 4. I remember writing it in Flash 5, but probably got them confused because I built this file during the Flash 5 beta.

• Scene Breakdown:
  
  
  
  • Scene 1 (Stars) - Preloader with sparkling star particles thrown by the mouse cursor
    
  • Scene 2 (Violin) - Contains chapters 1 & 2
    
  • Scene 3 (Untitled) - Contains chapter 3. Flying birds form a woman's smiling face. Floating brush-strokes merge into the chinese characters for my name. The chinese calligraphy was written by my father, vectorization and animation by me.
    

  
  

• Library Folder Descriptions:
  
  
  
  • Bird - animation of flying bird, made from parts of a Photoshop composite of a woman's face.
    
  • Bitmaps - contains most of the big bitmap files
    
  • ChineseBrushFolder - small pieces of the brushstrokes and Actionscript for brushstroke animation
    
  • Drag - assets for chapter 2
    
  • MainStuff - navigation elements
    
  • NegativeFace - alternate composites of the flaring eyes face in Chapter 3
    
  • NextButton - navigation elements for chapter 1
    
  • Ripple - animation assets for the rippling violin strings in chapter 1
    
  • Star - flying stars from the introduction
    
  • Text - some miscellaneous labels
    
  • ViolinSquares - bitmap transition animation between chapters 1 & 2
    
  • Warp Folder - I can't remember what this folder does... probably nothing
    

  
  

• Fonts you'll need:
  
  
  
  • Letter Gothic - monospaced font for the floating text engine
    
  • Poetica ChanceryI - cursive font for most of the navigation labelling
    
  
  

Sharks and Prey

View Shark Demo
Download Source Code

This demo was first created in July, 2001. Click on the screen to feed the sharks. The source code was written in Flash 5, but I recently saved it as Flash MX format, so you'll need the Flash MX authoring tool to view the source. I don't recommend the programming style in the shark demo, since it was written during Flash 5 without the benefit of dynamically assigned event handlers. However, countless people have asked for the source code, so I'm releasing it as is, without cleaning up the code.

"Sharks and Prey" is a prototype for life-like movement and behavior in Flash. My original prototype for life-like movement was built in 1999, using Flash 4 Actionscript. In this modern version, the smooth, sinuous movements of the shark bodies are derived from a trigonometrically constrained chain of body segments.

The intelligent hunting behavior of the sharks have their origins in a 1999 paper entitled "Steering Behaviors for Autonomous Characters", written by Craig W. Reynolds at www.red3d.cwr. In this case, I have adapted the "Wander Behavior" concept from Craig Reynolds. Since I couldn't find his Java source code, I created a new Actionscript algorithm based on his original idea. I also added some of my own smoothing equations to help the sharks make curved turns instead of sharp turns, as if they were really swimming against the friction caused by water viscosity.
The minnows which appear when you click on the screen are actually simple little movieclips with a very simplified version of the wander behavior. The appearance of minnows will cause some of the sharks to switch into hunting mode, which adapts the wander algorithm to seek the minnows. Once the hunting instinct has been fulfilled, the shark falls back into wandering mode.

Movable Type xml template

I've been getting email about my movable type xml template for the flash interface. It's not an RSS format, just a custom format I came up with:

http://www.samuelwan.com/information/flashindex.tmpl
To download this file, right-click on the link, or command-click for Mac users, then save as target. You can't view it directly on a browser due to the XML header, so you have to save it on the hard drive and view with a text editor such as Notepad.

Hope that helps someone out there.

-Sam

Flash-based Blog: Read Me!

This entry provides background information for all the folks who are visiting from Chris MacGregor's website, Flazoom. For those who don't know the whole story, I created a Flash MX interface to the movable type weblog, available at www.samuelwan.com/mainmenu.swf. It takes advantage of the fact that you can create templates in Movable Type to generate XML feeds, such as the RSS specification. Actually, the prototype was built as a proof of concept during one afternoon, and I hadn't intended on making it publicly available until I had time to build a complete interface to Movable Type, including an XML-RPC administration panel and public comments.

The prototype you see here doesn't accomodate public comments, and I haven't done any usability testing to streamline the navigation. So, if you'd like to see the REAL website and post comments, you should visit http://www.samuelwan.com/information. In the meantime, thanks to Flazoom for the link! I'll post a notice when I build the real Movable Type interface this summer... for now, must focus on finishing graduate school.

By the way, did I mention that you can download the source code here? You can use the source code if you can't wait to play with the final build, but like I mentioned, it's really just a prototype... source code for the final, complete system should be available this summer.

If you decide to install Movable Type on your system and you find it useful, consider donating some money to its creators for maintaining free software :) Please note that I'm not involved with the movable type software, and that the Flash source code is not part of the movable type system.

Best Regards,
Sam

Flash MX HTML Tables

Render HTML Table in Flash. I posted this unfinished code for the actionscript hackers on the Flashcoders mailing list to play with. This code is not documented, and incomplete. I'm posting it because I'm too busy finishing graduate school to spend time on this table renderer, but wanted to contribute my current work to the community. No documentation is provided, use at your own risk. GPL license. Note that it reads rgb values as hex values, not as #ffffff format.

IMPORTANT: My code is loosely based on the HTML specifications for the two-pass autolayout algorithm that renders HTML tables. You can read that RFC online (I think it's RFC 1942).

Download here

Real-Time XML Visualizer

View demo
Download Source

Xilhouette 1.0 : XML Editor
Multiple real-time visualizations of the XML editing process
Copyright 2001 by Samuel Wan, All Rights Reserved.
Dept. Human Computer Interaction, School of Information, University of Michigan

Try typing in well-formed XML, or simply cut and paste a large xml document (such as the included filmfestival.xml file) into the editor, and the radial graph representation of the tree structure will adapt to the new data. Based on prior work by Graham Wills at Bell Labs.

Dial Component

View demo
Download source

Author: Samuel Wan
Language: Flash 6 ActionScript
Dependancies: none
Developed: November 2001

Purpose:
Create a Dial component for Flash 6 beta. Dials are more space efficient than sliders in some situations, and allow users to specify ranges of the dial. The Dial Component can interact with its environment, either by specifying the TargetProperty parameter, or by registering a listener with its addListener() method and onDialChange() callback.

The interaction model for this dial comes from Propellerhead's REASON software, which simulates MIDI rack hardware. Dials are turned by clicking on the dial and dragging up and down.

Personal Notes:
The objective was to build a usable component within 10 hours. I had to reverse-engineer Nigel's scrollbar, in order to learn out how to detect drop-target instances in the editing environment. However, I didn't use any of Macromedia's FUIComponent classes because I wanted to keep things simple during my first attempt.

The strategy of defining functions within objects, rather than prototypes, comes from working with Branden Hall on his Java-like implementation of inheritance and centralized event handling for Flash 5 (ACK - Actionscript Component Kit).

Range Slider Component

Download source
View demo

Purpose:
Sometimes user-input asks for a range of values, rather than a specific value. This component has two sliders which allow the user to physically define left and right bounds within a range of possible values. The component has a "Decimal Places" parameter which allows the user to specify the significant digits for the accuracy of the slider. The sliders will snap to values of corresponding significant digits along the value range. For example, choosing 2 decimal places for a component from 0 to 1 will snap sliders at intervals of 0.01, so that the sliders will snap to 100 possible positions on the bar. Choosing 1 decimal places from 0 to 1 will cause the sliders to snap to 10 possible positions along the bar. Registered listeners will receive a callback to a function named "onRangeSliderChanged" in the listener while the sliders are being dragged. For computationally expensive algorithms that can't execute fast enough for real-time movement, registered listeners can also handle a callback named "onRangeSliderReleased", which is called when the slider is released.

Personal Notes:
This component was originally finished in two hours, but I spent another 12 hours iteratively improving its look and feel to meet certain standards of usability. I hope the robustness and scientifically valid accuracy of this component will prove the worthiness of using Flash technology for complex information visualization and other data-intensive tasks. If the Flash community upholds standards of usefulness and usability, then components will gain enough popularity to push interface design to new levels of innovation. Thoughtfully built components will also provide web developers with fresh justifications to break away from the conservative principles of usability iconoclasts such as Jakob Nielsen, who threaten to stifle innovation in the field of human computer interaction on the web.

Background:
The concept of range sliders rather than single-value sliders comes from research on user-interface design for dynamic queries, by Ben Schneiderman. My advisor for the graduate course in information visualization is Professor Barbara Mirel at the U. of Michigan College of Engineering and formerly of Lucent Technologies.

Mysterons Demo

View demo
Download source

I wrote this back during the first weeks of Flash MX beta testing. Here's what I wrote in my email when I first posted this demo: "There's a description when you click on the question mark. This demonstrates the speed of lineTo and the Actionscript engine in general. Source file's included, applies multiple forces upon a self-propelled object."

Flash Forward 2002 Components Source Code

http://www.samuelwan.com/flashforward/sanfrancisco2002/

Thanks to everyone who came to the OOP and Components sessions at Flash Forward 2002! I hope you found our presentations both informative and helpful. The zip file in this directory contains all of the source code from the presentation, broken down into step-by-step versions. However, the zip file only contains one mp3 from the playlist in order to avoid posting commercial mp3's online (I wrote and produced the LaoTzueTrance track). I will soon have session notes available, either on this website, or as a more complete tutorial at Macromedia.com/desdev sometime soon. Email me if you have any questions: method@method.org, or look for me on Branden's flashcoders mailing list at chattyfig.figleaf.com.

Cheers,
-Sam