How to Publish your Data Science Project as a Web App using Julia and Genie | by Tobias Skovgaard Jepsen | Towards Data Science

Communication is often an integral part of a data science project and entire business have been built around exposing the results of a data science process. For instance, platforms such as wyscout and StatsBomb collect soccer data and present their analysis of the data as a web app.
In this guide, I give a short introduction on how to get started building a web app for your data science project using the programming language Julia and the Julia web framework Genie. A publicly available player value analysis from a research project is used as an example use case.
Disclaimer: I am writing this post as part of my own process of learning Julia and Genie. I am not an expert in either.
To install Julia, follow the instructions at https://julialang.org/downloads/platform/. Make sure that the Julia executable is added to PATH such that you can use the julia command from the command line.
It’s time to set up the project. First, create a directory for the project and navigate inside the folder on the command line:
mkdir projectnamecd projectname
Now is also a good time to setup version control for the project if you wish to do so. For instance, to setup the folder as a Git repostir, execute git init on the command line.
Next, we will set up a virtual environment for the project. You may be familiar with virtual environments from other programming languages such as Python. Virtual environments are a useful tool to help keep dependencies required by different projects separate since the dependencies in each virtual environment is isolated from the dependencies in any other virtual environment on the same machine. Virtual environments in Julia are created through the built-in package manage Pkg.
To create the virtual environment,
open the Julia REPL by executing julia from the command line,execute ] in the Julia REPL to enter the Pkg REPL, andexecute activate . within the Pkg REPL.
open the Julia REPL by executing julia from the command line,
execute ] in the Julia REPL to enter the Pkg REPL, and
execute activate . within the Pkg REPL.
This will create and activate the virtual environment for your project. In addition, the files Project.tomland Manifest.toml will be created in the projectname folder. As their extensions indicate, these files are written in the TOML format and are used to manage your project dependencies. For more information on Pkg, see http://pkgdocs.julialang.org/v1/api/.
This section is largely an abbreviated version of the official Genie tutorial. If you find Genie interesting, I recommend that you review the full tutorial which can find here.
Now it is time to install Genie. In brief,
Genie is a full-stack MVC web framework which promotes a streamlined and efficient workflow for developing modern web applications in Julia. — Genie
To install Genie, execute add Genie from within the Pkg REPL with your project virtual environment activated. If you closed it, simply run julia --project <filepath> in the projectname directory to open the Julia REPL with your virtual environment activated and type in ] to enter the Pkg REPL.
After executing add Genie, you can verify the installation by using backspace or CTRL+C to exit the Pkg REPL and return to the Julia REPL. Then, attempt to import Genie with using Genie. If no errors are returned, Genie has been installed correctly.
Now that we have Genie installed, it is time to set up the web app for the project. With the Julia REPL open and Genie imported, execute
Genie.newapp_webservice("webapp")
This will create a webapp folder in the projectname directory, which contains a simple skeleton web application for your data science project.
You can now launch the web app from the Julia REPL with
using GenieGenie.loadapp()up()
and find it by navigating to http://localhost:8000/ in your browser. You should see a stock welcome message on the landing page of your web app.
Now its time to publish your data science project. As an example project, I will use data from the paper “Actions speak louder than goals: Valuing player actions in soccer.” by Tom Decroos, Lotte Bransen, Jan Van Haaren, and Jesse Davis which they have made available through a GitHub repository.
Traditional metrics for assessing the impact of players in a soccer match focus on rare actions such as goals. The research paper therefore presents a technique for assigning value to all individual soccer actions, including those that do not result in scoring a goal. For the purposes of this guide, we will utilise only the data from the 2018 FIFA World Cup.
The objective of this small project is to expose the 2018 FIFA World Cup Player Analysis as a web app for all to see.
Create a data directory under the webapp directory and download the file player_stats.csv into the folder. You can find the file here. The full path to the file should be projectname/webapp/data/player_stats.csv. I recommend you have a brief look at the contents of the file to see the different columns.
Now it is time to load the data into the program. Open the routes.jl file under the webapp directory. This file is responsible for executing the right code when users access the pages of the web application. It already contains a bit of code, i.e.,
using Genie.Routerroute("/") do serve_static_file("welcome.html")end
which is the code that was responsible for showing you the welcome to Genie page after creating the skeleton web application.
Now it is time to add appropriate data structures to contain the information to publish from the player_stats.csvfile. Add the following structs:
struct Value  total::Float64  offensive::Float64  defensive::Float64endstruct Player    name::String    minutes_played::Int    value_per_minute::Valueend
With the Player data structure defined, it is time to construct Players from the player_stats.csv file. Since it is stored in CSV format, we will use the CSV package to load the file. To install it, open a Pkg REPL and add CSV.
Next, import the package by adding using CSV to the top of routes.jl. Finally, load the data from player_stats.csv by adding the list comprehension
players = [  Player(player.player_name, player.minutes_played,          Value(           player.vaep_rating,           player.offensive_rating,           player.defensive_rating))  for player in CSV.File("data/player_stats.csv")]
below the definition ofPlayer.
Import Genie.Renderer.Html by adding using Genie.Renderer.Html to the top of the file. Then, add a new route to the /players subpage
route("/players") do  html(:players, :index, players=players)end
at the bottom of routes.jl. The call to html takes as input the list of players, along with two symbols to indicate the location of the appropriate HTML template to render them. As output, a string in HTML format is returned by invoking Genie’s template engine to fill out the templates. However, to do this, the template files
webapp/app/layouts/app.jl.html, and
webapp/app/resources/players/views/index.jl.html
must be created.
The file webapp/app/layouts/app.jl.html should contain
and webapp/app/resources/players/views/index.jl.html should contain
Both template files resemble HTML, but have embedded code in between the <% and %> tags. These are commands to the Genie template engine. The app.jl.html file contains the general layout for the site. For now, we are mostly interested in index.jl.html which is responsible for rendering the list of players. In this file, the embedded code loops over the input list of Players in lines 2–14, and the body of the loop accesses the fields of each Player struct to insert the data into an appropriate HTML structure for rendering in the browser.
With the templates in place, the web app can once again be launched from the Julia REPL with
using GenieGenie.loadapp()up()
If you navigate http://localhost:8000/players you should see the player statistics displayed on the page.
If you have followed the guide, you have built a simple web application to present the results of an analysis. This guide is not intended as the end, but just the beginning, to publishing a data science project as a web app. There is still plenty of room for improvement.
Improvement in terms of styling could be to reduce the precision of the value and reduce the amount of white space to utilise screen space more efficiently. Improvements in terms of features could be to include sorting or searching, which would make it easier to navigate the data. Finally, the data that you might want to present from your own data science project may be far more complex, e.g., include a hierarchy. For instance, analysing individual matches of each player.
You can find the complete project on GitHub.