Motivation
Users of financial applications typically need to analyse large amounts of information. Concepts from visualisation research such as treemaps and heatmaps provide an innovative and intuitive way for users to view and interpret sets of financial data. Scott Logic has implemented many such solutions for its clients in the financial sector. This example demonstrates an application of these concepts to show the performance of the FTSE All Share index.
In order to provide users with the highest level of application-like interactivity and responsiveness, a plug-in based solution was the preferred technology choice, with the application being developed using Adobe Flex.
The live application is available here.
Overview
Market Map is an interactive visualisation of performance on the London stock market. It combines the treemap and heatmap concepts to provide an overview of the market so that it possible to quickly identify which companies or sectors are performing well or poorly and to gauge their impact on the market as a whole.
The treemap aspect provides the nested, rectangular layout, showing a sector/industry/company hierarchy. The size of a rectangle reflects market capitalisation: the bigger any given rectangle is, the bigger its market capitalisation, i.e. the bigger impact it has on the market as a whole. The heatmap element provides the colouring of the rectangles, with a company’s intraday stock price change determining its colour, on a spectrum from green to red.
If market prices are generally increasing than the map will be largely green, and red if the opposite is true. It is possible to quickly spot outliers as their colour will be more intense. This way, whole sectors or individual companies that are outperforming or countering the general market trend are immediately highlighted.
An alternative blue/yellow spectrum is provided, and the range of the colour spectrum used can be changed to suit user requirements, as shown in the screenshot below
As well as this high-level overview, the Market Map is fully interactive in order to support more detailed analysis. Users are able to see more detailed company information by hovering the mouse and can drill-down to individual sectors and industries by clicking, as exemplified in the screenshot below. The user is also able to control the level of hierarchical detail to show, that is, whether the performance should be averaged across a sector or industry rather than showing individual company performance. Similarly, the level of the labels displayed can also be adjusted to suit the user’s needs.
Further features include the ability to search for any particular company. This results in the company being highlighted in the map so that their place in the larger picture can easily be seen. The biggest movers can also be automatically highlighted. This results in the 5 biggest gainers and 5 biggest losers being indicated in yellow and blue respectively, as shown in the screenshot below.
The live application is available here.




