Authoring Visualizations in Flare
From CS294-10 Visualization Fa08
Lecture on Sep 17, 2008
Readings
- Flare tutorial, Heer (html)
- prefuse: A Toolkit for Interactive Information Visualization. Heer, Card & Landay. ACM CHI 2005. (pdf)
Optional Readings
- Building Highly-Coordinated Visualizations In Improvise. Chris Weaver. IEEE InfoVis 2004. (pdf)
- Software Design Patterns for Information Visualization. Heer & Agrawala. IEEE InfoVis 2006. (html)
- Past, Present, and Future of User Interface Software Tools. Myers, Hudson, & Pausch. ACM TOCHI, March 2000. (pdf)
- An Operator Interaction Framework for Visualization Systems. Chi and Riedl. In Proceedings of the Symposium on Information Visualization (InfoVis '98), pp. 63--70. IEEE Press, 1998. (pdf)
- 2D Graphics Primer (useful for those with little experience in 2D computer graphics)
Demonstrations
Razvan Carbunescu - Sep 17, 2008 11:27:14 am
Reading the first tutorial about Flare and seeing it describe all that flash brought me back to memories of writing something in Flash 5.0 (I actually don't remember if it was 4.0 or 5.0 ... but the point still stands)... and remembering how annoyed I was that while they provided such great graphical support in each frame and animation ... nobody bothered to implement ARRAYS so programming anything large was impossible!!! I don't know how things have evolved from then but I'm hoping that they fixed this glaring oversight and it was definitely interesting to see all the functionality described by the tutorial and can't wait to see how it works.
Ketrina Yim - Sep 17, 2008 05:06:14 pm
@Razvan: No arrays?! That's an enormous programming language design taboo, at least nowadays it is since practically every language has an array data structure (or at least something that works like an array, such as lists). But yes, this particular flaw has been addressed (evident from the fact that a Google search of "Actionscript arrays" yields relevant tutorials).
As for Flare, I stunned and quite pleased by its possibilities. From the sample visualizations, I could tell that Flare offers the opportunity to generate visualizations that are not only legible, but also aesthetically appealing. The Flare dependency graph was a particularly beautiful one. Indeed, gestalt psychology is right in saying that the eye prefers smooth transitions over abrupt ones. The b-splines used to connect nodes created an elegant flow from one node to another. I can imagine the same graph being much less attractive if the nodes were connected by a jumble of straight lines.
Now my question is, what would Tufte think of Flare?
Seth Horrigan - Sep 19, 2008 01:20:39 pm
I found it interesting that Heer, et al chose to detail how the various participants responded to "cut-and-paste" coding methods. I am somewhat surprised by the emphasis therein. Code reuse does indeed lead to many problems and safeguards are lost, security holes, are introduced, and misunderstood code produces side-effects. Still, building off of an existing codebase, and employing working examples is an essential practice in programming. Usually it is masochists or beginners attempt to write programs or scripts from scratch every time. Reinventing the wheel leads to wasted time and repeating past mistakes. From what I have seen of Prefuse, I am unsurprised by how easy the participants found it. There are so many half-baked programming tools out there that developers have become accustomed to pain in working with others' software, but Prefuse seems to meet its purpose by making visualizations actually easier and reducing the duplicated work. I look forward to using it myself and publicizing it among co-workers and friends.
Nicholas Kong - Sep 20, 2008 03:41:40 am
@Razvan I too just came back to Actionscript after a six or seven year delay and it's sure grown! It actually looks like a programming language now, somewhere in between Java and Javascript.
@Katrina As for what Tufte would think of Flare, I think he would concern himself only with the results of the toolkit. Although prefuse and flare seem to be built on sound data visualization models and so don't allow for much in the way of chartjunk, although a determined developer could always subvert the system. That flexibility is part of what makes prefuse and flare so useful.
@Seth I think the extended discussion of participants' distaste of "cut-and-paste" methods was partially to indicate that code reuse did occur in the user study, and also as a lightening of tone. I personally enjoyed the levity amidst the overall seriousness of an academic paper. I do agree with your points, though; no need to reinvent the wheel, as you say. While learning an API, though, I tend to review sample code and documentation in tandem, just so I can get a better feel of the underlying models and concepts.
Ljuba - Sep 20, 2008 06:37:10 pm
I've been using Flare on-and-off for the past few months. The capabilities are really impressive and the results can be made quite beautiful relatively easily. One question I'd like to find the answer to is how the force-directed or other layout algorithms handle networks without a clear pattern of hierarchy, like the image I've attached below (Full PDF Here).
This is a network diagram of data I intend to use for my final project. It models the flow of energy through the world, from natural resources to end-uses. So far, all I've done is lay it out by hand, but I'd love to throw it at Flare and see what I get. I'm hoping for far fewer edge crossings and more intelligent placement.
Also, if anyone is interested in the energy system/climate change and would like to do their final project in Flare, send me a message. I'm still looking for a partner. :)
Maxwell Pretzlav - Sep 20, 2008 10:23:12 pm
I must say I was very impressed with Flare and Jeffrey's presentation. The "ah-ha!" moment came when suddenly he went from some simply animations, to a spray of data complete with axes with almost no code. The easy with which he then animated a change to logarithmic scale really showed how well thought out Flare is (at least in the areas he decided to demonstrate). I would be really interested to hear him talk more about what he learned from making prefuse that went into Flare. The section of his paper which discussed their study of programmers using prefuse kept making me wonder how things learned then went into the design of Flare, and if the choice of platform/language also affected programmer usability and speed of learning.
Chris - Sep 21, 2008 03:18:48 am
Regarding the Flare's force simulation visualization, I'd like to see some variations on the implemented system.
With the spring setup that was showed, a simulation evolves over time with the user providing input by moving nodes around. While this does a good job of providing a way to get a physically natural layout, there are couple of issues that I noticed with this. The two which come to mind are (1) the result is very dependent on the user's transient input which may be very difficult to reproduce and (2) unconnected nodes often get bunched together and overlap (this happened in the demo).
A way to deal with issue (1) would be to solve for the system's equilibrium configuration. This configuration would have the benefits of being less dependent on transient user input (and so be more deterministic). It also may look very "natural." Regarding issue (2), if each node were to give off a force repelling all other nodes problem would also do a better job of separating unrelated nodes from each other. This would help reduce the number of equilibrium solutions (which would help in solving the statics problem by reducing the number of solutions).
Scott Murray - Sep 21, 2008 02:35:05 pm
I'm sorry I had to leave Jeff's lecture early. Did he talk about how he decided on which data types and visual structures to support in Flare? (I imagine several factors were involved: which were feasible, which would be most useful to users, and which "looked cool" for demo purposes.)
Obviously, Prefuse and Flare accelerate the time involved in creating interactive visualizations, but only if they happen to support the type of data you are working with as well as the visual form you want to output.
Dmason - Sep 22, 2008 10:54:02 am
Regarding the discussion of copying-pasting code. At some level that is precisely what you have to do, and the goal of a good programmer is to minimize this. I think flare does an excellent job of minimizing excess code.
I think these kinds of tools will prove to be invaluable to scientists. How many discoveries come from a "hmm, that's odd" moment when looking at data graphed for the first time? My advisor, for example, made his major discoveries when a research group next door couldn't explain their erroneous graphs. He found out they weren't erroneous at all and developed a new theory to account for it! By providing access to these tools to the well-educated layman, Flare is a tremendous tool to our kind.
Michael So - Sep 24, 2008 12:11:33 am
About the free flex builder licenses for university students, how do you get them? This is for the Flare tutorial about installing the Adobe Flex Builder.
In regards to the prefuse reading (the PDF), I am interested in trying it out especially after reading the usability study. It seems making visualizations is pretty fast and easy to learn. I don't really have any experience with visualization software or with visualization toolkits, so I wonder how easy it is for beginners who are already programmers. From the usability study, if 7 out 8 programmers can complete those three tasks in an hour, then my guess is that prefuse makes it pretty easy to spit out visualizations in a relatively short time frame. That sounds pretty attractive to use for the final project.
Witton Chou - Sep 24, 2008 01:22:52 am
Jeff's presentation on Flare was quite amazing. I was expecting to see a lot more coding to generate the visualizations Flare produces. Before Jeff changed the easing on the rotation of a container of circles, I was thinking it must have taken a lot of lines to animate the acceleration and deceleration of the rotation. I was in awe at how much could be done with so few lines and be so clean at the same time. It definitely allows for more focus on developing the visualization for certain data than on the details of making it look good. I am definitely looking forward to utilizing Flare.
NickDoty - Sep 24, 2008 02:07:50 am
I think I was most impressed by seeing a little of what went into the software development of Flare and how that lines up with the visualization concepts we've been discussing this semester. Passing around Transitioners is an elegant design pattern (I can have all of my animations go at my speed and style without needing dozens of parameters on every animation call). I particularly liked the idea of the ShapeEncoder and ColorEncoder classes -- these effectively abstract out many of the decisions we've been talking about in class and just let you apply Shape or Color as the visual encoding for a particular piece of data (whether it's a node or an edge).
I was a little concerned at the use of strings that represented properties on every object to be passed to an encoder -- these seem like a programmer's nightmare, something that can't be caught at compile time and would be difficult to debug when it started to cause problems at runtime.
Yuta Morimoto
Cut-and-paste coding methods sounds me like the procedure of coding in Visual Studio. From what I have seen in Jeff's presentation on Flare ,I thought it is easy for me to use it and allows me to save time in coding and focus more on design part. Although, I thought I needed to learn more coding to generate the visualizations in Flare, it seems fast and easy to make visualizations. So, I am looking forward to using it.
Matt Gedigian - Sep 24, 2008 02:18:53 pm
To reiterate what everyone has said, Jeff's demonstration was a nice introduction to Flare's capabilities. The online tutorials are also quite nice. ActionScript has matured a lot since I last played with it several years ago. With regards to the convergence of ActionScript and JavaScript which Jeff kind of alluded to, see here. I don't know what work goes in to the design and construction of these toolkits, but as end-programmers, these javascript and actionscript APIs are taking advantage of the language flexibility to deliver some very very nice features.
Sarah Van Wart - Sep 29, 2008 12:09:09 PM
I though the Flare demo was just great. Prior to this class, the primary means by which I've achieved any sort of interactive visualization has been by manipulating HTML tags using AJAX and CSS. I look forward to learning to use more graphics-centric programs for developing interactive software. Of course, Jeff Heer made everything look really easy, but given the potential to make even more useful interactive visualizations, the demo in class will make the learning curve worthwhile. I also really liked all of the visualizations that he demonstrated -- the interactive heirarchy / tree, the dependency graph, and the collision simulations, and others -- very cool and very useful.
Simon Tan - Oct 01, 2008 03:18:37 am
Of course I, too, look forward to learning and using Prefuse/Flare for our upcoming Assignment and final project. I think one of the most helpful things provided is the gallery of Flare demos and sample apps that I can see the code for (e.g. this treemap example, which I believe will be very helpful when I set out to create a treemap for the first time in Flare). Just knowing that it is possible to make a visualization much like what I need is very reassuring, and gives me confidence that I can get it done even if this is only my first time with the libraries.
I find it interesting that Processing is also mentioned here; it is currently being used in the Theory and Practice of Tangible User Interfaces course to interface with our Arduino microcontroller boards. The people behind Processing are the same ones who created the Arduino controller software and simplified programming language. (Though that was based on C.) It seems that they have a knack for taking complex programming tasks and creating an environment that allows anyone to tackle them with minimal ramp-up time. I can attest that drawing and animation with Processing is a lot easier and less verbose than with other libraries (but I have yet to fully try out Prefuse/Flare).
Calvin Ardi - Oct 07, 2008 05:18:15 am
@Michael et al: I didn't find the link posted to the wiki regarding Adobe Flex, but apparently there is an educational license available for free for students/faculty/staff. It's not on the front page, but I've linked it here (crossposted to the assignment 3 page as well).
I found the quick intro to be helpful; like with most web-based applications, I particularly like the fact that most of this development is relatively painless and I can view the resulting changes in code immediately. Like Simon, I'm looking forward to using Flare for assignment 3.
