current page

history

user

Tutorial on Oct 19, 2010.

Tutorial by Vadim Ogievetsky.

Materials

For anyone interested in the simple project that was developed during class complete with an MXML example you can now get it here: Tutorial (zip), Slides (pptx).

Preparation

If you would like to follow the programming tutorial on your own laptop, please install Flex Builder and download the Flare visualization libraries before the tutorial. A set of sample Flex applications will be also posted before the tutorial.

  • Install Adobe Flash Builder 4

    • Flash Builder is a development environment for Action Script/Flex applications, and is based on the Eclipse IDE. You have the option to install Flash Builder as a separate program or as an Eclipse plug-in. Either option is okay although the sperate program is easier to install and more robust.
  • Download Flare Libraries

    • Inspired by Prefuse, Flare is an Action Script library for creating visualization for Adobe Flash Player. The tutorial is aimed at familiarizing you with some of the packages in Flare.

  • Download sample project

    • Please download the project file if you wish to follow along on your laptop. We will go through the four example applications contained in this Flex project.

License for Flash Builder

You may also wish to apply for the (free) education license in order to continue using Flash Builder after the trial period.

You will need to a proof of enrollment which can be downloaded from Axess by visiting the "Student Center" and clicking on "Request Enrollment Certification".

Readings

  • Required

  • Optional

    • Software Design Patterns for Information Visualization. Heer & Agrawala. IEEE InfoVis 2006. (pdf)

    • Building Highly-Coordinated Visualizations In Improvise. Chris Weaver. IEEE InfoVis 2004. (pdf)

    • ActionScript Reference

Comments

amirg wrote:

Thinking back on the Protovis paper now after having seen the two tutorials, I think it would be interesting to seem some sort of evaluation for the interactive component of Protovis. It seems that Flare and Processing, which gets compared to Protovis in the reading, are designed to be richly interactive, and Protovis is designed to enable concise data specifications for visualzation, though it is adding interactive features like animation. Anyways, I think the Flash/Flare tutorial really highlighted the exciting potential for interactivity in applications.

Also, I know Vadim briefly touched on this near the beginning of the tutorial, but I am very curious what others think about the future of Flash, particularly with HTML5 coming and the lack of Flash support from Apple.

yanzhudu wrote:

Protovis and Flare are nice GUI layer library. They are good at creating interactive graphics. However, for complex data visualization, we need to manipulate/query the data. With .NET, we have LINQ for data query and manipulation. Is there any library for data query for Javascript or Flash?

trcarden wrote:

I think i like the flash/flare system better than protovis for rich animations. It gets a much nicer animation faster than in javascript. In this class where we have limited time it might make sense just to have people learn flash/flare for better quality results.

trcarden wrote:

Whoops double post! I'll just write this instead because i can't erase... lalalala

gdavo wrote:

I would be nice if the sample project to download "if you wish to follow along on your laptop" was actually the one you used for the demo -- Just sayin' ;) -- On a more serious note I think Protovis and Flare are both very powerful, but even though you tried to push us to use Protovis, I think Flare is more adapted for an interactive visualization. Protovis gives you almost total control on what you want to display, whereas as it is claimed in the prefuse paper, Prefuse/Flare is very powerful for interactive information visualization.

acravens wrote:

I am curious about the potential for integrating the data-level control given by Protovis with the does-lots-of-the-work-for-you support for animation and interaction provided in Flare/Flash. Certain things Vadim said in both tutorials seemed to hint there might be a way to do this, but I'm not sure how one would go about it or if the difficulties of doing so would outweigh the benefits?

msavva wrote:

@amaeda10: That certainly sounds like a very Tuftesque argument and definitely prescribes the right approach for designing visualizations. I was thinking very much the same so I was looking into effective ways for a quick introduction to Javascript. One resource that I would highly suggest is Douglas Crockford's: "JavaScript: the good parts" which is a very concise primer into proper usage paradigms for the language. Another more comprehensive book which is probably fit as a reference is "JavaScript: the definitive guide".

