\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 Dash? Dash \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c \u043f\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044f \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f
\n\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c app1.py \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n
import dash
\nimport dash_core_components as dcc
\nimport dash_html_components as html
\nimport pandas as pd
\ndata = pd.read_csv(\"avocado.csv\")
\ndata = data.query(\"type == 'conventional' and region == 'Albany'\")
\ndata[\"Date\"] = pd.to_datetime(data[\"Date\"], format=\"%Y-%m-%d\")
\ndata.sort_values(\"Date\", inplace=True)
\napp = dash.Dash(__name__)
\napp.layout = html.Div(
\nchildren=[
\nhtml.H1(
\nchildren=\"Avocado Analytics\",
\nstyle={\"fontSize\": \"48px\", \"color\": \"red\"},
\n),
\nhtml.P(
\nchildren=\"Analyze the behavior of avocado prices\"
\n\" and the number of avocados sold in the US\"
\n\" between 2015 and 2018\",
\n),
\ndcc.Graph(
\nfigure={
\n\"data\": [
\n{
\n\"x\": data[\"Date\"],
\n\"y\": data[\"AveragePrice\"],
\n\"type\": \"lines\",
\n},
\n],
\n\"layout\": {\"title\": \"Average Price of Avocados\"},
\n},
\n),
\ndcc.Graph(
\nfigure={
\n\"data\": [
\n{
\n\"x\": data[\"Date\"],
\n\"y\": data[\"Total Volume\"],
\n\"type\": \"lines\",
\n},
\n],
\n\"layout\": {\"title\": \"Avocados Sold\"},
\n},
\n),
\n]
\n)
\nif __name__ == \"__main__\":
\napp.run_server(debug=True)
\n\u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 1 \u043f\u043e 4 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438: dash, dash_core_components, dash_html_components \u0438 pandas. \u041a\u0430\u0436\u0434\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:
\n\u2022 dash \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.
\n\u2022 dash_core_components \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u0438 \u0438\u043b\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b \u0434\u0430\u0442.
\n\u2022 dash_html_components \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0435\u0433\u0430\u043c HTML.
\n\u2022 pandas \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n
\u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 6 \u043f\u043e 9 \u043c\u044b \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041c\u044b \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0438 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043d\u0435 \u0438\u043c\u0435\u043b\u0438 \u0431\u044b \u0441\u043c\u044b\u0441\u043b\u0430. \u0412 \u0441\u0442\u0440\u043e\u043a\u0435 11, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Dash. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 Flask, \u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 Dash \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0439. \u0412 Flask \u0432\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 WSGI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Flask(__name__). \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Dash \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Dash(__name__).<\/p>\n
\u0414\u0430\u043b\u0435\u0435, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u0434 \u043d\u0438\u043c \u0438 \u0434\u0432\u0443\u043c\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u043c\u0438 \u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 13 \u043f\u043e 23 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Dash HTML. \u041c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, html.Div. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a (html.H1) \u0438 \u0430\u0431\u0437\u0430\u0446 (html.P) \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u044b div, HTML-\u0442\u0435\u0433\u0438 h1 \u0438 p. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0442\u0435\u0433\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 div, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 children \u0432 html.Div. \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a style, className \u0438\u043b\u0438 id, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c \u0442\u0435\u0433\u043e\u0432 HTML. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0446\u0432\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 H1, \u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 style, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u044f \u0432 17 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n
\u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 24\u201350 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0438\u0437 Dash Core Components \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0412 app.layout \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 dcc.Graph. \u041f\u0435\u0440\u0432\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0440\u0435\u0434\u043d\u0438\u0435 \u0446\u0435\u043d\u044b \u043d\u0430 \u0430\u0432\u043e\u043a\u0430\u0434\u043e \u0437\u0430 \u043f\u0435\u0440\u0438\u043e\u0434 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u0432\u043e\u043a\u0430\u0434\u043e, \u043f\u0440\u043e\u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0421\u0428\u0410 \u0437\u0430 \u0442\u043e\u0442 \u0436\u0435 \u043f\u0435\u0440\u0438\u043e\u0434. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c Dash \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Plotly.js \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b dcc.Graph \u043e\u0436\u0438\u0434\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0444\u0438\u0433\u0443\u0440\u044b \u0438\u043b\u0438 \u0441\u043b\u043e\u0432\u0430\u0440\u044c Python, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0438 \u043c\u0430\u043a\u0435\u0442. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435.
\n\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Dash \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 Flask. \u0414\u0430\u043b\u0435\u0435, \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0432\u044b\u0441\u0432\u0435\u0442\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0435 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432
\n\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:
\n\u2022 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u043a\u0430 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.
\n\u2022 \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432\u0430\u0448\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.
\n\u2022 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 CSS \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Dash.<\/p>\n
\u0421\u043d\u0430\u0447\u0430\u043b\u0430, \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u043f\u0430\u043f\u043a\u0443 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c assets, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043a\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0437\u043d\u0430\u0447\u043e\u043a \u0441 \u0438\u043c\u0435\u043d\u0435\u043c favicon.ico (\u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0435\u0441\u044c) \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b style.css, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n
body {
\nfont-family: \"Lato\", sans-serif;
\nmargin: 0;
\nbackground-color: #F7F7F7;
\n}
\n.header {
\nbackground-color: #222222;
\nheight: 256px;
\ndisplay: flex;
\nflex-direction: column;
\njustify-content: center;
\n}
\n.header-emoji {
\nfont-size: 48px;
\nmargin: 0 auto;
\ntext-align: center;
\n}
\n.header-title {
\ncolor: #FFFFFF;
\nfont-size: 48px;
\nfont-weight: bold;
\ntext-align: center;
\nmargin: 0 auto;
\n}
\n.header-description {
\ncolor: #CFCFCF;
\nmargin: 4px auto;
\ntext-align: center;
\nmax-width: 384px;
\n}
\n.wrapper {
\nmargin-right: auto;
\nmargin-left: auto;
\nmax-width: 1024px;
\npadding-right: 10px;
\npadding-left: 10px;
\nmargin-top: 32px;
\n}
\n.card {
\nmargin-bottom: 24px;
\nbox-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
\n}
\n\u0424\u0430\u0439\u043b\u044b \u0432 \u043f\u0430\u043f\u043a\u0435 assets \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, Dash \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435. \u0418 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u043d\u0430\u0447\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 style.css, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 className \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 Dash. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b app2.py, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n
import dash
\nimport dash_core_components as dcc
\nimport dash_html_components as html
\nimport pandas as pd
\ndata = pd.read_csv(\"avocado.csv\")
\ndata = data.query(\"type == 'conventional' and region == 'Albany'\")
\ndata[\"Date\"] = pd.to_datetime(data[\"Date\"], format=\"%Y-%m-%d\")
\ndata.sort_values(\"Date\", inplace=True)
\nexternal_stylesheets = [
\n{
\n\"href\": \"https:\/\/fonts.googleapis.com\/css2?\"
\n\"family=Lato:wght@400;700&display=swap\",
\n\"rel\": \"stylesheet\",
\n},
\n]
\napp = dash.Dash(__name__, external_stylesheets=external_stylesheets)
\napp.title = \"Avocado Analytics: Understand Your Avocados!\"
\napp.layout = html.Div(
\nchildren=[
\nhtml.Div(
\nchildren=[
\nhtml.P(children=\"\ud83e\udd51\", className=\"header-emoji\"),
\nhtml.H1(
\nchildren=\"Avocado Analytics\", className=\"header-title\"
\n),
\nhtml.P(
\nchildren=\"Analyze the behavior of avocado prices\"
\n\" and the number of avocados sold in the US\"
\n\" between 2015 and 2018\",
\nclassName=\"header-description\",
\n),
\n],
\nclassName=\"header\",
\n),
\nhtml.Div(
\nchildren=[
\nhtml.Div(
\nchildren=dcc.Graph(
\nid=\"price-chart\",
\nconfig={\"displayModeBar\": False},
\nfigure={
\n\"data\": [
\n{
\n\"x\": data[\"Date\"],
\n\"y\": data[\"AveragePrice\"],
\n\"type\": \"lines\",
\n\"hovertemplate\": \"$%{y:.2f}\"
\n\"\",
\n},
\n],
\n\"layout\": {
\n\"title\": {
\n\"text\": \"Average Price of Avocados\",
\n\"x\": 0.05,
\n\"xanchor\": \"left\",
\n},
\n\"xaxis\": {\"fixedrange\": True},
\n\"yaxis\": {
\n\"tickprefix\": \"$\",
\n\"fixedrange\": True,
\n},
\n\"colorway\": [\"#17B897\"],
\n},
\n},
\n),
\nclassName=\"card\",
\n),
\nhtml.Div(
\nchildren=dcc.Graph(
\nid=\"volume-chart\",
\nconfig={\"displayModeBar\": False},
\nfigure={
\n\"data\": [
\n{
\n\"x\": data[\"Date\"],
\n\"y\": data[\"Total Volume\"],
\n\"type\": \"lines\",
\n},
\n],
\n\"layout\": {
\n\"title\": {
\n\"text\": \"Avocados Sold\",
\n\"x\": 0.05,
\n\"xanchor\": \"left\",
\n},
\n\"xaxis\": {\"fixedrange\": True},
\n\"yaxis\": {\"fixedrange\": True},
\n\"colorway\": [\"#E12D39\"],
\n},
\n},
\n),
\nclassName=\"card\",
\n),
\n],
\nclassName=\"wrapper\",
\n),
\n]
\n)
\nif __name__ == \"__main__\":
\napp.run_server(debug=True)
\n\u041a\u043e\u0434 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 app1.py, \u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438. \u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 21 \u043f\u043e 37 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0430\u043d\u0435\u043b\u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0431\u044b\u043b\u0438 \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u0434\u0432\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:
\n1. \u041f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0430\u0431\u0437\u0430\u0446\u0430 \u0441 \u044d\u043c\u043e\u0434\u0437\u0438 \u0430\u0432\u043e\u043a\u0430\u0434\u043e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u043c.
\n2. \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0435\u0441\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 className. \u042d\u0442\u0438 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 style.css, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.
\n\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u0430\u0441\u0441 header-description, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0430\u0431\u0437\u0430\u0446\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0435\u043c\u0443\u0441\u044f \u0441 \u00abAnalyze the behavior of avocado prices\u00bb, \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432 style.css:<\/p>\n
.header-description {
\ncolor: #CFCFCF;
\nmargin: 4px auto;
\ntext-align: center;
\nmax-width: 384px;
\n}
\n\u0421\u0442\u0440\u043e\u043a\u0438 \u0441 29 \u043f\u043e 34 \u0444\u0430\u0439\u043b\u0430 style.css \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430. \u041e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442 \u0446\u0432\u0435\u0442, \u043f\u043e\u043b\u044f, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 className = \"header-description\". \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0435 CSS. \u0414\u0440\u0443\u0433\u043e\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u2014 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u041f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0446\u0435\u043d\u044b, \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:
\n\u2022 \u0421\u0442\u0440\u043e\u043a\u0430 43: \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0443\u044e \u043f\u043e\u043b\u043e\u0441\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.
\n\u2022 \u0421\u0442\u0440\u043e\u043a\u0438 50 \u0438 51: \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0442\u043e\u0447\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0430\u0441\u044c \u0446\u0435\u043d\u0430 \u0432 \u0434\u043e\u043b\u043b\u0430\u0440\u0430\u0445. \u0412\u043c\u0435\u0441\u0442\u043e 2,5\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a 2,5 \u0434\u043e\u043b\u043b\u0430\u0440\u0430.
\n\u2022 \u0421\u0442\u0440\u043e\u043a\u0438 \u0441 54 \u043f\u043e 66: \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043e\u0441\u044c, \u0446\u0432\u0435\u0442 \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u0438 \u0444\u043e\u0440\u043c\u0430\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u0430\u043a\u0435\u0442\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0430.
\n\u2022 \u0421\u0442\u0440\u043e\u043a\u0430 69: \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u043a \u0432 html.Div \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abcard\u00bb. \u042d\u0442\u043e \u043f\u0440\u0438\u0434\u0430\u0441\u0442 \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0442\u0435\u043d\u044c \u043f\u043e\u0434 \u043d\u0438\u043c.
\n\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043f\u0440\u043e\u0434\u0430\u0436 \u0438 \u043e\u0431\u044a\u0435\u043c\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0430\u0448\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Dash \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432
\n\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c Dash \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432\u0432\u043e\u0434\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0438\u043b\u0438 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430, \u0442\u043e \u0432\u044b\u0432\u043e\u0434, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0440\u0430\u0444\u0438\u043a, \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0432\u043e\u0434\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0430\u0448\u0443 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439. \u042d\u0442\u0430 \u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u0430\u0448\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438:
\n\u2022 \u041e\u0431\u043b\u0430\u0441\u0442\u044c
\n\u2022 \u0422\u0438\u043f \u0430\u0432\u043e\u043a\u0430\u0434\u043e
\n\u2022 \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0434\u0430\u0442
\n\u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u043f\u0430\u043f\u043a\u0435 assets \u0441 \u0438\u043c\u0435\u0435\u043c style2.css \u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n
body {
\nfont-family: \"Lato\", sans-serif;
\nmargin: 0;
\nbackground-color: #F7F7F7;
\n}
\n.header {
\nbackground-color: #222222;
\nheight: 288px;
\npadding: 16px 0 0 0;
\n}
\n.header-emoji {
\nfont-size: 48px;
\nmargin: 0 auto;
\ntext-align: center;
\n}
\n.header-title {
\ncolor: #FFFFFF;
\nfont-size: 48px;
\nfont-weight: bold;
\ntext-align: center;
\nmargin: 0 auto;
\n}
\n.header-description {
\ncolor: #CFCFCF;
\nmargin: 4px auto;
\ntext-align: center;
\nmax-width: 384px;
\n}
\n.wrapper {
\nmargin-right: auto;
\nmargin-left: auto;
\nmax-width: 1024px;
\npadding-right: 10px;
\npadding-left: 10px;
\nmargin-top: 32px;
\n}
\n.card {
\nmargin-bottom: 24px;
\nbox-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
\n}
\n.menu {
\nheight: 112px;
\nwidth: 912px;
\ndisplay: flex;
\njustify-content: space-evenly;
\npadding-top: 24px;
\nmargin: -80px auto 0 auto;
\nbackground-color: #FFFFFF;
\nbox-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
\n}
\n.Select-control {
\nwidth: 256px;
\nheight: 48px;
\n}
\n.Select--single > .Select-control .Select-value, .Select-placeholder {
\nline-height: 48px;
\n}
\n.Select--multi .Select-value-label {
\nline-height: 32px;
\n}
\n.menu-title {
\nmargin-bottom: 6px;
\nfont-weight: bold;
\ncolor: #079A82;
\n}
\n\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b, \u043d\u043e \u0443\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u0441 \u0438\u043c\u0435\u043d\u0435\u043c app3.py, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n
import dash
\nimport dash_core_components as dcc
\nimport dash_html_components as html
\nimport pandas as pd
\nimport numpy as np
\nfrom dash.dependencies import Output, Input
\ndata = pd.read_csv(\"avocado.csv\")
\ndata[\"Date\"] = pd.to_datetime(data[\"Date\"], format=\"%Y-%m-%d\")
\ndata.sort_values(\"Date\", inplace=True)
\nexternal_stylesheets = [
\n{
\n\"href\": \"https:\/\/fonts.googleapis.com\/css2?\"
\n\"family=Lato:wght@400;700&display=swap\",
\n\"rel\": \"stylesheet\",
\n},
\n]
\napp = dash.Dash(__name__, external_stylesheets=external_stylesheets)
\napp.title = \"Avocado Analytics: Understand Your Avocados!\"
\napp.layout = html.Div(
\nchildren=[
\nhtml.Div(
\nchildren=[
\nhtml.P(children=\"\ud83e\udd51\", className=\"header-emoji\"),
\nhtml.H1(
\nchildren=\"Avocado Analytics\", className=\"header-title\"
\n),
\nhtml.P(
\nchildren=\"Analyze the behavior of avocado prices\"
\n\" and the number of avocados sold in the US\"
\n\" between 2015 and 2018\",
\nclassName=\"header-description\",
\n),
\n],
\nclassName=\"header\",
\n),
\nhtml.Div(
\nchildren=[
\nhtml.Div(
\nchildren=[
\nhtml.Div(children=\"Region\", className=\"menu-title\"),
\ndcc.Dropdown(
\nid=\"region-filter\",
\noptions=[
\n{\"label\": region, \"value\": region}
\nfor region in np.sort(data.region.unique())
\n],
\nvalue=\"Albany\",
\nclearable=False,
\nclassName=\"dropdown\",
\n),
\n]
\n),
\nhtml.Div(
\nchildren=[
\nhtml.Div(children=\"Type\", className=\"menu-title\"),
\ndcc.Dropdown(
\nid=\"type-filter\",
\noptions=[
\n{\"label\": avocado_type, \"value\": avocado_type}
\nfor avocado_type in data.type.unique()
\n],
\nvalue=\"organic\",
\nclearable=False,
\nsearchable=False,
\nclassName=\"dropdown\",
\n),
\n],
\n),
\nhtml.Div(
\nchildren=[
\nhtml.Div(
\nchildren=\"Date Range\",
\nclassName=\"menu-title\"
\n),
\ndcc.DatePickerRange(
\nid=\"date-range\",
\nmin_date_allowed=data.Date.min().date(),
\nmax_date_allowed=data.Date.max().date(),
\nstart_date=data.Date.min().date(),
\nend_date=data.Date.max().date(),
\n),
\n]
\n),
\n],
\nclassName=\"menu\",
\n),
\nhtml.Div(
\nchildren=[
\nhtml.Div(
\nchildren=dcc.Graph(
\nid=\"price-chart\", config={\"displayModeBar\": False},
\n),
\nclassName=\"card\",
\n),
\nhtml.Div(
\nchildren=dcc.Graph(
\nid=\"volume-chart\", config={\"displayModeBar\": False},
\n),
\nclassName=\"card\",
\n),
\n],
\nclassName=\"wrapper\",
\n),
\n]
\n)
\n@app.callback(
\n[Output(\"price-chart\", \"figure\"), Output(\"volume-chart\", \"figure\")],
\n[
\nInput(\"region-filter\", \"value\"),
\nInput(\"type-filter\", \"value\"),
\nInput(\"date-range\", \"start_date\"),
\nInput(\"date-range\", \"end_date\"),
\n],
\n)
\ndef update_charts(region, avocado_type, start_date, end_date):
\nmask = (
\n(data.region == region)
\n& (data.type == avocado_type)
\n& (data.Date >= start_date)
\n& (data.Date <= end_date)
\n)
\nfiltered_data = data.loc[mask, :]
\nprice_chart_figure = {
\n"data": [
\n{
\n"x": filtered_data["Date"],
\n"y": filtered_data["AveragePrice"],
\n"type": "lines",
\n"hovertemplate": "$%{y:.2f}",
\n},
\n],
\n"layout": {
\n"title": {
\n"text": "Average Price of Avocados",
\n"x": 0.05,
\n"xanchor": "left",
\n},
\n"xaxis": {"fixedrange": True},
\n"yaxis": {"tickprefix": "$", "fixedrange": True},
\n"colorway": ["#17B897"],
\n},
\n}
\nvolume_chart_figure = {
\n"data": [
\n{
\n"x": filtered_data["Date"],
\n"y": filtered_data["Total Volume"],
\n"type": "lines",
\n},
\n],
\n"layout": {
\n"title": {"text": "Avocados Sold", "x": 0.05, "xanchor": "left"},
\n"xaxis": {"fixedrange": True},
\n"yaxis": {"fixedrange": True},
\n"colorway": ["#E12D39"],
\n},
\n}
\nreturn price_chart_figure, volume_chart_figure
\nif __name__ == "__main__":
\napp.run_server(debug=True)
\n\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u0441\u0445\u043e\u0436 \u0441 app1 \u0438 app2, \u043d\u043e \u043e\u043d \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u0435\u0442\u0435\u0440\u043f\u0435\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 24 \u043f\u043e 74 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c html.Div \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0430\u0448\u0438\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0434\u0430\u0442. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043c\u0435\u043d\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n
\u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 41 \u043f\u043e 55 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0443. \u041f\u043e\u043c\u0438\u043c\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0432 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 dcc.Dropdown. \u0412\u043e\u0442 \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:
\n\u2022 id \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.
\n\u2022 options \u2014 \u044d\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u0430. \u041e\u043d \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u0441 \u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.
\n\u2022 value \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.
\n\u2022 clearable \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u043f\u0443\u0441\u0442\u044b\u043c, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 True.
\n\u2022 className \u2014 \u044d\u0442\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439.
\n\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u00abType\u00bb \u0438 \u00abDate Range\u00bb \u0438\u043c\u0435\u044e\u0442 \u0442\u0443 \u0436\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0447\u0442\u043e \u0438 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0435\u0441\u044f \u043c\u0435\u043d\u044e \u00abRegion\u00bb.<\/p>\n
\u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441 90 \u043f\u043e 106 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b dcc.Graph. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 figure. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 figure \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u00abRegion\u00bb, \u00abType\u00bb \u0438 \u00abDate Range\u00bb.<\/p>\n
\u041d\u043e \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430. \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 Dash \u2014 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Python \u0441 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c app.callback. \u0412 Dash \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u043e \u0441\u0443\u0442\u0438, \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442 \u0432\u0445\u043e\u0434\u044b \u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0421\u0430\u043c\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0438 111 \u043f\u043e 164.<\/p>\n
\u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 111\u2013119 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0445\u043e\u0434\u044b \u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 app.callback. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u044b\u0445\u043e\u0434\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432\u044b\u0432\u043e\u0434\u0430. \u042d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430:
\n1. \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.
\n2. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.
\n\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Output("price-chart", "figure") \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e figure \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u00abprice-chart\u00bb. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0445\u043e\u0434\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 Input. \u041e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430:
\n1. \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c.
\n2. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435.
\n\u0418\u0442\u0430\u043a, Input("region-filter", "value") \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u00abregion-filter\u00bb \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u0442 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e value, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f.<\/p>\n
\u0412 \u0441\u0442\u0440\u043e\u043a\u0435 120 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u0432\u043e\u0434\u0430. \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 Input, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432. \u041d\u0435\u0442 \u044f\u0432\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u043e \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445.<\/p>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 121\u2013164 \u0432\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u0442\u0435\u043b\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (region, type of avocado \u0438 date range), \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b-\u0444\u0438\u0433\u0443\u0440\u044b \u0434\u043b\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432 \u0446\u0435\u043d \u0438 \u043e\u0431\u044a\u0435\u043c\u043e\u0432.<\/p>\n
\u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Dash \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0447\u0442\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0447\u0435\u043d\u044c \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043e \u0438 \u0446\u0435\u043d\u043d\u043e \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u043c\u0438\u0440\u0435.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 Dash? Dash \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c \u043f\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044f \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c app1.py \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 […]<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/posts\/150"}],"collection":[{"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":3,"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/posts\/150\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/is42-2018.susu.ru\/shvyrkovmi\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}