Geekly Articles each Day
📜 ⬆️ ⬇️

How to create a 3D analytics application for iPhone?



There are many trends and directions in data analysis, and we are all familiar with the popular words Business Intelligence, Big Data, Machine Learning, etc. These words are familiar now even to those who do not know how to write a SQL query, are not familiar with the rules of visualization and display of information, and even more so will not be able to write a Python script. But we always have an unshakable desire in us, the realization of the dream of any manager and / or even a data analyst: “press a key” and after milliseconds we already get an answer to the question “What to do?”

One of the most basic problems in data analysis is the involvement of a person into this process - the person making the decision. He has little time, or even critically little time. How to involve him in the process of a large data analysis machine?

The key to quick data understanding is visualization.
')
The main postulate that is promoted in the use of IDVP software is “gamification”. Even the most busy and important person finds time on the plane or between meetings to play “2048” or “Tanks”.

But creating a game is always a long and complicated process.

To destroy this stereotype, we came up with a method that will allow the analyst to create a “Data Game” for his manager in a couple of hours.

Small experiment


On the eve of an important event - the Election of the President of the Russian Federation on March 18, 2018, we decided that it would be nice to try such a trick with the data on the voting results.
After analyzing the information on the Internet, we found the official source of data on voting - the website of the Central Election Commission (CEC) izbirkom.ru . On this site you can find the results of all elections held. Also not so long ago, we stumbled upon an article on Habré, which analyzed data on the distribution of votes in the country before the elections of deputies of the State Duma of the Federal Assembly of the Russian Federation, which took place on September 18, 2016.

First, we found the data of the results of the election of the President of the Russian Federation for 2012, the preliminary results of the voting are also there. Through long calls and communication with the CEC support service, we managed to find out that during the counting of votes across the country, this tab is periodically updated in order to promptly inform voters about the progress of work.

Here is the table with the results of the election of the President of the Russian Federation in 2012.



To visualize the indicators, we used the IDVP.Cartogram tool. This is a service that allows you to display data on an interactive 3D Map of Russia. An example of an application for iOS devices, in which some socio-economic indicators are displayed, is available for download in the AppStore. It looks like this:



To build such an application you need to go through several steps:


Next, I will describe these steps in more detail, but so that they become clear, I will immerse you in the general terminology of the application IDVP.Cartogram.

Internals IDVP.Cartogram


iDVP is a platform that allows you to create and manage the further life cycle of data visualization applications. Visualization can be different, from interactive reports on the web, to desktop or iOS applications with 3D graphics, the latter is the IDVP.Cartogram. IDVP applications work on the principle of a web browser. Any web browser contains an engine that loads resources from the server (html, js, css, etc.), data, and forms a graphical user interface using standard visual elements such as a picture, a button, text, a table, and others. Similar to the browser, the iDVP client application includes a visualization engine (it is called iDVP Player) and sets of visual components (in this case, a 3D map and binding).

All application logic and user interface configuration is described using templates that the iDVP engine loads from the server. By analogy with html, the template is an xml document (remotely similar to xaml), which in addition to the interface description contains data binding logic and event handlers for user actions. The iDVP client application visualization layer is implemented using the Unity game engine, thanks to which you can connect 3D components for data visualization.

The application receives data from the iDVP.Data module, which acts simultaneously as a Data Integrator, an ETL tool and a tool for creating web services that return data in JSON format. You can connect Excel and CSV files to the iDVP.Data module, as well as separate databases and REST / SOAP services.

The interaction of individual components in the application "Elections 2018":



Steps for creating the Election 2018 application in iDVP.Cartogram:


Step 1. We will load three Excel files into IDVP.Data, which we previously received from the CEC website (in the figure these are 3 blue circles):




To connect the source, it was enough to drag the desired file into the window:




Step 2. For the visualization that we need, the following services will be needed:



For data transformation, we create entities called DataSet (datasets). Creating a chain of such entities, we can transform the source data to the format we need, as well as conduct analytical calculations using SQL scripts.

