In software engineering, multitier architecture (or multilayered architecture) is an architecture in which presentation, application processing and data management are physically separated.

Often you will see architectural diagrams depicting the three “tiers” as:

  • The Data Tier (where information is stored in a database or file system)
  • The Logical Tier (where processing commands are executed, logical decisions are made, and calculations may be performed)
  • The Presentation Tier (which is the “topmost” tier and is where results are transformed and presented into something the user can understand)

For illustration, let us suppose we have some data residing in multiple source systems and we want to “gather” that data and then present it in some sort of visual dashboard.

The Data Tier

In this example, the data resides in both an IBM Planning Analytics cube as well as Microsoft SQL server tables. I will not spend too much time here – just note that we have a cube defined in Planning Analytics named “Shipments” that is updated with the number of shipments for each day in the prior week and in SQL Server, there are tables named “Brands” which holds (among other things) the brand names of the products that were shipped, and a table named order_items that holds quantities (shipped).

The Logical Tier

We will use Python to build our logical tier which will connect to and query both of our named data sources and then format and make the results available to the presentation tier. To build our middle tier solution, will use PyCharm starting with a new Python project. The “script” will be pretty simple, divided into several distinct “parts”:

  • Python Package Imports
  • Function Definitions
  • Main Processing

Python Packages

In this example we are going to leverage the following Python modules:

Function Definitions

Following best practices, we will create a series of simple Python functions. The first two will handle connecting to our data sources and the next two will retrieve the data that we are interested in:

Next, we need some functions to support the presentation of the data. The first is the simplest and will simply generate an HTML page (rows_and_columns.html) from the data retrieved from planning analytics:

The next function, will be even easier; and it will simply generate a JavaScript variable definition file (pie_data.js) based upon the data:

And for our last function (similar to the one above), it will create another JavaScript variable definition file (bar_data.js):

Lastly, we need a “main” section to coordinate the use of the above functions:

The Presentation Tier

For the presentation tier, we will follow the same strategy – to do as little programming as possible – by using simple HTML pages and leveraging some open source JavaScript.

Since this example assumes that the data always “comes back” from the middle or “logical” tier in the same format, we do not have to do any programming in this tier and can just “let” the code in the HRML page present the data.

Rows and Columns

For the first visualization, we can simply open the page created by the create_rows_and_columns_html function (rows_and_columns.html) in a web browser:

The Pie Chart

Rather than just “boring” rows and columns, to present the data in a slightly nicer format, we can use D3.js, which is an open source JavaScript library for manipulating documents based on data. D3 helps you “bring data to life” using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities offered in web browsers without having to produce custom code or tying yourself to a proprietary framework, combining powerful visualization components in a data-driven approach.

What all that means is that we can simply add some <script> tags to an HTML page to specify the URLs of some external script (the D3 libraries) as well as the data generated by the create_data_for_pie_chart function and voilà!

Below is the HTML for the pie chart page:

And if we open our HTML pie chart page we see:

A Bar Chart

Again, without any presentation tier programming, lets now present the data we retrieved from SQL Server. The following shows the HTML page that presents the data in a bar chart:

Which looks like this (opened in a Web browser):

Wrap Up

Okay, first some “disclaimers”.

For example, I have not addressed security anywhere and the code assumes that all the files are in the same location (to save time, I have also referenced some of the D3 files directly from https://d3js.org). Additionally, I took the liberty of assuming what data is retrieved from the source systems, in that daily shipments are always just seven numbers (one quantity for each day of the prior week) and I have also limited the SQL Server data to seven brands. In a “real” scenario, you would have to add some additional logic to deal with any unexpected data situations. Finally, to be fair, some of the Python code would require some “cleaning up” before it could be considered productized.

What is exciting is that by using simple HTML and D3 library functions, we have done very little actual programming – all in the middle or logical tier – and have created a working multitier solution that demonstrates how an open source (Python) application can connect to backend source systems such as Planning Analytics and SQL Server and then “push” data to the presentation tier where it is displayed by standard HTML pages.