Click on image above to launch via WebStart

Drawing rectangles is pretty straightforward in JavaFX. I decided to add a little bit of animation so that the pieces of the puzzle “fall” into place. This is done by applying ParallelTransition which combines ScaleTransition, RotateTransition and TranslateTransition.

Initially, every piece was falling into place at exactly the same time. This feels a little bit unnatural. I varied the duration a little so that some spin into place, while others move into place, and the effect was just right. By setting the TranslateTransition{ toX:1.0 toY:1.0 } and RotateTransition{toAngle:0.0}, and randomizing the fromX, fromY and fromAngle values, we end up with a natural movement that ends up in the precomputed positions.

Here is the code snippet.

    public function animate():Void
    {
        for (area in node.content)
        {
            ParallelTransition {
                node: area
                content: [
                    ScaleTransition  { interpolate:Interpolator.LINEAR duration:1.8s*(0.5+rnd.nextDouble()) fromX:rnd.nextDouble()*2+0.5 fromY:rnd.nextDouble()*2+0.5 toX:1 toY:1 },
                    RotateTransition { interpolate:Interpolator.LINEAR duration: 1.8s*(0.5+rnd.nextDouble()) fromAngle:2*(rnd.nextInt(500)-200) toAngle:0 },
                    TranslateTransition { duration: 1.3s*(0.5+rnd.nextDouble()) fromX:rnd.nextInt(105)-50 toX:0 },
                ]
            }.play();
        }
    }

Hover over the boxes to find out which bank lost how much money. My question is (with apologies to Pete Seeger):

  Where have all the ratings agencies gone?
  Long time passing
  Where have all the ratings agencies gone?
  Long time ago
  Where have all the ratings agencies gone?
  Banks trust them every time
  When will they ever learn?
  When will they ever learn?

Acknowledgements:
Squarified Treemaps
Bruls, Huizing, Wijk
Eidhoven University of Technology

Bloomberg.com