So that the error did not accidentally creep into the data, we created a dataset for each data source and coerced all types of fields there.

An example script in the main “election_information_raw”:

with elect as ( select k.*, s.region_code as region_code from ( select CONCAT(project, type, id) as widget_id, project, RTRIM(widget_name, ', %') as widget_name, region_name, dense_rank() over (order by region_name) as region_id, max(param_1) as param_1, max(param_2) as param_2 from ( select CASE WHEN id < 10 THEN CONCAT('0',id) ELSE CAST(id as VARCHAR) END as id, `row` as widget_name, `column` as region_name, CASE WHEN STRPOS(`row`, ', %') > 0 THEN CAST(RTRIM(`value`, '%') as FLOAT) ELSE CAST(`value` as FLOAT) END as param_1, CASE WHEN id > 18 THEN 1 ELSE 2 END as project, CASE WHEN id > 18 THEN '01' ELSE '02' END as type, CASE WHEN STRPOS(`row`, ', %') > 0 THEN CAST(RTRIM(`value`, '%') as FLOAT) ELSE CAST(null as FLOAT) END as param_2 from election_service_ds_raw ) group by id, type, RTRIM(widget_name, ', %'), project, region_name order by project, widget_id ) k left outer join election_service_regions_raw s on k.region_id=s.region_id ) select CAST(a.region_name as VARCHAR) as region_name_table, CAST(a.region_code as VARCHAR) as region_code, CAST(a.project as VARCHAR) as project, CAST(a.param_1 as INTEGER) as param_1, CAST(a.param_2 as VARCHAR) as param_2, a.widget_id, CAST(a.widget_name as VARCHAR) as widget_name, CAST(s.param_1_name as VARCHAR) as param_1_name, CAST(s.param_2_name as VARCHAR) as param_2_name from elect a left outer join election_service_widgets_raw s on CAST(SUBSTR(a.widget_id,4) as INTEGER) = CAST (s.widget_id as INTEGER) order by project, widget_id

The query results are the following:



Step 3. Creating a web service (or, as we call them, showcases) is also an SQL query, which in the select section contains output parameters, and in the where section, the input parameters are declared.



After we connected the data, the matter remained for small.

Step 4. We have declined the application project “Cartogram”, calling it “Election 2018 online”. Next, unloading locally templates adapted them to new windows. We connected visual components to new data services and checked that everything works.

