Aug
09
Dash Framework ”; Previous Next In this chapter, we will discuss about the Dash framework in detail. Dash is an open-source Python framework used for building analytical web applications. It is a powerful library that simplifies the development of data-driven applications. It’s especially useful for Python data scientists who aren’t very familiar with web development. Users can create amazing dashboards in their browser using dash. Built on top of Plotly.js, React, and Flask, Dash ties modern UI elements like dropdowns, sliders and graphs directly to your analytical python code. Dash apps consist of a Flask server that communicates with front-end React components using JSON packets over HTTP requests. Dash applications are written purely in python, so NO HTML or JavaScript is necessary. Dash Setup If Dash is not already installed in your terminal, then install the below mentioned Dash libraries. As these libraries are under active development, install and upgrade then frequently. Python 2 and 3 are also supported. pip install dash==0.23.1 # The core dash backend pip install dash-renderer==0.13.0 # The dash front-end pip install dash-html-components==0.11.0 # HTML components pip install dash-core-components==0.26.0 # Supercharged components pip install plotly==3.1.0 # Plotly graphing library In order to make sure everything is working properly, here, we created a simple dashApp.py file. Dash or App Layout Dash apps are composed of two parts. The first part is the “layout” of the app which basically describes how the application looks like. The second part describes the interactivity of the application. Core Components We can build the layout with the dash_html_components and the dash_core_components library. Dash provides python classes for all the visual components of the application. We can also customize our own components with JavaScript and React.js. import dash_core_components as dcc import dash_html_components as html The dash_html_components is for all HTML tags where the dash_core_components is for interactivity built with React.js. Using above two libraries, let us write a code as given below − app = dash.Dash() app.layout = html.Div(children=[ html.H1(children=”Hello Dash”), html.Div(children=”””Dash Framework: A web application framework for Python.”””) And the equivalent HTML code would look like this − <div> <h1> Hello Dash </h1> <div> Dash Framework: A web application framework for Python. </div> </div> Writing Simple Dash app We will learn how to write a simple example on dash using above mentioned library in a file dashApp.py. # -*- coding: utf-8 -*- import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash() app.layout = html.Div(children=[ html.H1(children=”Hello Dash”), html.Div(children=”””Dash Framework: A web application framework for Python.”””), dcc.Graph( id=”example-graph”, figure={ ”data”: [ {”x”: [1, 2, 3], ”y”: [4, 1, 2], ”type”: ”bar”, ”name”: ”Delhi”}, {”x”: [1, 2, 3], ”y”: [2, 4, 5], ”type”: ”bar”, ”name”: u”Mumbai”}, ], ”layout”: { ”title”: ”Dash Data Visualization” } } ) ]) if __name__ == ”__main__”: app.run_server(debug=True) Running the Dash app Note the following points while running the Dash app. (MyDjangoEnv) C:UsersrajeshDesktopMyDjangodash>python dashApp1.py Serving Flask app “dashApp1” (lazy loading) Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. Debug mode: on Restarting with stat Debugger is active! Debugger PIN: 130-303-947 Running on http://127.0.0.1:8050/ (Press CTRL+C to quit) 127.0.0.1 – – [12/Aug/2018 09:32:39] “GET / HTTP/1.1” 200 – 127.0.0.1 – – [12/Aug/2018 09:32:42] “GET /_dash-layout HTTP/1.1” 200 – 127.0.0.1 – – [12/Aug/2018 09:32:42] “GET /_dash-dependencies HTTP/1.1” 200 – 127.0.0.1 – – [12/Aug/2018 09:32:42] “GET /favicon.ico HTTP/1.1” 200 – 127.0.0.1 – – [12/Aug/2018 09:39:52] “GET /favicon.ico HTTP/1.1″ 200 – Visit http:127.0.0.1:8050/ in your web browser. You should see an app that looks like this. In above program, few important points to be noted are as follows − The app layout is composed of a tree of “components” like html.Div and dcc.Graph. The dash_html_components library has a component for every HTML tag. The html.H1 (children = ‘Hello Dash’) component generates a <h1> Hello Dash </h1> HTML element in your application. Not all components are pure HTML. The dash_core_components describe higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library. Each component is described entirely through keyword attributes. Dash is declarative: you will primarily describe your application through these attributes. The children property is special. By convention, it’s always the first attribute which means that you can omit it. Html.H1 (children=’Hello Dash’) is the same as html.H1 (‘Hello Dash’). The fonts in your application will look a little bit different than what is displayed here. This application is using a custom CSS stylesheet to modify the default styles of the elements. Custom font style is permissible, but as of now, we can add the below URL or any URL of your choice − app.css.append_css ({“external_url”:https://codepen.io/chriddyp/pen/bwLwgP.css}) to get your file to get the same look and feel of these examples. More about HTML The dash_html_components library contains a component class for every HTML tag as well as keyword arguments for all of the HTML arguments. Let us add the inline style of the components in our previous app text − # -*- coding: utf-8 -*- import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash() colors = { ”background”: ”#87D653”, ”text”: ”#ff0033” } app.layout = html.Div(style={”backgroundColor”: colors[”background”]}, children=[ html.H1( children=”Hello Dash”, style={ ”textAlign”: ”center”, ”color”: colors[”text”] } ), html.Div(children=”Dash: A web application framework for Python.”, style={ ”textAlign”: ”center”, ”color”: colors[”text”] }), dcc.Graph( id=”example-graph-2”, figure={ ”data”: [ {”x”: [1, 2, 3], ”y”: [4, 1, 2], ”type”: ”bar”, ”name”: ”Delhi”}, {”x”: [1, 2, 3], ”y”: [2, 4, 5], ”type”: ”bar”, ”name”: u”Mumbai”}, ], ”layout”: { ”plot_bgcolor”: colors[”background”], ”paper_bgcolor”: colors[”background”], ”font”: { ”color”: colors[”text”] } } } ) ]) if __name__ == ”__main__”: app.run_server(debug=True) In the above example, we modified the inline styles of the html.Div and html.H1 components with the style property. It is rendered in the Dash application as follows − There are couple of key distinctions between dash_html_components and HTML attributes − For style property in Dash, you can just supply a dictionary, whereas in HTML, it is semicolon-separated string. Style dictionary keys are camelCased, so text-align