//AMIS Technology Blog » visualization

Posts tagged visualization

image.png

ADF DVT: Analyzing Financial Position of the European Football (Soccer) Leagues using Treemap

1

We all know a lot of money is involved with professional sports. One of Europe’s major sports is football (or soccer as some like to call it). A lot of money changes in hand in football. And it seems that the results are determined primarily by the money. The major pan-European competition – the UEFA Champion’s League- is called out of reach for representatives from smaller countries – because of their lag in terms of yearly budget. And the national leagues are dominated by [clubs that have the] money.

Together with my son Tobias we decided to investigate. How much money is in the budgets for all clubs taken together in each of the major football leagues? And how is that money distributed over the clubs. Is it evenly allocated or are there wild variations? And is money a guarantee for success?

We decided to use the ADF DVT Treemap component to visualize our findings. From left to right, you see four treemaps, representing the football leagues of England, Spain, Germany and The Netherlands. The size of each treemap corresponds with the sum of all club budgets in that league. Inside the treemap, each area represents a club. The size of the area corresponds with the budget of the More >

image.png

ADF DVT: Using the Tree Map visualization component – to compare relative sizes and distributions

0

The tree map component is one of those data visualization components that can tell an entire story through a simple picture. But of course that picture is anything but simple. And it is not even just a picture: it supports various forms of interaction such as drill down and popup. I had seen the Tree Map for the first time in demonstrations by Oracle Product Management. It seemed okay, but nothing very spectacular. Now, after having tried out the component for myself as well as studying the documentation, I may have to revise my initial opinion: it is actually a pretty cool and powerful component.

The Tree Map is used to present data values in a way that makes comparison easy, using two dimensions: (relative) size and color. The TreeMap uses containers for nodes with sizes relative to the numerical value associated with the nodes. Each node can have details and the container is presented with enclosed areas for each of the details. The size of these areas is proportional again to the value associated with the child node. All areas can be colored automatically – to create a pretty picture – or can be colored according to rules we can specify in order to have the colors also convey More >

image.png

ADF DVT: Using the Timeline component to visualize the recent history of an RSS feed

0

One recurring theme in my articles on ADF has been that end users usually do not care about data. They are interested in getting information that helps them answer questions, make decisions and take actions. Data may be the foundation, but information is to be derived from the data. One way therefore to create applications that are more valuable to our end users is by preprocessing data and turning the data into information – or even into answers, proposed decisions and actions. A powerful way of turning data into information is through data visualization. By presenting data in a format that converts it to readily interpretable information, we help our users a lot. Bar charts, line graphs and other traditional charting formats are one of way visualizing data. The DVT library in ADF Faces goes far beyond traditional charts. It provides components such as the Gantt Chart, the Hierarchy Viewer, the Tree Map, Gauge and the TimeLine that help visualize data in natural, informative and attractive ways. This articles discusses the TimeLine component – introduced in ADF 11gR1 PS6 (11.1.1.7) in the Spring of 2013.

The TimeLine visualizes events against a time axis. It is as simple as that. More >

image-36.jpg

ADF DVT Speed Date : Meeting The Hierarchy Viewer

1

Recently the ADF Special Interest Group at AMIS organized an ADF DVT Speed Date. During this speed date, six ADF specialists from our team presented their favorite Data Visualization Component from the DVT library. In a series of blog posts we share the information with a broader audience. In this post you get introduced to the Hierarchy Viewer – which was my own date for this party.

Introduction : The Hierarchy Viewer

A Hierarchy viewer is typically used to display hierarchical data. Examples of this are for instance a tree of life or a mindmap or even a family tree.

The ADF hierarchy viewer consists of several ADF components.

  • dvt:hierarchyViewer : This element wraps the dvt:node and the dvt:link elements
  • dvt:node : The dvt:node element supports the use of one or more f:facet elements that display content at different zoom levels (100%, 75%, 50%, and 25%).
  • dvt:link : connects one node with another node
  • dvt:panelCard : The panel card element provides a method to dynamically switch between multiple sets of content referenced by a node element using animation by, for example, horizontally sliding the content or flipping a node over.

A hierarchy viewer component requires data More >

image.png

ADF DVT Speed Date: Adding Drag & Drop to the Resource Schedule Gantt Chart to create a live presentation scheduler

0

In a recent meeting of the AMIS ADF SIG we organized a speed date with six different DVT components (note: DVT == Data Visualization Tags, the library of rich data presentation component part of ADF). One of these components, the one that I represented during this speed date, is the Gantt Chart. This chart comes in three flavors, as I described in this article: http://technology.amis.nl/2013/02/16/adf-dvt-speed-date-meeting-the-gantt-charts/. These are the Resource Utilization Gantt Chart, the Project Gantt Chart (the archetypical Gantt Chart) and the Resource Scheduler (the most generic and flexible of the three).

In this earlier article introducing the Gantt Chart, I introduced the Resource Scheduler using the example of a Presentation Schedule that visualizes the agenda for a conference. The Resource in this case are the Rooms that holds the sessions and the chart contains bars plotted against a Room and the Time axis to represent all of the presentations:

In the article you are reading right now, I will explain how to create a Resource Schedule Gantt Chart such as the one shown here. Even more interesting, I will then explain how to add drag & drop capabilities to this chart More >

Go to Top