We will automate the data analysis of PES! Part4

■ Introduction

Hi, this is Yajun. I was so busy lately that I couldn't write an article ... (too much) This article introduces ** the trajectory of the first step toward "web application" of the created software **.
This article is a series, so it is recommended that you read it with the previous article.
The software in this article is created in Python. ■ Reference URL

■ Purpose

As the first step toward web application I decided to "create a graph that works interactively in the browser".
The author has neither experience nor knowledge of creating web applications.

■ Library selection

This time I used Dash. It goes well with the graph display, and the API is neatly wrapped, so it's easy to use.

(The figure is an example of an app created with Dash! Cool!)

I have no plans on how rich the app will be in the future, so Maybe I could have made it with django! !! If you don't see the end point of your project, I think it's okay to select a library based on extensions.

■ Let's actually use it!

Click here for the appearance of the figure created as a demo!

The central figure is [written in the article of part2](https://qiita.com/junya0001000/items/d97e1d3596b85892e767#%E3%83%92%E3%82%B9%E3%83%88%E3% Same as 82% B0% E3% 83% A9% E3% 83% A0% E6% 95% A3% E5% B8% 83% E5% 9B% B3). It is a graph that shows how the third parameter has a relationship with the two parameter distributions on the X / Y axis by the color and shape of the marker.

The two figures on the right show the [Kernel Density Estimate](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%BC%E3%83] for the X / Y axis parameters in the center diagram. % 8D% E3% 83% AB% E5% AF% 86% E5% BA% A6% E6% 8E% A8% E5% AE% 9A).

Roughly "a model made from measured data to estimate unknown data that has not been measured"!

It is possible to change various parameters of the graph by inputting from the drop list on the left. Then, I will explain the operation method based on the drop list on the left!

▶X-axis & Y-axis

You can select the parameters to set on the X / Y axis. As mentioned above, the data set here is also linked to the distribution map on the right. In the GIF below, "Ratio in the center of the attack area" is set on the X axis and "Pass success rate" is set on the Y axis.

▶Color & Shape

You can specify which parameters separate the shape and color of the plot. The Color set value is also linked to the line in the distribution map on the right. In the GIF below, the color and shape of the plot is changed according to the "win", "loss", and "minute" of the match result.

▶Divide_Col & Divide_Row

If you have too much information to see the graph, you can divide the graph by the parameters of the X / Y axes. In the GIF below, the graph is divided by "win", "loss", and "minute" of the match result.

■ Advantages of this change

The advantages are the following two. "There is no need to rewrite software for each information" "Analysts and users can see data in real time" For example, the commentator of the tournament

"The counter-based team is having a hard time in this tournament."

However, the commentator's feeling may not be conveyed to the audience. In such a situation, by showing the "possession" and "number of balls captured" in a graph from the tournament data, it helps the audience to understand.

It's like, "Sure! Teams with a possession of 45% or less can hardly win from the data!"

In order to expand the market and community, it is important how much we can lower the threshold for the unknown entry group. I think that visualization of data is a powerful means.

■ Inside story of software development

Actually, it is more difficult to create an API to be used internally than to develop an application. It takes a mathematical sense to combine algorithms to achieve the desired ability. However, I think it is as difficult as creating an API to create an "easy-to-use," "easy-to-understand," and "cool" UI by considering the leads. User-conscious development is fun and burning! Lol

■ Future prospects

Add the following functions.

App design design
Account registration function
Grant data management
Video analysis (Optical Flow will be implemented. If you can see the movements of all the players at the time of scoring, it seems that you can understand something. It is also used in real soccer. Reference URL I did a rough industry survey, but if it's the current analysis of the soccer industry, it would be better to pay me for more analysis! I thought it was Naisho)

▼ In the future, I would like to make the basic functions of the software available for free and monetize some services.

Video analysis
Data access rights to other players' data libraries
Personal report analysis by data analyst (and national polity runner-up)
Monthly / weekly report distribution that summarizes the trends of all users
Analysis by tournament And

■ End

Up to here for this time! !! The distribution of the app is still a long way off. Insufficient power and man-hours (´; ω; `) We will continue to do so, so stay tuned for Part 5! !!

PS: Maybe there were many 30 games I asked the testers. .. .. Sweat Only Chama and FD submitted 30 games lol

[PYTHON] Let's turn PES analysis software into a WEB application! First step!