jbastien wrote:

@yanzhudu for any significant dataset you probably don't want to do these queries on the client side: that means transferring a huge amount of data and processing it client-side. I'm not saying there should be zero processing in JS, I'm just saying you probably want something fairly limited.

rakasaka wrote:

I don't think the demise of Flash and the use of animations suggests we should discard prefuse in favor of Protovis. The type of interactivity afforded by Flare/prefuse is amazingly powerful, in my opinion, in giving the user a sense of control over the data they view. JavaScripts idiosyncrasies can be enough to make anyone go mad, and I'm looking forward to using Flare at least for this assignment.

amaeda10 wrote:

I had a chat with Vadim after the class, and I would like to make a comment about using animations for data visualization based on that conversation.

Although Flash can enable us to create beautiful animations, often animations are not necessary, or sometimes even distracting. If we are going to choose a language for data visualization, we have to think of the goal of the visualization, and have to consider whether using the animation is appropriate or not. It is very tempting to use the power we have, but it might have drawbacks in many ways (e.g. more bugs, more development cost, distraction, slow down the performance).

I remember somebody said the following: "We can call the design is finished, not when there is nothing to add, but when there is nothing to remove".

I go with Protovis because animation is not the essential part of my work, and I simply want to learn javascript.

mattbush wrote:

I'm drawn to Flex/Flare because of its integration with Eclipse, but I'm drawn to protovis because it seems much more down-to-earth and easier to learn, with fewer overall components going into a successful application.

I think animations are a great, and sometimes necessary, feature of info visualization. Consider the zipdecode tool - the animations are the only reasonable way to quickly convey how a map is being changed (via pan and zoom) as you narrow down the ZIP codes based on

wulabs wrote:

Several folks mentioned animations. I agree that animations are mostly unnecessary for infoviz. Unless the vizualization is showing movement of information over time, animation detracts from the main point and can also be more of a pain to deal with during the implementation phase.

It is interesting to see what new visualization tools and frameworks will arise with HTML5. As computers are becoming faster the use of Javascript based frameworks will decline as will Flash/Flare (eventually) which will be phased out by HTML5.

ericruth wrote:

Vadim mentioned in class today that there is a beta version of Protovis that incorporates some built in animation similar to that of Flare. I'd be curious to hear how comparable the two animation toolkits are and how stable the Protovis version with animation is. Also, does anyone know of good examples of animated Protovis visualizations that we could use as guidance if we decide to go that route?

mariasan wrote:

I've been really psyched to learn Protovis for this class, I've seen a lot of cool visualizations come out of it, and before the Flare tutorial I had decided that I was using Prototvis for assignment 3. But now, I'm not sure. Sure, the ease of how to make animations in Flare is alluring, but I think what was more compelling to me is how easy it is to build the UI. I'm still on the fence, battling the "probably faster for me to get up to speed with so that I can focus on the visual aspects instead of code syntax" of Flare, vs "the benefit of learning a programming language that is not dying, and therefor having more long-term gain" of Protovis...

anomikos wrote:

Regarding the ability to do animations with Flare. I believe that javascript has enough capabilities built-in to handle animations. There are many UI-libraries for general web development that take advantage of that like jquery-UI or YUI etc. It mainly resolves around a timeout that renders the new picture. Vadim mentioned that there is a performance overhead, which is true, but the truth is that the new javascript engine in Google Chrome is pretty fast. That combined with the fact that javascript is a much easier language to work on makes the choice for assignment 3 pretty clear.

iofir wrote:

I'm also still "on the fence". I think that I'll probably end up deciding with my partner what visualization fits the the data best and if that does not involve animation we will have to decide if we want to work with protovis and learn javaScript or work with Flare and learn Flash. I personally think that I'll learn more from JavaScript which will become more useful in the future. I'm also interested in mobile app development and while only a handful of phones support Flash, webOS (palm) runs almost exclusively on JavaScript and Html 5.

