Interactive Visualizations with Python

“Visualization gives you answers to questions you didn’t know you had.” — Ben Schneiderman

Today there is a huge amount of information in everything we use, large companies depend on and benefit from this information to make good decisions that allow them to grow.

However, the fact that each of us as users generate too much information, may not be enough because it is useless or disorganized, so it will depend on cleaning and transformation to be used properly.

And yet it is not enough.

Data visualization is a graphical way to represent information, it provides us with an accessible way to understand behavior patterns, preferences, trends, and other information that is useful to us as developers, data scientists or entrepreneurs.

Although multiple tools allow us to create these visual elements, this time I will give an introduction to a Python library called Dash.

Dash

Dash is a framework for Python written on top of Flask, Plotly.js, and React.js. It is a library designed to create web applications focused on data visualization, it’s very complete even if you don’t know React, you can make a complete application using only Python.

Here’s a simple example of a Dash App that ties a Dropdown to a D3.js Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame.

A basic example of a Dash App

Dash applications are composed of 2 different parts, the first one describes how the application looks like and the other one describes the interaction of its components.

This library provides a couple of modules with which through Python we can generate different HTML elements, containers, buttons, text fields, and most importantly Graphics. Each of these classes we use to create applications is what we know as Layout.

In the case of Interactivity, Dash provides some functions which will work as Callbacks that will be executed automatically when any property of our elements changes.

The previous example was written in just 43 lines of code:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

from pandas_datareader import data as web
from datetime import datetime as dt

app = dash.Dash('Hello World')

app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'Coke', 'value': 'COKE'},
            {'label': 'Tesla', 'value': 'TSLA'},
            {'label': 'Apple', 'value': 'AAPL'}
        ],
        value='COKE'
    ),
    dcc.Graph(id='my-graph')
], style={'width': '500'})

@app.callback(
    Output('my-graph', 'figure'),
    [Input('my-dropdown', 'value')]
)
def update_graph(selected_dropdown_value):
    df = web.DataReader(
        selected_dropdown_value,
        'google',
        dt(2017, 1, 1),
        dt.now()
    )
    return {
        'data': [{
            'x': df.index,
            'y': df.Close
        }],
        'layout': {'margin': {'l': 40, 'r': 0, 't': 20, 'b': 30}}
    }

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

if __name__ == '__main__':
    app.run_server()

Since it is built using the Flask micro-framework, it allows in a very simple way to raise your server. And every setting or extension can be used to create even more complex applications.

And as they mentioned in their announcement, being able to use React to build great interactions of the elements practically in “real-time” is fantastic and more than this is easy to create because Dash takes advantage of both libraries for those who may not be experts in web development and can do everything from Python.

Reactive Web Apps using [Python Dash](https://cdn.hashnode.com/res/hashnode/image/upload/v1604083198996/hhzhttNFI.html)

As I mentioned at the beginning, there are many tools for data visualization, some more complex than others. However, it is always good to know the advantages or limitations and choose the one that is useful for you.

Remember you can use Dash to create any kind of application. Check out their gallery.

Additional resources

The Basics of Data Visualisation with Python A step by step introduction in under 5 minutestowardsdatascience.com

How to Create Interactive Visualisations in Python Introduction to plotly expresstowardsdatascience.com

No Comments Yet