{"id":390077,"date":"2024-06-29T09:01:11","date_gmt":"2024-06-29T09:01:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=390077"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=390077","title":{"rendered":"<span>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Dash<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Dash \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0412\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0432 \u0441\u0435\u043c\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a0\/17f\/c29\/1a017fc2904dc1ac1811edcc30648447.png\" width=\"602\" height=\"338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a0\/17f\/c29\/1a017fc2904dc1ac1811edcc30648447.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0430\u043c Dash \u044d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u043a\u043e\u043b\u043b\u0430\u0431\u00a0 HTML, React.Js, Flask\u00a0 \u0438 CSS \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 python \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u0430 \u044f \u0432\u043e\u0437\u044c\u043c\u0443 \u0434\u0430\u0442\u0430\u0441\u0435\u0442 diamonds \u0441 \u0441\u0430\u0439\u0442\u0430 kaggle (<a href=\"https:\/\/www.kaggle.com\/shivam2503\/diamonds\" rel=\"noopener noreferrer nofollow\">https:\/\/www.kaggle.com\/shivam2503\/diamonds<\/a>)<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 dash, \u0443\u0439\u0434\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u043c\u0435\u0440\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432: \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0433\u0440\u0430\u043d\u043a\u0438, \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0447\u0438\u0441\u0442\u043e\u0442\u044b \u0438 \u0446\u0432\u0435\u0442. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u0431\u043e\u0440 \u043d\u0443\u0436\u043d\u043e\u0439\u00a0 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0432\u0435\u0431 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. <\/p>\n<p>\u041f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u044d\u043c\u043f\u043b\u0430 \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u0430 <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/40c\/f7c\/b5b\/40cf7cb5bac758a3b1935035a360c62c.png\" width=\"480\" height=\"82\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/40c\/f7c\/b5b\/40cf7cb5bac758a3b1935035a360c62c.png\"\/><figcaption><\/figcaption><\/figure>\n<pre><code>import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd from dash.dependencies import Input, Output<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u043c\u0435\u0442\u0438\u043c \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 dash\u00a0 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438 \u0432\u043d\u0435\u0448\u043d\u044e\u044e(layout) \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430, \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e(callbacks) \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043d\u0430 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0435.<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441 dash, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c dataset <\/p>\n<pre><code>app = dash.Dash(__name__) df  = pd.read_csv('C:\/\/Users\/\/User\/\/Desktop\/\/\u0423\u0447\u0435\u0431\u0430\/\/diam.csv',sep = ';')<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a.<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 (https:\/\/github.com\/matyushkin\/lessons\/blob\/master\/visualization\/dash\/avocado_analytics\/apps\/app_2\/assets\/style.css)<\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 html.Div \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u043e\u0441\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a(html.h1) \u0438 \u0430\u0431\u0437\u0430\u0446(html.P)<\/p>\n<pre><code>app.layout = html.Div(children=[      html.Div(         children=[             html.H1(children='Analysis diamonds dataset', className= 'header-title'),               html.P(children='maybe this demo will be useful to someone (:', className= 'header-description')\u0438                  ], className= 'header')])<\/code><\/pre>\n<p>ClassName \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 css \u0444\u0430\u0439\u043b <\/p>\n<p>\u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0432 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043f\u0430\u043f\u043a\u0443 assets.<\/p>\n<p>\u0412\u0438\u0434 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/85c\/172\/321\/85c1723217c3f72ab91b1d63a594612c.png\" width=\"270\" height=\"150\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/85c\/172\/321\/85c1723217c3f72ab91b1d63a594612c.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <\/p>\n<pre><code>if __name__ == '__main__':     app.run_server(debug=True) <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/63b\/54d\/3f2\/63b54d3f2164d62405d36e52d7e6ecb8.png\" width=\"480\" height=\"256\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/63b\/54d\/3f2\/63b54d3f2164d62405d36e52d7e6ecb8.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0433\u043e\u0442\u043e\u0432, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 dropdown<\/p>\n<p>\u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b.<\/p>\n<p>\u00a0<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f99\/89c\/8c6\/f9989c8c6d5080a3c58ae7aade6558cc.png\" width=\"469\" height=\"237\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f99\/89c\/8c6\/f9989c8c6d5080a3c58ae7aade6558cc.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a <\/p>\n<pre><code>html.Div([     dcc.Dropdown(         id='demo_drop',         options=[             {'label': '\u041e\u0433\u0440\u0430\u043d\u043a\u0430', 'value': 'cut'},             {'label': '\u042f\u0441\u043d\u043e\u0441\u0442\u044c(\u0447\u0438\u0441\u0442\u043e\u0442\u0430)', 'value': 'clarity'},             {'label': '\u0426\u0432\u0435\u0442', 'value': 'color'}         ],         value='cut', className=\"dropdown\"     )])<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 id \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u043d \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0438\u0437 \u043a\u043e\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u043b\u043e\u0432\u0430\u0440\u044c.\u00a0 \u0410\u0442\u0440\u0438\u0431\u0443\u0442 value \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <\/p>\n<pre><code>dcc.Graph(id='output_graph')],className=\"card\")<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/444\/692\/ed1\/444692ed1b7157ae7f77dd5337de905c.png\" width=\"480\" height=\"245\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/444\/692\/ed1\/444692ed1b7157ae7f77dd5337de905c.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u043d \u043f\u0443\u0441\u0442, \u043d\u043e \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430.\u00a0 \u0412 \u043d\u0438\u0445 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 Dropdown\u00a0 \u0438 graph. <\/p>\n<pre><code>@app.callback(     Output(component_id='output_graph', component_property='figure'),     [Input(component_id='demo_drop', component_property='value')] )<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 input \u0443 \u043d\u0430\u0441 \u0437\u0430\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 dropdown \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438 \u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 options. <\/p>\n<p>\u0410 output \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0438 \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. <\/p>\n<p>\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0427\u0442\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u043b\u043e \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043e\u0433\u0440\u0430\u043d\u043a\u0438, \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044f\u043c \u043e\u0433\u0440\u0430\u043d\u043a\u0438 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b. <\/p>\n<p>\u0414\u043b\u044f pandas \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a <\/p>\n<pre><code>h = df.groupby(['cut'], as_index=False, sort=False)['carat'].count()<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043f\u043b\u0435\u0442\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e<\/p>\n<pre><code>def update_output(value):     if value == 'cut':         h = df.groupby(['cut'], as_index=False, sort=False)['carat'].count()     elif value == 'clarity':         h = df.groupby(['clarity'], as_index=False, sort=False)['carat'].count()     elif value == 'color':         h = df.groupby(['color'], as_index=False, sort=False)['carat'].count()     fig = px.bar(h, x=value, y=\"carat\", labels = {\"carat\" : \"Count\"} )      return fig<\/code><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u0442\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0435. <\/p>\n<p>\u0410 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f fig \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443 <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u043d\u0430\u0441 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/de1\/357\/86f\/de135786f6f7fa53f411450f57e87285.png\" width=\"480\" height=\"215\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de1\/357\/86f\/de135786f6f7fa53f411450f57e87285.png\"\/><figcaption><\/figcaption><\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7b6\/77a\/418\/7b677a41873a7afb20332968646e5d80.png\" width=\"480\" height=\"246\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7b6\/77a\/418\/7b677a41873a7afb20332968646e5d80.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 <\/p>\n<pre><code>import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd from dash.dependencies import Input, Output    app = dash.Dash(__name__) df  = pd.read_csv('C:\/\/Users\/\/User\/\/Desktop\/\/\u0423\u0447\u0435\u0431\u0430\/\/diam.csv',sep = ';')     app.layout = html.Div(children=[         html.Div(         children=[             html.H1(children='Analysis diamonds dataset', className= 'header-title'),                html.P(children='maybe this demo will be useful to someone (:', className= 'header-description')                 ], className= 'header'),       #html.Label('\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e'),     html.Div([         dcc.Dropdown(             id='demo_drop',             options=[                 {'label': '\u041e\u0433\u0440\u0430\u043d\u043a\u0430', 'value': 'cut'},                 {'label': '\u042f\u0441\u043d\u043e\u0441\u0442\u044c(\u0447\u0438\u0441\u0442\u043e\u0442\u0430)', 'value': 'clarity'},                 {'label': '\u0426\u0432\u0435\u0442', 'value': 'color'}             ],             value='cut', className=\"dropdown\"         ),  dcc.Graph(id='output_graph')],className=\"card\")   ]) @app.callback(     Output(component_id='output_graph', component_property='figure'),     [Input(component_id='demo_drop', component_property='value')] ) def update_output(value):     if value == 'cut':         h = df.groupby(['cut'], as_index=False, sort=False)['carat'].count()     elif value == 'clarity':         h = df.groupby(['clarity'], as_index=False, sort=False)['carat'].count()     elif value == 'color':         h = df.groupby(['color'], as_index=False, sort=False)['carat'].count()     fig = px.bar(h, x=value, y=\"carat\", labels = {\"carat\" : \"Count\"} )     return fig   if __name__ == '__main__':     app.run_server(debug=True)<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u044f \u0441\u043c\u043e\u0433 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u0432 \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/588645\/\"> https:\/\/habr.com\/ru\/articles\/588645\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Dash \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0412\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0432 \u0441\u0435\u043c\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0430\u043c Dash \u044d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u043a\u043e\u043b\u043b\u0430\u0431\u00a0 HTML, React.Js, Flask\u00a0 \u0438 CSS \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 python \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u0430 \u044f \u0432\u043e\u0437\u044c\u043c\u0443 \u0434\u0430\u0442\u0430\u0441\u0435\u0442 diamonds \u0441 \u0441\u0430\u0439\u0442\u0430 kaggle (<a href=\"https:\/\/www.kaggle.com\/shivam2503\/diamonds\" rel=\"noopener noreferrer nofollow\">https:\/\/www.kaggle.com\/shivam2503\/diamonds<\/a>)<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 dash, \u0443\u0439\u0434\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u043c\u0435\u0440\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432: \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0433\u0440\u0430\u043d\u043a\u0438, \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0447\u0438\u0441\u0442\u043e\u0442\u044b \u0438 \u0446\u0432\u0435\u0442. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u0431\u043e\u0440 \u043d\u0443\u0436\u043d\u043e\u0439\u00a0 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0432\u0435\u0431 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. <\/p>\n<p>\u041f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u044d\u043c\u043f\u043b\u0430 \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u0430 <\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<pre><code>import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd from dash.dependencies import Input, Output<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u043c\u0435\u0442\u0438\u043c \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 dash\u00a0 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438 \u0432\u043d\u0435\u0448\u043d\u044e\u044e(layout) \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430, \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e(callbacks) \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043d\u0430 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0435.<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441 dash, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c dataset <\/p>\n<pre><code>app = dash.Dash(__name__) df  = pd.read_csv('C:\/\/Users\/\/User\/\/Desktop\/\/\u0423\u0447\u0435\u0431\u0430\/\/diam.csv',sep = ';')<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a.<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 (https:\/\/github.com\/matyushkin\/lessons\/blob\/master\/visualization\/dash\/avocado_analytics\/apps\/app_2\/assets\/style.css)<\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 html.Div \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u043e\u0441\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a(html.h1) \u0438 \u0430\u0431\u0437\u0430\u0446(html.P)<\/p>\n<pre><code>app.layout = html.Div(children=[      html.Div(         children=[             html.H1(children='Analysis diamonds dataset', className= 'header-title'),               html.P(children='maybe this demo will be useful to someone (:', className= 'header-description')\u0438                  ], className= 'header')])<\/code><\/pre>\n<p>ClassName \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 css \u0444\u0430\u0439\u043b <\/p>\n<p>\u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0432 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043f\u0430\u043f\u043a\u0443 assets.<\/p>\n<p>\u0412\u0438\u0434 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 <\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0418 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <\/p>\n<pre><code>if __name__ == '__main__':     app.run_server(debug=True) <\/code><\/pre>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0433\u043e\u0442\u043e\u0432, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 dropdown<\/p>\n<p>\u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b.<\/p>\n<p>\u00a0<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a <\/p>\n<pre><code>html.Div([     dcc.Dropdown(         id='demo_drop',         options=[             {'label': '\u041e\u0433\u0440\u0430\u043d\u043a\u0430', 'value': 'cut'},             {'label': '\u042f\u0441\u043d\u043e\u0441\u0442\u044c(\u0447\u0438\u0441\u0442\u043e\u0442\u0430)', 'value': 'clarity'},             {'label': '\u0426\u0432\u0435\u0442', 'value': 'color'}         ],         value='cut', className=\"dropdown\"     )])<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 id \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u043d \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0438\u0437 \u043a\u043e\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u043b\u043e\u0432\u0430\u0440\u044c.\u00a0 \u0410\u0442\u0440\u0438\u0431\u0443\u0442 value \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <\/p>\n<pre><code>dcc.Graph(id='output_graph')],className=\"card\")<\/code><\/pre>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u043d \u043f\u0443\u0441\u0442, \u043d\u043e \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430.\u00a0 \u0412 \u043d\u0438\u0445 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 Dropdown\u00a0 \u0438 graph. <\/p>\n<pre><code>@app.callback(     Output(component_id='output_graph', component_property='figure'),     [Input(component_id='demo_drop', component_property='value')] )<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 input \u0443 \u043d\u0430\u0441 \u0437\u0430\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 dropdown \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438 \u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 options. <\/p>\n<p>\u0410 output \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0438 \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. <\/p>\n<p>\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0427\u0442\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u043b\u043e \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043e\u0433\u0440\u0430\u043d\u043a\u0438, \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044f\u043c \u043e\u0433\u0440\u0430\u043d\u043a\u0438 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b. <\/p>\n<p>\u0414\u043b\u044f pandas \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a <\/p>\n<pre><code>h = df.groupby(['cut'], as_index=False, sort=False)['carat'].count()<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043f\u043b\u0435\u0442\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e<\/p>\n<pre><code>def update_output(value):     if value == 'cut':         h = df.groupby(['cut'], as_index=False, sort=False)['carat'].count()     elif value == 'clarity':         h = df.groupby(['clarity'], as_index=False, sort=False)['carat'].count()     elif value == 'color':         h = df.groupby(['color'], as_index=False, sort=False)['carat'].count()     fig = px.bar(h, x=value, y=\"carat\", labels = {\"carat\" : \"Count\"} )      return fig<\/code><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u0442\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0435. <\/p>\n<p>\u0410 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f fig \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443 <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u043d\u0430\u0441 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 <\/p>\n<pre><code>import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd from dash.dependencies import Input, Output    app = dash.Dash(__name__) df  = pd.read_csv('C:\/\/Users\/\/User\/\/Desktop\/\/\u0423\u0447\u0435\u0431\u0430\/\/diam.csv',sep = ';')     app.layout = html.Div(children=[         html.Div(         children=[             html.H1(children='Analysis diamonds dataset', className= 'header-title'),                html.P(children='maybe this demo will be useful to someone (:', className= 'header-description')                 ], className= 'header'),       #html.Label('\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e'),     html.Div([         dcc.Dropdown(             id='demo_drop',             options=[                 {'label': '\u041e\u0433\u0440\u0430\u043d\u043a\u0430', 'value': 'cut'},                 {'label': '\u042f\u0441\u043d\u043e\u0441\u0442\u044c(\u0447\u0438\u0441\u0442\u043e\u0442\u0430)', 'value': 'clarity'},                 {'label': '\u0426\u0432\u0435\u0442', 'value': 'color'}             ],             value='cut', className=\"dropdown\"         ),  dcc.Graph(id='output_graph')],className=\"card\")   ]) @app.callback(     Output(component_id='output_graph', component_property='figure'),     [Input(component_id='demo_drop', component_property='value')] ) def update_output(value):     if value == 'cut':         h = df.groupby(['cut'], as_index=False, sort=False)['carat'].count()     elif value == 'clarity':         h = df.groupby(['clarity'], as_index=False, sort=False)['carat'].count()     elif value == 'color':         h = df.groupby(['color'], as_index=False, sort=False)['carat'].count()     fig = px.bar(h, x=value, y=\"carat\", labels = {\"carat\" : \"Count\"} )     return fig   if __name__ == '__main__':     app.run_server(debug=True)<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u044f \u0441\u043c\u043e\u0433 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u0432 \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/588645\/\"> https:\/\/habr.com\/ru\/articles\/588645\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-390077","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/390077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=390077"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/390077\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=390077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=390077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=390077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}