btw, I'm still looking for a partner. I have a few ideas for visualizations but I'm open to new ideas. If you're interested, let me know soon.

mariasan wrote:

Bla, double post - sorry.

adh15 wrote:

As Vad mentioned, another reason to use Protovis is for its compatibility with iOS and other mobile operating systems. Maybe certain interactive visualizations that work well with a precise cursor (a dense tree map) won't work as well with a touch screen. These questions are important as long as mobile flash support is weak, since the iPad and other tablets seem to be great tools for communicating visually in situations where using a laptop is difficult (e.g. a meeting at a coffee shop).

abhatta1 wrote:

Flash is gradually taking a backseat as far as animations are concerned although most stuffs on the internet still use flash.I personally feel after having used Javascript/Protovis and Flare, that with evolving HTML and browser compatibility, Javascript might be the way to go for the future.

ankitak wrote:

Adding to the discussion about Protovis v/s Flare, I feel that the following are the most distinctive features of each: Protovis - Is excellent when we are interested in browser based rendering across browsers and platforms without additional softwares. Moreover, the way it is implemented allows us to use other javascript libraries thus increasing the power in the hands of programmer tremendously! Flare - a clear pick when we need animation in our visualization. moreover, its integration with eclipse helps in simplifying the application development process.

Thus, it might not be a question of which platform is better, rather which is a better pick for our particular application. Of course, it would have been great if there as some platform which combined both the benefits - or at least if protovis supported animation!

esegel wrote:

Flare seems fantastic and more "plug and play" than ProtoVis. In particular, the built-in capacity to demonstrate highly animated network graph exploration is mesmerizing. This is surely a feature I want to take advantage of. It's unfortunate if it really is being phased out by Apple.

Right now, I'm attracted to Flare rather than ProtoVis because: (1) ActionScript is similar to Java (which I already know) (2) Use of Eclipse-like environment (3) Large libraries of examples to use as a jumping off point (4) Animations (5) GUI tool (that looked very easy, similar to VB in Excel tools) (6) Capacity to handle network graphs.

Are these good reasons?

hyatt4 wrote:

One of the most interesting things I found in the 'prefuse' paper was at the end when it discussed the usability testing. I liked the observation that the majority of those being studied did not use the documented API when they started, until later into the study because they, "preferred working directly with the code." I feel like I would go to the API myself if it was in an HTML friendly format, otherwise I would code to the source code too (especially if it was easily accessible). I found it interesting that most people were embarrassed about copying and pasting code from the examples. I thought that would be standard practice whenever you start off learning a new language or tool.

saahmad wrote:

I personally really like ProtoVis - mostly because I love Javascript and hate Actionscript/Flex development with a passion. Flex's MXML is decent but I always found it to be more bloated than good old HTML/CSS. Also, for people wondering about good animations with Javascript, you can get really awesome results with many JS libraries out there (jQuery especially).

As a side note: for anyone looking for a decent charting library for Cocoa (Mac OS X, iPhone) I have used CorePlot before and it is pretty decent - http://code.google.com/p/core-plot/.

emrosenf wrote:

As a side note, I just came across this: Edward Tufte's notes on the windows phone 7 interface Tufte

emrosenf wrote:

As a side note, I just came across this: Tufte on WPS7

emrosenf wrote:

As a side note, I just came across this Tufte on WPS7

arievans wrote:

I found both frameworks to be pretty compelling, but ProtoVis is the way that I am going to go on this one. As many have stated previously, Flash has several limitations, but the one I am most afraid of is its incompatibility with iOS. I can online imagine that Apple's newer products will continue to push that platform, in which case you are severely limiting your potential user base by using Flash. Plus I got some experience with Javascript and the ExtJS framework in the past year and enjoyed JS, despite its often times difficult-to-debug setup.

