Skip to content

Commit ec09e8e

Browse files
jaschmittjaschmitt
authored
Merge pull request #134 from dylanjcastillo/python-dash
Python Dash tutorial resources
2 parents 2da0a84 + fafd56d commit ec09e8e

File tree

19 files changed

+91951
-0
lines changed

19 files changed

+91951
-0
lines changed

‎python-dash/additional_files/avocado.csv‎

Lines changed: 18250 additions & 0 deletions
Large diffs are not rendered by default.

‎python-dash/additional_files/favicon.ico‎

15 KB
Binary file not shown.

‎python-dash/apps/app_1/app.py‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import pandas as pd
5+
6+
data = pd.read_csv("avocado.csv")
7+
data = data.query("type == 'conventional' and region == 'Albany'")
8+
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
9+
data.sort_values("Date", inplace=True)
10+
11+
app = dash.Dash(__name__)
12+
13+
app.layout = html.Div(
14+
children=[
15+
html.H1(
16+
children="Avocado Analytics",
17+
),
18+
html.P(
19+
children="Analyze the behavior of avocado prices"
20+
" and the number of avocados sold in the US"
21+
" between 2015 and 2018",
22+
),
23+
dcc.Graph(
24+
figure={
25+
"data": [
26+
{
27+
"x": data["Date"],
28+
"y": data["AveragePrice"],
29+
"type": "lines",
30+
},
31+
],
32+
"layout": {"title": "Average Price of Avocados"},
33+
},
34+
),
35+
dcc.Graph(
36+
figure={
37+
"data": [
38+
{
39+
"x": data["Date"],
40+
"y": data["Total Volume"],
41+
"type": "lines",
42+
},
43+
],
44+
"layout": {"title": "Avocados Sold"},
45+
},
46+
),
47+
]
48+
)
49+
50+
if __name__ == "__main__":
51+
app.run_server(debug=True)

‎python-dash/apps/app_1/avocado.csv‎

Lines changed: 18250 additions & 0 deletions
Large diffs are not rendered by default.

‎python-dash/apps/app_2/app.py‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import pandas as pd
5+
6+
data = pd.read_csv("avocado.csv")
7+
data = data.query("type == 'conventional' and region == 'Albany'")
8+
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
9+
data.sort_values("Date", inplace=True)
10+
11+
external_stylesheets = [
12+
{
13+
"href": "https://fonts.googleapis.com/css2?"
14+
"family=Lato:wght@400;700&display=swap",
15+
"rel": "stylesheet",
16+
},
17+
]
18+
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
19+
app.title = "Avocado Analytics: Understand Your Avocados!"
20+
21+
app.layout = html.Div(
22+
children=[
23+
html.Div(
24+
children=[
25+
html.P(children="🥑", className="header-emoji"),
26+
html.H1(
27+
children="Avocado Analytics", className="header-title"
28+
),
29+
html.P(
30+
children="Analyze the behavior of avocado prices"
31+
" and the number of avocados sold in the US"
32+
" between 2015 and 2018",
33+
className="header-description",
34+
),
35+
],
36+
className="header",
37+
),
38+
html.Div(
39+
children=[
40+
html.Div(
41+
children=dcc.Graph(
42+
id="price-chart",
43+
config={"displayModeBar": False},
44+
figure={
45+
"data": [
46+
{
47+
"x": data["Date"],
48+
"y": data["AveragePrice"],
49+
"type": "lines",
50+
"hovertemplate": "$%{y:.2f}"
51+
"<extra></extra>",
52+
},
53+
],
54+
"layout": {
55+
"title": {
56+
"text": "Average Price of Avocados",
57+
"x": 0.05,
58+
"xanchor": "left",
59+
},
60+
"xaxis": {"fixedrange": True},
61+
"yaxis": {
62+
"tickprefix": "$",
63+
"fixedrange": True,
64+
},
65+
"colorway": ["#17B897"],
66+
},
67+
},
68+
),
69+
className="card",
70+
),
71+
html.Div(
72+
children=dcc.Graph(
73+
id="volume-chart",
74+
config={"displayModeBar": False},
75+
figure={
76+
"data": [
77+
{
78+
"x": data["Date"],
79+
"y": data["Total Volume"],
80+
"type": "lines",
81+
},
82+
],
83+
"layout": {
84+
"title": {
85+
"text": "Avocados Sold",
86+
"x": 0.05,
87+
"xanchor": "left",
88+
},
89+
"xaxis": {"fixedrange": True},
90+
"yaxis": {"fixedrange": True},
91+
"colorway": ["#E12D39"],
92+
},
93+
},
94+
),
95+
className="card",
96+
),
97+
],
98+
className="wrapper",
99+
),
100+
]
101+
)
102+
103+
if __name__ == "__main__":
104+
app.run_server(debug=True)

‎python-dash/apps/app_2/assets/favicon.ico‎

15 KB
Binary file not shown.

‎python-dash/apps/app_2/assets/style.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
body {
2+
font-family: "Lato", sans-serif;
3+
margin: 0;
4+
background-color: #F7F7F7;
5+
}
6+
7+
.header {
8+
background-color: #222222;
9+
height: 256px;
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: center;
13+
}
14+
15+
.header-emoji {
16+
font-size: 48px;
17+
margin: 0 auto;
18+
text-align: center;
19+
}
20+
21+
.header-title {
22+
color: #FFFFFF;
23+
font-size: 48px;
24+
font-weight: bold;
25+
text-align: center;
26+
margin: 0 auto;
27+
}
28+
29+
.header-description {
30+
color: #CFCFCF;
31+
margin: 4px auto;
32+
text-align: center;
33+
max-width: 384px;
34+
}
35+
36+
.wrapper {
37+
margin-right: auto;
38+
margin-left: auto;
39+
max-width: 1024px;
40+
padding-right: 10px;
41+
padding-left: 10px;
42+
margin-top: 32px;
43+
}
44+
45+
.card {
46+
margin-bottom: 24px;
47+
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
48+
}

0 commit comments

Comments
 (0)