# Data Visualization With Python & Dash

# Overview

I had a Python assignment recently, the goal was to build a model to predict Stock prices. As a Front-end-based coder, it is quite hard to learn all the techniques to accomplish the goal (data prep, model training, visualize, ...) in a short amount of time. With the help of [Dash](https://plotly.com/dash/), the visualizing part has become easier than ever.

Dash is a python framework that is built on top of React (my favorite), the free version packed all the features that you need for creating SPA with interactive UI.

### Packages you need:

- plotly
- dash
- dash_core_components
- dash_html_components

# Let's start:

Create an `app.py` file in your working directory, then start importing packages. These are the packages that I will use in this article:

```
import dash
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
```




Init the web page and add a header to it. Remember to turn on debug mode, it will save you a lot of time in the development phase:

```
app = dash.Dash()

app.layout = html.Div([
    html.H1('Easy Data Visualize With Python & Dash', style = { 'textAlign': 'center' }),
])

if __name__ == '__main__':
    app.run_server(debug = True)
```

> Note: add multiple children to `Div` element by the array syntax (`[]`)





Then run the file with `python app.py` and open the link on your browser to see what we built so far:

![Screen Shot 2021-07-23 at 11.46.02.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627016109358/CTNV7xpbS.png)





Next step, add the basic graph, put it next to the `H1` title:

```
dcc.Graph(
    id = 'my-graph',
    figure = go.Figure(
        data = [
            go.Scatter(
                x = [1, 4, 8, 9],
                y = [2, 6, 0, 2],
                name = 'Line 1'
            ),
            go.Scatter(
                x = [2, 4, 7, 9],
                y = [7, 2, 5, 0],
                name = 'Line 2'
            )
        ]
    )
)
```

![Screen Shot 2021-07-23 at 12.50.45.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627019458325/aywU7btPI.png)

The `Graph` component has some built-in action to play with data like zooming, dragging to focus on a specific time frame, take and save screenshots, auto-scaling on window size, …


## Cool tips:

### Change the tab title on the browser
By default, your tab on the browser will have the default title, simply add this line of code to change the title:
```
app.title = 'Custom Title'
```
![Screen Shot 2021-07-23 at 15.09.23.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627027860646/3gLM6CuTx.png)

### Using CSS
Dash supports raw CSS file and it will be packed in with your code automatically. First, you create a folder named `assets` next to your `app.py` file and put your CSS file in there.

![Screen Shot 2021-07-23 at 15.13.12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627028139124/fXmdfPK6M.png)

Then you can start using `className` to style the component:
```
# app.py:
html.H1('Easy Data Visualize With Python & Dash', className = 'title'),

# layout.css
.title {
    text-align: center;
}

```

# Conclusion
* Dash is so easy to use because the syntax is human-friendly. You can find more info about the [Figure](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Figure.html) and [Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) for further graph customization.
* Of course, we have much more advanced techniques to build an epic data visualize web page, for example, `@app.callback` for changing the input or `Loading` component for better UX, … Let me know if I should share more about them 😄.
* This is the result for my assignment, I added `RangeSlider`, `DatePickerSingle` for more dynamic data:

![DEMO](https://media.giphy.com/media/IbuH0DyNtnBsVft6lY/giphy.gif)