Regarding the reading, I found the findings to be quite opposite to my main mode of working, for example the fact that people actually were embarrassed by copy and pasting code out of the included code for examples. When I was first learning Javascript, I lived by example. And I still largely live by example. In fact, this brings me to a much broader complaint I have with APIs in general--that is, I think that APIs sometimes are very limited if they do not have examples. Though documentation can be clear, it is most often the case that an example can really illucidate how the programmers intended for the class/method/property/etc to function within the greater framework. I am a strong proponent of pushing for a dependence on including examples in documentation, and users should be more than encouraged to copy and paste code.

Taking that idea a step further, I think that IDEs should also provide examples of how to use a method if the user requests one. So for example, if the way that I use a method is typically to include a standard 3 lines of code, then why can't I just copy the example code and modify it to my liking? It is actually based on this line of thinking that I was so impressed by Vadim's scripts that he had for Protovis. I need to learn how to use those!

andreaz wrote:

I am also on the fence about which visualization framework to go with. At this point, I'm leaning towards Flare because of the animation support and the positive feedback from the user testing in the Prefuse paper. Concerning the paper, the user testing was really interesting and it's reassuring that the consensus was that Prefuse was easy to learn. I was surprised about how so many of the participants felt ashamed about copying code; hacking away at existing code is the best way for me to get acquainted with a new framework, and I never thought it was a shameful way to learn something.

I may change my mind about going with Flare, though, if the animations on the new version of Protovis are pretty easy to implement. Steve Jobs' crusade to kill Flash has gotten to me somewhat, though, and being able to learn a framework that works on iOS is a huge selling point for Protovis to me.

emrosenf wrote:

I'm going with Protovis over Flare. Here are my reasons

1) I'm not confident that Flash will be around in 5 years. Seriously. Meanwhile, javascript is having a renaissance period. Pretty soon you will see javascript everywhere (you're starting to see it on the backend now). Tons of good work is being done on optimizing javascript.

2) Eclipse is a terrible IDE. Launching it is a considerable blow to system resources. And I've played with Flex builder before. Nothing ever works properly with Eclipse and Flex the first time.

3) Actionscript is more verbose than javascript.

4) If you are familiar with jQuery, protovis will be a lot more extensible

5) I doubt if the animations, while spell-binding for sure, actually aid the viewer's understanding in any way

jsnation wrote:

@arievans I definitely also find examples to be by far the most helpful way to learn how to do something in a new language. I might be embarrassed to just copy paste code from an example, but that is never what happens for me. The example is often used as a tool for learning how to do something - so by the time I am finished playing around with it and I have what I want, the code is most likely barely recognizable as being derived from the initial example, and I have learned a lot from that process.

From the paper on Prefuse, that tool kit looks really nice (as does the derivative Flare toolkit), but I wonder how much worth some of those animation features add. From what I saw of Flare, many of the demoed animation features looked cool, but actually detracted from my understanding of the visualization, or just distracted me from the data. I think animation can be very useful, especially if it is closely tied in with either changing data, or with user interactivity like if you hoover the mouse over a line and more information is given. But animation just for the sake of looking flashy, like transforming bars into lines, just seems like it is not very valuable for a visualization. I found one of the nicest sounding features of Prefuse to be the 'Integrated Search' features that allow you to easily obtain smaller focus sets that you can then immediately graph using query strings. While less flashy than the animation capabilities, I think this feature would be much more useful for many types of interactive visualizations.

arievans wrote:

I found both frameworks to be pretty compelling, but ProtoVis is the way that I am going to go on this one. As many have stated previously, Flash has several limitations, but the one I am most afraid of is its incompatibility with iOS. I can online imagine that Apple's newer products will continue to push that platform, in which case you are severely limiting your potential user base by using Flash. Plus I got some experience with Javascript and the ExtJS framework in the past year and enjoyed JS, despite its often times difficult-to-debug setup.

