ADF DVT: Sunburst to quickly inspect the hierarchical composition

The recent JDeveloper/ADF 11gR1 Patch Set 6 release introduced the Sunburst component, one of the many data visualization components in ADF. Sunburst (sometimes called Rings Chart) provides an attractive and useful way to quickly learn about the hierarchical build of certain values. One well known example is the space usage on a storage device, such as on the Gnome desktop on Linux – see on the right.

The left side of the figure shows the directories on the file system and their relative and absolute size. The rings chart or sunburst makes it abundantly clear which directories contain the most data and which subdirectories inside are the big ones.

The ADF DVT Sunburst component allows us to create a similar representation of the build up of a values from their constituents and their constituents. A simple and not very exciting example is presented in this article: the salary distribution in table EMP – per department (level 1) and per employee (level 2). We will also compare this presentation as sunburst with the counterpart presentation using Treemap. The two are quite similar and can be used in similar circumstances, depending on whether the focus of using the data visualization is on comparing the components – which fits in with Treemap – or on inspecting the composition of a many-layer hierarchy – which Sunburst can handle much better.

The result of the steps described in this article:

In this article, I will demonstrate the simplest, frankly most boring and probably easiest sunburst I can create: one that demonstrates the relative salaries in the well known departments in table EMP. A data bound sunburst uses one or more ViewObject usages. When multiple usages are bound in the sunburst – as you almost always will want to do because otherwise the sunburst is just a pie chart – then these usages need to be nested.

Model

The Model project in my example is a plain old ADF BC project that uses a JDBC connection to the SCOTT schema. It contains two read only ViewObjects that have been linked using a ViewLink. The first ViewObject returns the identifier, name and sum as well as average salary of the departments:

The second ViewObject just returns names and salaries of the employees along with their deptno:

The ViewLink that links these ViewObjects is based on the join on deptno.

The Data Model in the Application Module is defined as follows:

The Data Control has the same structure of course:

ViewController project

With this Data Control available, it is dead easy to create the Sunburst that will provide all this insight in the relative salaries in our departments.

Create JSF page SalarySunburst.jsf.

Drag the DepartmentMasters1 collection from the Data Control palette to the new page. Drop it as Sunburst:

The Sunburst editor appears, with the collection preselected:

Select the value: the attribute that determines the relative size of the top level ring-segment in the sunburst; this is the sum of the salaries in the department. The Label is the header shown for the top level consegments; it is set to the name of the department.

Next, select the detail collection DepartmentDetails – to configure the second level of ring segments. This level represents the individual employees and their salaries through segments within the department level ring segments. Select the salary as the attribute providing the value to determine the segment size and set the label to ename. Then define a grouping rule to specify that the employee level areas should be colored based on Job.

Press OK to complete the sunburst.

In order to make it possible for the end user to collapse and expand segments, we have to enable drilling on each node (each level) in the sunburst. Select the node, then in the Advanced section of the property inspector, set binding to insert or insertAndReplacse.

Next, run the page. The sunburst page comes up, displaying the following visualization:

We can collapse (and re-expand) segments:

Compare to Treemap

As was mentioned before, Sunburst and Treemap are somewhat similar. Both visualize the hierarchical build up or composition of certain numerical values. We can present the Salary distribution in table EMP using a Treemap as follows:

The treemap allows for easier comparisons – for example to find out the relative size of the employee incomes. With more than two or three levels, the Treemap will not be very useful for a one view overview. This is demonstrated by the following comparison between sunburst and treemap:

Resources

Download JDeveloper 12c (12.1.2) application: SalarySunburst.

ADF documentation on Sunburst: http://docs.oracle.com/middleware/1212/adf/ADFUI/dv_treemap.htm#BEHHCGAI.