Here is an example of a top panel template, a switch between results and performance:

 <Response> <Widget WidgetType="Widget" Name="header" BindingSide="Client"> <Declare Name="Mode" Value="[define('Mode', '1')]" /> <Params> <Param Key="Mode"> <Bind Name="Value" Value="[Mode]"/> </Param> </Params> <DataSource Name="domains" Address="" Code="election_projects_view/execute" DisableCache="true"> <Bind Name="Address" Value="[IdvpDataUrl]"/> </DataSource> <!--<Debugger Message="[Mode]"/>--> <StackPanelControl Orientation="Vertical"> <StackPanelControl Orientation="Horizontal"> <ImageControl IsColored="true" Stretch="false"> <Transform> <Bind Name="Width" Value="[13.5 * 16 / 9 / GetWindowAspect()]"/> </Transform> <ImageColorARGB A="255" R="255" G="253" B="254"/> <ImageControl Src="header_left" Stretch="false"> <Transform Depth="50" DepthAlignment="Front"/> </ImageControl> </ImageControl> <NineRectControl Skin="default" UseColorARGB="true" Stretch="true" Width="800" Height="50" Untouchable="true"> <ColorARGB A="255" R="255" G="253" B="254"/> <Transform> <Bind Name="Width" Value="[100 - 25.5 * 16 / 9 / GetWindowAspect()]"/> </Transform> <StackPanelControl Orientation="Horizontal"> <PanelControl> <Transform Width="50%"/> <ButtonControl Skin="invisible" Stretch="true" Width="50" Height="50" UseColorARGB="false"> <Transform Height="70%" Width="90%" Margin="22% 0% 0% 0%" HorizontalAlignment="Center" /> <TextControl PixelSize="100" Size="11.5" Anchor="MiddleCenter" Font="FiraSansCondensed-Regular"> <Transform Height="80%"/> <ColorARGB A="255" R="75" G="75" B="75"/> <Bind Name="Text" Value="[domains[1].domain_name]"/> </TextControl> <NineRectControl Skin="RosTur_rectangle" UseColorARGB="true" Stretch="true" Width="200" Height="10" Untouchable="true" Condition="[Mode =='1']"> <Transform Height="12%" VerticalAlignment="Bottom"/> <ColorARGB A="255" R="96" G="159" B="210"/> </NineRectControl> <Event Name="ModeChanged"> <Params> <Param Key="Mode" Value="1"/> </Params> </Event> </ButtonControl> <NineRectControl Skin="RosTur_header_line" UseColorARGB="false" Stretch="true" Width="1" Height="50" Untouchable="true"> <Transform Height="50%" Width="0.2%" HorizontalAlignment="Right" VerticalAlignment="Center"/> </NineRectControl> </PanelControl> <PanelControl> <Transform Width="50%"/> <ButtonControl Skin="invisible" Stretch="true" Width="50" Height="50" UseColorARGB="false"> <Transform Height="70%" Width="90%" Margin="22% 0% 0% 0%" HorizontalAlignment="Center" /> <TextControl PixelSize="100" Size="11.5" Anchor="MiddleCenter" Font="FiraSansCondensed-Regular"> <Transform Height="80%"/> <ColorARGB A="255" R="75" G="75" B="75"/> <Bind Name="Text" Value="[domains[2].domain_name]"/> </TextControl> <NineRectControl Skin="RosTur_rectangle" UseColorARGB="true" Stretch="true" Width="200" Height="10" Untouchable="true" Condition="[Mode =='2']"> <Transform Height="12%" VerticalAlignment="Bottom"/> <ColorARGB A="255" R="96" G="159" B="210"/> </NineRectControl> <Event Name="ModeChanged"> <Params> <Param Key="Mode" Value="2"/> </Params> </Event> </ButtonControl> </PanelControl> </StackPanelControl> </NineRectControl> <ImageControl IsColored="true" Stretch="true"> <Transform> <Bind Name="Width" Value="[12 * 16 / 9 / GetWindowAspect()]"/> </Transform> <ImageColorARGB A="255" R="255" G="253" B="254"/> <ImageControl Src="header_right" Stretch="false"> <Transform Depth="50" DepthAlignment="Front"/> </ImageControl> <EmptyButtonControl> <Event Name="OpenUrl"> <Params> <Param Key="Url" Value="http://idvp.info"/> </Params> </Event> </EmptyButtonControl> </ImageControl> </StackPanelControl> </StackPanelControl> </Widget> </Response>

After making all the changes, the templates were updated and the project was reassembled. As a result, in a very short time, we created an application that graphically displays information on the results of the 2012 Presidential Election.




We all turned out


During the publication of the preliminary, and further, the final results of the presidential elections in the Russian Federation in 2018, we automatically publish data in the publicly accessible Election 2018 application as soon as they appear on the CEC website. If you are interested, be sure to download the application in the AppStore and GooglePlay . Watch what is happening with us.
Analysts and developers in the near future will be able to get free demo access to the IDVP platform in order to learn how to create the same applications and much more. Report yourself on the IDVP website or write to Telegrams .

If we manage to involve you in the process of observing the election results, then you will be able to further involve in the process of analyzing the data of your boss. But we are sure that you can get better. The data of the Presidential Election is just one of the reasons; perhaps next week we will monitor not only the election results, but also the statistics of IDVP.Cartogram use throughout the country;)

Data analysis is not just an automatic process for obtaining an answer to a question, it is a process of interaction between people and data. Only simple and clear tools will tie everything together.

Source: https://habr.com/ru/post/351440/

More articles:


All Articles