# Build data app with advanced plotting packages

add `plotly, scipy, streamlit` to pip install input field

```
import streamlit as st
import numpy as np
import plotly.figure_factory as ff
import plotly.express as px
import plotly.graph_objects as go


np.random.seed(1)
N=70

st.set_page_config(
    page_title="Hello",
    page_icon="👋",
)

st.write("# Welcome to Xplain App with chart! 👋")



# Add histogram data
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# Group data together
hist_data = [x1, x2, x3]

group_labels = ['Group 1', 'Group 2', 'Group 3']

# Create distplot with custom bin_size
fig = ff.create_distplot(
        hist_data, group_labels, bin_size=[.1, .25, .5])

# Plot!
st.plotly_chart(fig, use_container_width=True)

df = px.data.tips()
st.write(df)
fig_violin = px.violin(df, y="tip", x="smoker", color="sex", box=True, points="all",
          hover_data=df.columns)
st.plotly_chart(fig_violin, use_container_width=False)




fig_go = go.Figure(data=[go.Mesh3d(x=(70*np.random.randn(N)),
                   y=(55*np.random.randn(N)),
                   z=(40*np.random.randn(N)),
                   opacity=0.5,
                   color='rgba(244,22,100,0.6)'
                  )])

fig_go.update_layout(
    scene = dict(
        xaxis = dict(nticks=4, range=[-100,100],),
                     yaxis = dict(nticks=4, range=[-50,100],),
                     zaxis = dict(nticks=4, range=[-100,100],),),
    width=700,
    margin=dict(r=20, l=10, b=10, t=10))
st.plotly_chart(fig_go, use_container_width=True)
```

Click run button, a new browser tab will appear

<div><figure><img src="https://3086913752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaXIWTLSpZzoC0lnDKEaY%2Fuploads%2F0TUm0MQMseVGUqxUNBL7%2Fplottly_1.png?alt=media&#x26;token=dbd694f9-b874-4092-be6f-cea936036ea5" alt=""><figcaption></figcaption></figure> <figure><img src="https://3086913752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaXIWTLSpZzoC0lnDKEaY%2Fuploads%2FgKncvLYNxneynOPzLMTw%2Fplottly_2.png?alt=media&#x26;token=9e886368-38a9-4610-a80d-f37ec0d0ca39" alt=""><figcaption></figcaption></figure></div>