{"id":312516,"date":"2020-11-03T21:01:00","date_gmt":"2020-11-03T21:01:00","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=312516"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=312516","title":{"rendered":"\u0420\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 Flask \u0438 Bokeh"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/526076\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/1v\/6e\/g8\/1v6eg8it-cqo2m_69gyc1tampti.png\" alt=\"image\"><\/a><\/p>\n<p>  \u0421\u0435\u0433\u043e\u0434\u043d\u044f, \u0432 \u043f\u0440\u0435\u0434\u0434\u0432\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 <a href=\"https:\/\/skillfactory.ru\/python-for-web-developers?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_PWS&amp;utm_term=regular&amp;utm_content=031020\"><b>\u043a\u0443\u0440\u0441\u0430 \u00abPython \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb<\/b><\/a>, \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u043b\u044f \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0438\u043b\u044c\u043c\u0430\u0445. \u0410\u0432\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Flask \u0438 Bokeh, \u043d\u043e \u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0447\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 easybase.io. \u0412\u0441\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<hr>\n<p>  Python \u0438\u043c\u0435\u0435\u0442 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0430\u043d\u0430\u043b\u0438\u0437\u0430: NumPy, SciPy, pandas, Dask, Scikit-Learn, OpenCV \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445. \u0418\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f Python <a href=\"https:\/\/bokeh.org\/\">Bokeh<\/a> \u043f\u0440\u0435\u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043a\u0430\u043a \u0441\u0430\u043c\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u043e\u0449\u043d\u0430\u044f. \u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/demo.bokeh.org\/\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e<\/a> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041e\u0434\u043d\u0430 \u0438\u0437 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 Bokeh \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0432 \u0432\u0438\u0434\u0435 \u0441\u044b\u0440\u044b\u0445 HTML \u0438 JavaScript. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0440\u0438\u0441\u0443\u043d\u043a\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <a href=\"https:\/\/flask.palletsprojects.com\/en\/1.1.x\/\">Flask<\/a>. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Flask, \u0440\u0438\u0441\u0443\u043d\u043a\u0438 Bokeh \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 HTML-\u043a\u043e\u0434 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. <\/p>\n<p>  \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0438\u043b\u044c\u043c\u0430\u0445. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0438, \u043c\u0435\u043d\u044e), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412\u043e\u0442, \u0447\u0435\u043c\u0443 \u043d\u0430\u0443\u0447\u0438\u0442 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f:<\/p>\n<ol>\n<li>\u041a\u0430\u043a \u0432 Bokeh \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u044f\u0442\u044c\u044e \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<li>\u041a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0431\u043b\u0430\u0447\u043d\u0443\u044e \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0442\u0440\u0435\u043c\u044f \u0442\u044b\u0441\u044f\u0447\u0430\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 (<a href=\"http:\/\/easybase.io\/\">Easybase.io<\/a>).<\/li>\n<li>\u041a\u0430\u043a \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043e\u043a Bokeh \u0432 \u0448\u0430\u0431\u043b\u043e\u043d Flask.<\/li>\n<li>\u041a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 JavaScript (<code>CustomJS<\/code>) \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b Bokeh, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/li>\n<\/ol>\n<p>  <font color=\"#09b744\"><\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f<\/h2>\n<p><\/font><br \/>  \u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430: <\/p>\n<pre><code class=\"bash\">pip install bokeh  pip install Flask <\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>app.py<\/code> \u0438 \u043d\u0430\u0447\u043d\u0438\u0442\u0435 \u0441 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"python\">from bokeh.models import ColumnDataSource from bokeh.plotting import figure, output_file, show  source = ColumnDataSource()  fig = figure(plot_height=600, plot_width=720, tooltips=[(&quot;Title&quot;, &quot;@title&quot;), (&quot;Released&quot;, &quot;@released&quot;)]) fig.circle(x=&quot;x&quot;, y=&quot;y&quot;, source=source, size=8, color=&quot;color&quot;, line_color=None) fig.xaxis.axis_label = &quot;IMDB Rating&quot; fig.yaxis.axis_label = &quot;Rotten Tomatoes Rating&quot; <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>source<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Bokeh \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c. \u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0440\u0438\u0441\u0443\u043d\u043a\u0443 Bokeh. \u042d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0439 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>CustomJS<\/code>. <\/p>\n<p>  \u0417\u0430\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e <code>fig<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Bokeh. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>tooltips<\/code> \u0437\u0430\u0434\u0430\u0435\u0442 \u043d\u0430\u0434\u043f\u0438\u0441\u044c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u0443\u044e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043d\u0430 \u0442\u043e\u0447\u043a\u0443 \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u0440\u0442\u0435\u0436\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a: <code>(&quot;NAME TO DISPLAY&quot;, &quot;@COLUMN_NAME_IN_SOURCE&quot;)<\/code>. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435, \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>size<\/code> \u0432 <code>fig.circle()<\/code>. \u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <code>x<\/code>, <code>y<\/code> \u0438 <code>color<\/code> \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438: \u043f\u043e\u0437\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u0442\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>axis_label<\/code> \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0442\u043a\u0438 \u043e\u0441\u0435\u0439 X \u0438 Y. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0441\u044c X \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0444\u0438\u043b\u044c\u043c\u0430 \u0432 IMDB, \u043e\u0441\u044c Y \u2014 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 Rotten Tomatoes. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e (\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e) \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u0440\u0440\u0435\u043b\u044f\u0446\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0438 \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<pre><code class=\"python\">currMovies = [     {'imdbid': 'tt0099878', 'title': 'Jetsons: The Movie', 'genre': 'Animation, Comedy, Family', 'released': '07\/06\/1990', 'imdbrating': 5.4, 'imdbvotes': 2731, 'country': 'USA', 'numericrating': 4.3, 'usermeter': 46},     {'imdbid': 'tt0099892', 'title': 'Joe Versus the Volcano', 'genre': 'Comedy, Romance', 'released': '03\/09\/1990', 'imdbrating': 5.6, 'imdbvotes': 23680, 'country': 'USA', 'numericrating': 5.2, 'usermeter': 54},     {'imdbid': 'tt0099938', 'title': 'Kindergarten Cop', 'genre': 'Action, Comedy, Crime', 'released': '12\/21\/1990', 'imdbrating': 5.9, 'imdbvotes': 83461, 'country': 'USA', 'numericrating': 5.1, 'usermeter': 51},     {'imdbid': 'tt0099939', 'title': 'King of New York', 'genre': 'Crime, Thriller', 'released': '09\/28\/1990', 'imdbrating': 7, 'imdbvotes': 19031, 'country': 'Italy, USA, UK', 'numericrating': 6.1, 'usermeter': 79},     {'imdbid': 'tt0099951', 'title': 'The Krays', 'genre': 'Biography, Crime, Drama', 'released': '11\/09\/1990', 'imdbrating': 6.7, 'imdbvotes': 4247, 'country': 'UK', 'numericrating': 6.4, 'usermeter': 82} ]  source.data = dict(     x = [d['imdbrating'] for d in currMovies],     y = [d['numericrating'] for d in currMovies],     color = [&quot;#FF9900&quot; for d in currMovies],     title = [d['title'] for d in currMovies],     released = [d['released'] for d in currMovies],     imdbvotes = [d['imdbvotes'] for d in currMovies],     genre = [d['genre'] for d in currMovies] )  output_file(&quot;graph.html&quot;) show(fig)<\/code><\/pre>\n<p>  \u0414\u043e <strong>\u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/strong> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u043f\u044f\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u0435\u0439, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0444\u0438\u043b\u044c\u043c\u0430\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c 3000 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0438\u0437 EasyBase \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 <code>source.data<\/code> \u2014 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 Bokeh \u043d\u0430 \u0442\u043e, \u0433\u0434\u0435 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0442\u043e, \u043a\u0430\u043a \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c. \u041a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u044d\u0442\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043b\u043e\u0432\u0430\u0440\u044c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u041f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0434\u043b\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u043d\u043e, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 Bokeh: <code>x<\/code>, <code>y<\/code> \u0438 <code>color<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434 <code>circle()<\/code>, \u0430 <code>title<\/code> \u0438 <code>genre<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 (\u043f\u043e\u0437\u0436\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <code>released<\/code>, <code>imdbvotes<\/code> \u0438 <code>genre<\/code>). \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0446\u0432\u0435\u0442 \u0442\u043e\u0447\u0435\u043a \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u0438\u043b\u0441\u044f \u0441 \u0436\u0430\u043d\u0440\u043e\u043c, \u0432\u043e\u0442 \u043a\u043e\u0434: <code>color = [&quot;#FF9900&quot; for d in currMovies]<\/code>, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0442\u0430\u043a: <code>color = [&quot;#008800&quot;, if d['genre'] == &quot;drama&quot; else &quot;#FF9900&quot; for d in curMovies]<\/code>. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, <code>output_file<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0437\u0434\u043d\u0438\u0435 \u0440\u0438\u0441\u0443\u043d\u043a\u0438. <code>show(fig)<\/code> \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u2014 \u0438 \u0432\u043e\u0442, \u0447\u0442\u043e \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/as\/z0\/c5\/asz0c5tdx9n8vr_tp9rfqybeqk0.png\" alt=\"chart plotting IMDB and Rotten Tomatoes ratings of movie titles\"><\/p>\n<p>  \u041f\u043e\u043a\u0430 \u0432\u0441\u0451 \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440 \u043c\u044b\u0448\u0438 \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0444\u0438\u043b\u044c\u043c\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 <code>tooltips<\/code>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0430\u043d\u043e\u0440\u0430\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <font color=\"#09b744\"><\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c \u0432\u0442\u043e\u0440\u0430\u044f<\/h2>\n<p><\/font><br \/>  \u0412\u043e\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 <a href=\"https:\/\/bit.ly\/3lXvOnE\">CSV-\u0444\u0430\u0439\u043b<\/a> \u0441 \u0442\u0440\u0435\u043c\u044f \u0442\u044b\u0441\u044f\u0447\u0430\u043c\u0438 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0444\u0438\u043b\u044c\u043c\u043e\u0432 \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438, \u0447\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0438\u043c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438 \u0438\u0437 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430. \u042f \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c <a href=\"http:\/\/easybase.io\">easybase.io<\/a> \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c <a href=\"https:\/\/easybase.io\/about\/\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0444\u0430\u0439\u043b\u0430 CSV \u0438\u043b\u0438 JSON. \u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 EasyBase \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c\u0438 (\u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435):<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_o\/hc\/gh\/_ohcghlt_11ffq_xl5jnd0efgim.png\"><\/p>\n<p>  \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 <b>+<\/b> \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043a \u044d\u043a\u0440\u0430\u043d\u0443 \u00abupload data\u00bb.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-t\/va\/ys\/-tvaysgrelqwwsd8ld9gd1wkfig.gif\"><\/p>\n<p>  \u041f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043b CSV \u0432 \u044d\u0442\u043e \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mj\/wk\/x3\/mjwkx3sryftt8lhyvppsfsjtkm0.png\"><\/p>\n<p>  \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 CSV \u0438\u043b\u0438 JSON \u0438\u0437 EasyBase, \u0432\u044b\u0431\u0440\u0430\u0432 \u0432\u0441\u0451 (\u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 +) \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u044f \u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u00abshare\u00bb.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 Integrate \u2192 REST \u2192 GET. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0432\u043e\u044e \u043d\u043e\u0432\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0432 Get, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432\u0441\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u044b. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u0441\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438. \u041c\u043e\u0435 \u043e\u043a\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jg\/sw\/dp\/jgswdpvx5_4nvqs0p9dsyxsm7ou.gif\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0432\u0430\u0448 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <font color=\"#09b744\"><\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c \u0442\u0440\u0435\u0442\u044c\u044f<\/h2>\n<p><\/font><br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 Flask. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u0444\u0430\u0439\u043b\u043e\u043c <code>app.py<\/code>. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>template<\/code>, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>index.html<\/code>.<\/p>\n<pre><code class=\"plaintext\">project \u251c\u2500\u2500 templates \u2502   \u2514\u2500\u2500 index.html \u2514\u2500\u2500 app.py <\/code><\/pre>\n<p>  \u0412 \u0444\u0430\u0439\u043b\u0435 <code>app.py<\/code> \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Flask:<\/p>\n<pre><code class=\"python\"> from flask import Flask, render_template  app = Flask(__name__)  @app.route('\/') def index():     return render_template('index.html')  if __name__ == &quot;__main__&quot;:     app.run(debug=True) <\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>export FLASK_APP=app.py &amp;&amp; flask run<\/code> \u043d\u0430 Mac \u0438\u043b\u0438 <code>set FLASK_APP=app.py &amp;&amp; flask run<\/code> \u043d\u0430 Windows, \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:5000<\/code>, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 <code>templates\/index.html<\/code>. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>index.html<\/code> \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;title&gt;Document&lt;\/title&gt;     {{ js_resources|indent(4)|safe }}     {{ css_resources|indent(4)|safe }}     {{ plot_script|indent(4)|safe }} &lt;\/head&gt; &lt;body&gt;     &lt;h1 style=&quot;text-align: center; margin-bottom: 40px;&quot;&gt;Flask + Bokeh + EasyBase.io&lt;\/h2&gt;     &lt;div style=&quot;display: flex; justify-content: center;&quot;&gt;         {{ plot_div|indent(4)|safe }}     &lt;\/div&gt; &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u0442\u0435\u043a\u0443\u0447\u0438\u043c\u0438 [\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432. \u2014 \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u0442\u0435\u043a\u0443\u0447\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432\u00bb, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 <a href=\"https:\/\/www.youtube.com\/watch?v=DHB8OI9zx2I\">\u043e\u0431 \u044d\u0442\u043e\u043c \u0432\u0438\u0434\u0435\u043e<\/a>] \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438: <code>js_resources<\/code>, <code>css_resources<\/code>, <code>plot_script<\/code> \u0438 <code>plot_div<\/code>. Bokeh \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432 \u044d\u0442\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u0434 \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441 <code>app.py<\/code>. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/p>\n<pre><code class=\"python\">from flask import Flask, render_template from easybase import get from bokeh.models import ColumnDataSource, Div, Select, Slider, TextInput from bokeh.io import curdoc from bokeh.resources import INLINE from bokeh.embed import components from bokeh.plotting import figure, output_file, show <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043a\u043e\u0434 \u0438\u0437 <strong>\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/strong> \u0432 \u043c\u0435\u0442\u043e\u0434 <code>index()<\/code> \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0437\u043e\u0432\u043e\u043c <code>return render_template(&quot;index.html&quot;)<\/code>. \u042f \u0437\u0430\u043c\u0435\u043d\u044e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0444\u0438\u043b\u044c\u043c\u043e\u0432 \u0432\u044b\u0437\u043e\u0432\u043e\u043c <code>get ()<\/code> \u0432 EasyBase. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 EasyBase, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0435\u0435 \u0442\u0430\u043a: <code>pip easybase-python<\/code>. \u042f \u0437\u0430\u043c\u0435\u043d\u044f\u044e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 <strong>\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/strong> \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"python\">def selectedMovies():     res = get(&quot;Dt-p-a0jVTBSVQji&quot;, 0, 3000, &quot;password&quot;)     return res    # ...  currMovies = selectedMovies()<\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>get()<\/code> \u2014 \u044d\u0442\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u043f\u043e\u0441\u043b\u0435 \u0438\u0434\u0443\u0442 <code>offset<\/code>, <code>length<\/code> \u0438 <code>authentication<\/code>.<\/p>\n<p>  <strong>\u041a\u0430\u043a \u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u0435\u0439. \u0423 \u044d\u0442\u0438\u0445 \u0441\u043b\u043e\u0432\u0430\u0440\u0435\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0442\u0435 \u0436\u0435, \u0447\u0442\u043e \u0438 \u0440\u0430\u043d\u044c\u0448\u0435.<\/strong><\/p>\n<p>  \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>index()<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u043c <code>return render_template(&quot;index.html&quot;)<\/code> \u0432\u043e\u0442 \u044d\u0442\u0438\u043c \u043a\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"python\">script, div = components(fig) return render_template(     'index.html',     plot_script=script,     plot_div=div,     js_resources=INLINE.render_js(),     css_resources=INLINE.render_css(), ).encode(encoding='UTF-8') <\/code><\/pre>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<ul>\n<li><code>plot_script<\/code>: JavaScript \u0440\u0438\u0441\u0443\u043d\u043a\u0430<\/li>\n<li><code>plot_div<\/code>: HTML \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 div<\/li>\n<li><code>js_resources<\/code>: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439 Boken JavaScript<\/li>\n<li><code>css_resources<\/code>: \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439 Bokeh CSS<\/li>\n<\/ul>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c <code>app.py<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"python\">from flask import Flask, render_template from easybase import get from bokeh.models import ColumnDataSource, Div, Select, Slider, TextInput from bokeh.io import curdoc from bokeh.resources import INLINE from bokeh.embed import components from bokeh.plotting import figure, output_file, show  app = Flask(__name__)  @app.route('\/') def index():     def selectedMovies():         res = get(&quot;Dt-p-a0jVTBSVQji&quot;, 0, 3000, &quot;password&quot;)         return res          source = ColumnDataSource()      fig = figure(plot_height=600, plot_width=720, tooltips=[(&quot;Title&quot;, &quot;@title&quot;), (&quot;Released&quot;, &quot;@released&quot;)])     fig.circle(x=&quot;x&quot;, y=&quot;y&quot;, source=source, size=5, color=&quot;color&quot;, line_color=None)     fig.xaxis.axis_label = &quot;IMDB Rating&quot;     fig.yaxis.axis_label = &quot;Rotten Tomatoes Rating&quot;      currMovies = selectedMovies()      source.data = dict(         x = [d['imdbrating'] for d in currMovies],         y = [d['numericrating'] for d in currMovies],         color = [&quot;#FF9900&quot; for d in currMovies],         title = [d['title'] for d in currMovies],         released = [d['released'] for d in currMovies],         imdbvotes = [d['imdbvotes'] for d in currMovies],         genre = [d['genre'] for d in currMovies]     )      script, div = components(fig)     return render_template(         'index.html',         plot_script=script,         plot_div=div,         js_resources=INLINE.render_js(),         css_resources=INLINE.render_css(),     ).encode(encoding='UTF-8')  if __name__ == &quot;__main__&quot;:     app.run(debug=True) <\/code><\/pre>\n<p>  \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>export FLASK_APP=app.py &amp;&amp; flask run<\/code> \u043d\u0430 Mac \u0438\u043b\u0438 <code>set FLASK_APP=app.py &amp;&amp; flask run<\/code> \u043d\u0430 Windows. \u0412\u0430\u0448 \u0441\u0430\u0439\u0442 \u043d\u0430 <code>localhost:5000<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gx\/gw\/ce\/gxgwce3kixdtthd5xprcyxqds70.png\"><\/p>\n<p>  <font color=\"#09b744\"><\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f<\/h2>\n<p><\/font><br \/>  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u0430\u044f Flask \u043c\u043e\u0434\u0435\u043b\u044c Bokeh. \u041a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043c\u043e\u0433\u0443\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043a\u0430\u0441\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u0430 <code>index()<\/code>. \u042f \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0439. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"python\">genre_list = ['All', 'Comedy', 'Sci-Fi', 'Action', 'Drama', 'War', 'Crime', 'Romance', 'Thriller', 'Music', 'Adventure', 'History', 'Fantasy', 'Documentary', 'Horror', 'Mystery', 'Family', 'Animation', 'Biography', 'Sport', 'Western', 'Short', 'Musical']  controls = {     &quot;reviews&quot;: Slider(title=&quot;Min # of reviews&quot;, value=10, start=10, end=200000, step=10),     &quot;min_year&quot;: Slider(title=&quot;Start Year&quot;, start=1970, end=2021, value=1970, step=1),     &quot;max_year&quot;: Slider(title=&quot;End Year&quot;, start=1970, end=2021, value=2021, step=1),     &quot;genre&quot;: Select(title=&quot;Genre&quot;, value=&quot;All&quot;, options=genre_list) }  controls_array = controls.values() <\/code><\/pre>\n<p>  \u041c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u0440\u0438 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0438 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e. \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e <a href=\"https:\/\/docs.bokeh.org\/en\/latest\/docs\/user_guide\/interaction\/widgets.html\">\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043b\u044e\u0431\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b<\/a> \u0432 \u044d\u0442\u043e\u0442 \u0441\u043b\u043e\u0432\u0430\u0440\u044c. \u0410 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0443\u043b\u044f Bokeh <code>CustomJS<\/code>. \u0427\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0439, \u043d\u043e \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430:<\/p>\n<pre><code class=\"javascript\">callback = CustomJS(args=dict(source=source, controls=controls), code=&quot;&quot;&quot;     if (!window.full_data_save) {         window.full_data_save = JSON.parse(JSON.stringify(source.data));     }     var full_data = window.full_data_save;     var full_data_length = full_data.x.length;     var new_data = { x: [], y: [], color: [], title: [], released: [], imdbvotes: [] }     for (var i = 0; i &lt; full_data_length; i++) {         if (full_data.imdbvotes[i] === null || full_data.released[i] === null || full_data.genre[i] === null)             continue;         if (             full_data.imdbvotes[i] &gt; controls.reviews.value &amp;&amp;             Number(full_data.released[i].slice(-4)) &gt;= controls.min_year.value &amp;&amp;             Number(full_data.released[i].slice(-4)) &lt;= controls.max_year.value &amp;&amp;             (controls.genre.value === 'All' || full_data.genre[i].split(&quot;,&quot;).some(ele =&gt; ele.trim() === controls.genre.value))         ) {             Object.keys(new_data).forEach(key =&gt; new_data[key].push(full_data[key][i]));         }     }     source.data = new_data;     source.change.emit(); &quot;&quot;&quot;) <\/code><\/pre>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>code<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0418 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043d\u0430 \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438: <code>source<\/code> (\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435) \u0438 <code>controls<\/code> (\u0441\u043b\u043e\u0432\u0430\u0440\u044c <code>controls<\/code>). \u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c <code>code<\/code> \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f JavaScript \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>full_data_save<\/code>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u043a\u043e\u043f\u0438\u044e \u043d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0438\u0445 \u0432 \u044d\u0442\u043e\u0439 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c <code>full_data_save<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>new_data<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u0444\u043e\u0440\u043c\u0430\u0442, \u0447\u0442\u043e \u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b \u043f\u043e \u0432\u0441\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0442\u043e\u0433\u043e, \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442 \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>controls.*control_name*.value<\/code>, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b <code>CustomJS<\/code>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>released<\/code> \u0438\u043c\u0435\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 MM-DD-YYYY, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0441 <code>min_year<\/code> \u0438 <code>max_year<\/code> (\u0441\u0442\u0440\u043e\u043a\u0438 17-18), \u044f \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0432\u0441\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043e\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 <code>new_data<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u043d\u0438\u0436\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"javascript\"> Object.keys(new_data).forEach(key =&gt; new_data[key].push(full_data[key][i])); <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>full_data<\/code> \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 <code>i<\/code> \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 <code>new_data<\/code>. \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0446\u0438\u043a\u043b\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>source.change.emit()<\/code>. \u042f \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0434 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u044c <code>controls<\/code>.<\/li>\n<li>\u0412\u043d\u0443\u0442\u0440\u0438 <code>CustomJS<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u043c\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 15.<\/li>\n<\/ol>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0446\u0438\u043a\u043b\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"python\">for single_control in controls_array:     single_control.js_on_change('value', callback)<\/code><\/pre>\n<p>  \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 <code><a href=\"https:\/\/docs.bokeh.org\/en\/latest\/docs\/user_guide\/layout.html\">layout<\/a><\/code>. \u0417\u0430\u043c\u0435\u043d\u0438\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 <code>script, div = components(fig)<\/code> \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"python\">         inputs_column = column(*controls_array, width=320, height=1000)     layout_row = row([ inputs_column, fig ])          script, div = components(layout_row) <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>input_controls<\/code>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0430 <code>input_controls<\/code> \u0438 \u0440\u0438\u0441\u0443\u043d\u043e\u043a. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043c\u0435\u0442\u043e\u0434 <code>components()<\/code>, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u0440\u0438\u0441\u0443\u043d\u043e\u043a. \u0418 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/l8\/s4\/5q\/l8s45qmp0wgf5kn8marnsf5f5j8.gif\"><\/p>\n<p>  <font color=\"#09b744\"><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p><\/font><br \/>  \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 <a href=\"https:\/\/docs.bokeh.org\/en\/latest\/index.html\">Bokeh<\/a> \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u043c\u0438 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438 \u043d\u0430 JavaScript. \u041e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432. Python \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0442\u044b\u0441\u044f\u0447\u0438 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0438\u0437 Easybase.io \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u043a\u0435\u0442\u0430 <code>easybase-python<\/code>, \u0438 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0435 Flask. <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0430\u0448\u0443 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Flask. \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Bokeh \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438! \u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438. \u041d\u0438\u0436\u0435 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432\u0435\u0441\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 <code>app.py<\/code>:<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u0440\u043e\u0441\u0442\u044b\u043d\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"python\">from flask import Flask, render_template from easybase import get from bokeh.models import ColumnDataSource, Select, Slider from bokeh.resources import INLINE from bokeh.embed import components from bokeh.plotting import figure from bokeh.layouts import column, row from bokeh.models.callbacks import CustomJS  app = Flask(__name__)  @app.route('\/') def index():          genre_list = ['All', 'Comedy', 'Sci-Fi', 'Action', 'Drama', 'War', 'Crime', 'Romance', 'Thriller', 'Music', 'Adventure', 'History', 'Fantasy', 'Documentary', 'Horror', 'Mystery', 'Family', 'Animation', 'Biography', 'Sport', 'Western', 'Short', 'Musical']      controls = {         &quot;reviews&quot;: Slider(title=&quot;Min # of reviews&quot;, value=10, start=10, end=200000, step=10),         &quot;min_year&quot;: Slider(title=&quot;Start Year&quot;, start=1970, end=2021, value=1970, step=1),         &quot;max_year&quot;: Slider(title=&quot;End Year&quot;, start=1970, end=2021, value=2021, step=1),         &quot;genre&quot;: Select(title=&quot;Genre&quot;, value=&quot;All&quot;, options=genre_list)     }      controls_array = controls.values()      def selectedMovies():         res = get(&quot;Dt-p-a0jVTBSVQji&quot;, 0, 2000, &quot;password&quot;)         return res      source = ColumnDataSource()      callback = CustomJS(args=dict(source=source, controls=controls), code=&quot;&quot;&quot;         if (!window.full_data_save) {             window.full_data_save = JSON.parse(JSON.stringify(source.data));         }         var full_data = window.full_data_save;         var full_data_length = full_data.x.length;         var new_data = { x: [], y: [], color: [], title: [], released: [], imdbvotes: [] }         for (var i = 0; i &lt; full_data_length; i++) {             if (full_data.imdbvotes[i] === null || full_data.released[i] === null || full_data.genre[i] === null)                 continue;             if (                 full_data.imdbvotes[i] &gt; controls.reviews.value &amp;&amp;                 Number(full_data.released[i].slice(-4)) &gt;= controls.min_year.value &amp;&amp;                 Number(full_data.released[i].slice(-4)) &lt;= controls.max_year.value &amp;&amp;                 (controls.genre.value === 'All' || full_data.genre[i].split(&quot;,&quot;).some(ele =&gt; ele.trim() === controls.genre.value))             ) {                 Object.keys(new_data).forEach(key =&gt; new_data[key].push(full_data[key][i]));             }         }                  source.data = new_data;         source.change.emit();     &quot;&quot;&quot;)      fig = figure(plot_height=600, plot_width=720, tooltips=[(&quot;Title&quot;, &quot;@title&quot;), (&quot;Released&quot;, &quot;@released&quot;)])     fig.circle(x=&quot;x&quot;, y=&quot;y&quot;, source=source, size=5, color=&quot;color&quot;, line_color=None)     fig.xaxis.axis_label = &quot;IMDB Rating&quot;     fig.yaxis.axis_label = &quot;Rotten Tomatoes Rating&quot;      currMovies = selectedMovies()      source.data = dict(         x = [d['imdbrating'] for d in currMovies],         y = [d['numericrating'] for d in currMovies],         color = [&quot;#FF9900&quot; for d in currMovies],         title = [d['title'] for d in currMovies],         released = [d['released'] for d in currMovies],         imdbvotes = [d['imdbvotes'] for d in currMovies],         genre = [d['genre'] for d in currMovies]     )      for single_control in controls_array:         single_control.js_on_change('value', callback)      inputs_column = column(*controls_array, width=320, height=1000)     layout_row = row([ inputs_column, fig ])      script, div = components(layout_row)     return render_template(         'index.html',         plot_script=script,         plot_div=div,         js_resources=INLINE.render_js(),         css_resources=INLINE.render_css(),     )  if __name__ == &quot;__main__&quot;:     app.run(debug=True)<\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  <em>\u0415\u0441\u043b\u0438 \u0442\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0448\u044c \u0435\u0433\u043e \u2014 \u043e\u043d\u0438 \u043f\u0440\u0438\u0434\u0443\u0442.<\/em> [\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432. \u041e\u0442\u0441\u044b\u043b \u043d\u0430 \u0444\u0440\u0430\u0437\u0443 \u0438\u0437 \u0444\u0438\u043b\u044c\u043c\u0430 \u041a\u0435\u0432\u0438\u043d\u0430 \u041a\u043e\u0441\u0442\u043d\u0435\u0440\u0430 \u00ab\u041f\u043e\u043b\u0435 \u0447\u0443\u0434\u0435\u0441\u00bb: \u00ab\u0415\u0441\u043b\u0438 \u0442\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0448\u044c \u0435\u0433\u043e \u2014 \u043e\u043d \u043f\u0440\u0438\u0434\u0435\u0442\u00bb].<\/p>\n<p>  \u041d\u0430 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439 \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0438 \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0444\u0435\u0440\u0443 \u0438\u043b\u0438 \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043a\u0432\u0430\u043b\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u2014 \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434 <b>HABR<\/b> \u0434\u0430\u0441\u0442 \u0432\u0430\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 10% \u043a \u0441\u043a\u0438\u0434\u043a\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u0431\u0430\u043d\u043d\u0435\u0440\u0435.<\/p>\n<p>  <a href=\"https:\/\/skillfactory.ru\/?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_banner&amp;utm_term=regular&amp;utm_content=habr_banner\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dj\/y7\/u-\/djy7u-wo--pcxif3dx1pdygtgjg.jpeg\" alt=\"image\"><\/div>\n<p><\/a><\/p>\n<ul>\n<li><a href=\"https:\/\/skillfactory.ru\/python-for-web-developers?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_PWS&amp;utm_term=regular&amp;utm_content=031020\">\u041a\u0443\u0440\u0441 \u00abPython \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/dstpro?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DSPR&amp;utm_term=regular&amp;utm_content=031020\">\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0438 Data Science<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/dataanalystpro?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DAPR&amp;utm_term=regular&amp;utm_content=031020\">\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0438 Data Analyst<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/business-analytics-camp?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DACAMP&amp;utm_term=regular&amp;utm_content=031020\">\u041e\u043d\u043b\u0430\u0439\u043d-\u0431\u0443\u0442\u043a\u0435\u043c\u043f \u043f\u043e Data Analytics<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">E\u0449\u0435 \u043a\u0443\u0440\u0441\u044b<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<ul>\n<li><a href=\"https:\/\/skillfactory.ru\/javascript?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FJS&amp;utm_term=regular&amp;utm_content=031020\">\u041a\u0443\u0440\u0441 \u043f\u043e JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/java?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_JAVA&amp;utm_term=regular&amp;utm_content=031020\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Java-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/sql?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_SQL&amp;utm_term=regular&amp;utm_content=031020\">SQL \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/cplus?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_CPLUS&amp;utm_term=regular&amp;utm_content=031020\">C++ \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/analytics?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_SDA&amp;utm_term=regular&amp;utm_content=031020\">\u041a\u0443\u0440\u0441 \u043f\u043e \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/devops?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DEVOPS&amp;utm_term=regular&amp;utm_content=031020\">\u041a\u0443\u0440\u0441 \u043f\u043e DevOps<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/webdev?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_WEBDEV&amp;utm_term=regular&amp;utm_content=031020\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/iosdev?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_IOSDEV&amp;utm_term=regular&amp;utm_content=031020\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f iOS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u043d\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/android?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_ANDR&amp;utm_term=regular&amp;utm_content=031020\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u043d\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/ml-programma-machine-learning-online?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_ML&amp;utm_term=regular&amp;utm_content=031020\">\u041a\u0443\u0440\u0441 \u043f\u043e Machine Learning<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/math_and_ml?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_MATML&amp;utm_term=regular&amp;utm_content=031020\">\u041a\u0443\u0440\u0441 \u00ab\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0438 Machine Learning \u0434\u043b\u044f Data Science\u00bb<\/a><\/li>\n<li><a href=\"https:\/\/skillfactory.ru\/ml-and-dl?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_MLDL&amp;utm_term=regular&amp;utm_content=031020\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043a\u0443\u0440\u0441 \u00abMachine Learning Pro + Deep Learning\u00bb<\/a><\/li>\n<\/ul>\n<p>  <\/div>\n<\/p><\/div>\n<p>  <\/p>\n<h2><font color=\"#09b744\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<\/font><\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/507024\">\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c Data Scientist \u0431\u0435\u0437 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u043e\u0432<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/503196\/\">450 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u043a\u0443\u0440\u0441\u043e\u0432 \u043e\u0442 \u041b\u0438\u0433\u0438 \u041f\u043b\u044e\u0449\u0430<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/510444\/\">\u041a\u0430\u043a \u0438\u0437\u0443\u0447\u0430\u0442\u044c Machine Learning 5 \u0434\u043d\u0435\u0439 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e 9 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043f\u043e\u0434\u0440\u044f\u0434<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/520540\/\">\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445: \u043e\u0431\u0437\u043e\u0440 \u0437\u0430\u0440\u043f\u043b\u0430\u0442 \u0438 \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u0439 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438 \u0438 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043e\u043c \u0432 2020<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/522776\/\">Machine Learning \u0438 Computer Vision \u0432 \u0434\u043e\u0431\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/a><\/li>\n<\/ul>\n<\/div>\n<p> \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\/company\/skillfactory\/blog\/526076\/\"> https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/526076\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/526076\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/1v\/6e\/g8\/1v6eg8it-cqo2m_69gyc1tampti.png\" alt=\"image\"><\/a><\/p>\n<p>  \u0421\u0435\u0433\u043e\u0434\u043d\u044f, \u0432 \u043f\u0440\u0435\u0434\u0434\u0432\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 <a href=\"https:\/\/skillfactory.ru\/python-for-web-developers?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_PWS&amp;utm_term=regular&amp;utm_content=031020\"><b>\u043a\u0443\u0440\u0441\u0430 \u00abPython \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb<\/b><\/a>, \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u043b\u044f \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0438\u043b\u044c\u043c\u0430\u0445. \u0410\u0432\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Flask \u0438 Bokeh, \u043d\u043e \u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0447\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 easybase.io. \u0412\u0441\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c.  <\/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-312516","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312516","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=312516"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312516\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=312516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=312516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=312516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}