Tokyo Stock Exchange Dashboard

Visual analytics for stock market data

by Alexander Safonov


Efficient data visualization is important in split-second decision making processes which are characteristic for financial industry. More information decision taker can grasp from looking at the screens during hectic trading hours more effective his consequent actions will be.

Traditional grids are most popular visualization tool in financial applications. While having many useful properties they are not very effective then it comes to analysis of big data sets. Apart from sorting grids don't show relationship between multiple items in the set, instead focusing on properties of single item.

Unlike grids Treemaps display big sets of data in compact graphical format, making it easy to visually identify patterns and exceptions in underlying information. Purpose of "TSE Dashboard" project is to demonstrate Treemap application towards financial applications UI using real-life stock market data from Tokyo Stock Exchange.


I designed custom real-time, animated Treemap based on my own space partitioning algorithm. In past I made several C++ versions of it for my clients. Those Win32 API based implementations were extremely optimized for perfomance and memory footprint.

This time I decided to make Java version to refresh my Swing skills and to take advantage of Java WebStart technology allowing to run application from the web pages. I was pleasantly surprised with end result - Java's Graphics2D painting API utilizes hardware acceleration and is very fast, faster then Windows GDI ! Finished component performs well even on the below average hardware. Accelerated graphics allowed to introduce smooth animated transitions during map navigation, which add a lot of friendly visual appeal.

Stock market data is loaded by running several parallel HTTP queries against Tokyo Stock Exchange web site. Each query is responsible for it's own segment of full stock ticker range. Queries are running in the loop, approximating real-time data feed. Resulting update frequency during market hours is pretty good for use with real-time UI view.


"TSE Dashboard" program shows all stocks traded on Tokyo Stock Exchange as rectangles grouped by industry sector. Size of rectangle is proportional to intraday traded value for this stock. Rectangles are color coded with RED corresponding to negative price change since last close price and GREEN for positive. Brightness of rectangle shows magnitude of the price change. If price change is zero then rectangle displayed in black color.Rectangles appear in descending sorted order from top left corner to bottom right.

Depending on it's size rectangle will contain as much text as possible with information about stock. It will attempt to show stock ticker, stock name, last traded price, price change from previous close, traded value (shown in 100,000,000 millions of yens). It is always possible to magnify small rectangle and see more text by selecting it with mouse click

Looking at the map it is possible to find quick answers to following:

  • biggest sectors for the day (by looking at relative sizes of the groups);
  • biggest stocks within each sector (by looking at left top corner of each sector;
  • overall sector perfomance (by looking at dominating color of group);
  • biggest gainers and losers for the day (by looking at brightest spots at the map);
Treemap makes it possible to identify many other patterns and exceptions by looking at it during the day, ultimately helping understanding market dynamics.


Java(tm) version 5 or newer required in order to run application. Clicking on the will start application loading process from web. This is not commercial software, and I use developer's certificate. Java Webstart will ask to accept it and grant all run-time permissions to program. "TSE Dashboard" opens connection to Tokyo Stock Exchange website but it is not possible to specify application needs on this level of granularity in WebStart manifest yet. So if you want to try "TSE Dashboard" you will have to accept my certificate and grant all permissions to the application.

Once application starts data will start to flow in and populate TreeMap. While initial stock images are loaded it will flash and change rapidly, stabilizing in few seconds.

Mouse can be used to navigate Treemap. Clicking once on the stock rectangle will make it selected. Application magnifies selected rectangle and centers it in the view. To go back to initial Treemap position just unselect selected stock by clicking on it again.

Dragging mouse with left button pressed will change position of Treemap.

Search bar at the top can be used to locate particular stock. Input ticker or beginning of the stock name and press "Enter". If you clean search box and press enter Treemap will return to initial position.

If you would like to implement Treemap views or any other cool real-time visualisations of your enterprise data in your company's applications in C++, Java or C# - please don't hesitate to contact me for consulting services. If necessary I can take care of infrastructure development to enable capture, transformation and distribution of data. I also will be happy to help you with any other projects related to real-time distributed event-driven software systems !

Return to Alexander Safonov's home page