Regarding the reading, I found the findings to be quite opposite to my main mode of working, for example the fact that people actually were embarrassed by copy and pasting code out of the included code for examples. When I was first learning Javascript, I lived by example. And I still largely live by example. In fact, this brings me to a much broader complaint I have with APIs in general--that is, I think that APIs sometimes are very limited if they do not have examples. Though documentation can be clear, it is most often the case that an example can really illucidate how the programmers intended for the class/method/property/etc to function within the greater framework. I am a strong proponent of pushing for a dependence on including examples in documentation, and users should be more than encouraged to copy and paste code.

Taking that idea a step further, I think that IDEs should also provide examples of how to use a method if the user requests one. So for example, if the way that I use a method is typically to include a standard 3 lines of code, then why can't I just copy the example code and modify it to my liking? It is actually based on this line of thinking that I was so impressed by Vadim's scripts that he had for Protovis. I need to learn how to use those!

nchen11 wrote:

@emrosenf "Eclipse is a terrible IDE." Surely you've never done development coding in Java. :P

For visualizations with animation, I believe that Flare is the noticeably better choice. The animations are smooth and appear to be easy to implement, which is advantageous compared to javascript's slowness and processing overhead for multiple frame changes.

For non-graphically intense animations, tool choice is more just user preference, me thinks. For example, familiarity with either javascript or actionscript will probably bias the user towards one tool over the other.

Whether or not a visualization actually needs animation (and to what degree) is a separate consideration, which should naturally be determined BEFORE choosing an implementation toolkit.

gneokleo wrote:

I really liked the flare animation and i think that's the most compelling feature to use flare. For project 3 me partner and I decided to use protovis instead because we wanted to have a little bit more control since there's some things that flare doesn't support for what we want to do. The environment for coding in flare/action script is definitely easier than the declarative way of programming in protovis.

heddle wrote:

First off, sorry this is late. Second, YES! Finally, my Flex work programming skills will be useful in the real world :) So Tuesdays readings were great, very straightforward and informative. I'm not sure what kind of opinion I can have on a tutorial and a paper about the prefuse toolkit. I think they made very logical decisions when designing the toolkit; I think that the discussion lacked emphasis on the filtering abilities of the toolkit and focused too much on animation. I like the way they grouped the visual elements into logical items (edgeItem, nodeItem) so that users could easily control their own data. The tree structure is a very conceptually logical way to understand lots of different types of data.

My take on animation is this (since apparently an opinion on animation is necessary). Who cares if it's useful or not...it's pretty! I realize that my opinion completely lacks data or any real substance to back it up. To be honest, though, I would rather play with a data visualization that I don't understand but that moves around in pretty ways than look at something that makes a lot of sense but is super boring. But hey, maybe that's just me.

msewak wrote:

The flash toolkit looks intuitive and it seems to have an easier learning curve than protovis. Thanks for the awesome tutorial vad, I like how you can do so much with the flash toolkit

sholbert wrote:

After reading about Flare and Protovis and playing with both, here are the trade-offs I've noticed.

Protovis: +easy to get started with +easier to quickly start customizing features -Doesn't run on < IE9 because of SVG incompatibility -Few facilities for interaction/animation

Prefuse Flare toolkit: +More support for interaction and animation +Great starting templates for certain visualizations +Supports abstract data filtering -More computational overhead -More difficult to customize features under the hood, greater learning overhead -doesn't run on iPhone, iPad

asindhu wrote:

I just wanted to mention that animation and interaction aren't necessarily the same thing. While Flash/Flare has great support for cool animation techniques that Protovis might not have, Protovis does have some good support for interactive visualizations.

At first, I had almost made up my mind to go with Flare but then looked through the Protovis examples page at http://vis.stanford.edu/protovis/ex/ and found that the interactive examples are really quite compelling. The effects may not be as elaborate and slick as in Flare, but I think anyone new to designing visualizations may tend to overdo animations just because they can, so it might be a good think to work with the toolkit that doesn't have as much built-in support for animation.

nikil wrote:

Flare is awesome but very difficult to use since there are barely any examples of working projects and certain tasks are very difficult to figure out how to do consequentially. I enjoyed the output of the toolkit but trying to figure out how to use it was another matter!

Leave a comment