Tutorial on Building Self Organizing Map Heat Maps for iOS

Developing custom controls in Swift is usually required based on the application you are working on. Recently, I’ve been developing an app that I was required to show data analysis output on a Self-Organizing Map (SOM) chart. Today, I’ve decided to write this tutorial and share my experience with you.

In this tutorial you will learn about:

Before we jump into coding, let’s have a clear view of what we are going to make. An SOM chart is typically consist of a beehive shaped set of hexagons where each one of them are represented by a color. In various settings, the color might represent different meanings but the most common use of SOM charts is to show distance between units (neurons) on the 2D space. So the warmer color would mean larger distance and cooler color means less distance.

As I mentioned in the title, we are going to make the component interactive in Interface Builder so the final product would look like this:

Our first step is to create a new Swift file and create a class for the SOM Chart. As you can see, we put @IBDesignable on the component so we’re telling XCode that this component should be editable in InterafaceBuilder

Now, let’s complete the class by adding out main parameters.

Most of the parameters bellow are straight forward but I need to talk about distance matrix. The distance matrix is an array in which we show the distance of each node from the baseline (aka we define the value for the unit). Basically we can pass the output of our SOM algorithm (from Matlab, Python or anywhere else that we have it) to this array and have it visualized. If we do not set the distance matrix, the component shows a gradient of red to black color.

We need one helper function as well which help us generated an intermediate color (between min and max colors) based on the cell value.

The next step is to actually draw the hexagons on the page:

Now, our component is ready to be used on the interface builder. We can also feed it with data on runtime. Here is an example:

Happy Coding!

Related posts:

With the amount of money they bring in, music artists are basically a business in their own right. Music artist have to promote and market themselves in order to get people to buy their music. Most…

HireMatch Brings with them a better solution for the business ecosystem of hiring and recruiting people. The conventional ways of recruitment are full with inefficiency in terms with time to get the…

After a decade of learning languages, I began researching ways to improve my process. I read many books more or less related to productivity and learning. As I read, I found hidden gems I rarely saw…