{"id":413630,"date":"2024-06-29T23:14:34","date_gmt":"2024-06-29T23:14:34","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=413630"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=413630","title":{"rendered":"<span>\u041f\u0438\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Python \u0434\u043b\u044f \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 \u0433\u0440\u0430\u0444\u043e\u0432 \u0441 NetworkX, Plotly \u0438 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>\u0413\u043e\u0432\u043e\u0440\u044f\u0442, \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043b\u0443\u0447\u0448\u0435 \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u043b\u043e\u0432 \u043e \u043d\u0438\u0445, \u0438 \u0441 \u044d\u0442\u0438\u043c \u0442\u0440\u0443\u0434\u043d\u043e \u0441\u043f\u043e\u0440\u0438\u0442\u044c. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b64\/e09\/ac2\/b64e09ac25db8164b172321e6f81e686.png\" alt=\"\u041f\u0440\u043e\u043c\u043f\u0442: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0431\u0435\u043b\u043e\u043c \u0444\u043e\u043d\u0435\" title=\"\u041f\u0440\u043e\u043c\u043f\u0442: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0431\u0435\u043b\u043e\u043c \u0444\u043e\u043d\u0435\" width=\"767\" height=\"767\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b64\/e09\/ac2\/b64e09ac25db8164b172321e6f81e686.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u043e\u043c\u043f\u0442: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0431\u0435\u043b\u043e\u043c \u0444\u043e\u043d\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Python \u0434\u043b\u044f \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 \u0433\u0440\u0430\u0444\u043e\u0432. \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u2014 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438, \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f NetworkX, Plotly \u0438 Dash, \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u0434.<\/p>\n<h2>1. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0433\u0440\u0430\u0444\u043e\u0432<\/h2>\n<p>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444 \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0438 \u0430\u043d\u043e\u043c\u0430\u043b\u0438\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0422\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u043e\u0439 \u0441\u0444\u0435\u0440\u0435, \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0444\u0440\u043e\u0434\u0430 \u0438\u043b\u0438 \u043e\u0442\u043c\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u043d\u0435\u0433. \u0414\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0430\u0442\u0430\u0441\u0435\u0442 \u0438\u0437 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0438 \u043d\u0430 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0430 \u0441\u0435\u0442\u0438, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c \u043e \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u044f\u0445).<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430. \u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0446\u0432\u0435\u0442\u0430 \u0440\u0435\u0431\u0435\u0440 \u0433\u0440\u0430\u0444\u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438, \u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0435\u0431\u0440\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0443\u043c\u043c\u044b \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u0435\u0434\u0451\u0442 \u043c\u044b\u0448\u044c \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0438\u043b\u0438 \u0440\u0435\u0431\u0440\u043e \u0433\u0440\u0430\u0444\u0430, \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<h2>2. \u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430<\/h2>\n<p><strong>2.1 \u0422\u0435\u043e\u0440\u0438\u044f \u0433\u0440\u0430\u0444\u043e\u0432 \u0438 NetworkX<\/strong><\/p>\n<p>\u0413\u0440\u0430\u0444, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0435\u0442\u044c \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d (\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u044b-\u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439) \u0438 \u0440\u0451\u0431\u0435\u0440 (\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u0430\u043c\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438). \u0423 \u0432\u0435\u0440\u0448\u0438\u043d \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0442\u0438\u043f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430, \u0430 \u0443 \u0440\u0435\u0431\u0435\u0440 \u2014 \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0438 \u0441\u0443\u043c\u043c\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u0435\u0442\u044c \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0433\u0440\u0430\u0444\u043e\u043c, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u0440\u0435\u0431\u0440\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u043e\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u044f \u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p><a href=\"https:\/\/networkx.org\/documentation\/stable\/\" rel=\"noopener noreferrer nofollow\">NetworkX<\/a> \u2014 \u044d\u0442\u043e Python-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0433\u0440\u0430\u0444\u043e\u0432. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444 \u0432\u0441\u0435\u0433\u043e \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"python\">import networkx as nx import matplotlib.pyplot as plt G = nx.Graph() G.add_edge(1,2) G.add_edge(1,3) nx.draw(G, with_labels=True) plt.show()<\/code><\/pre>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0433\u0440\u0430\u0444\u043e\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435, NetworkX \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 .csv-\u0444\u0430\u0439\u043b\u043e\u0432 (\u0447\u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p><strong>2.2 \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 Plotly<\/strong><\/p>\n<p>\u0414\u043b\u044f Python \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u043d\u0435\u043c\u0430\u043b\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 Matplotlib \u0438 Seaborn, <a href=\"https:\/\/plotly.com\/python\/\" rel=\"noopener noreferrer nofollow\">Plotly <\/a>\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0433\u0440\u0430\u0444\u043e\u0432 \u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 ipywidgets, Plotly \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 Jupyter Notebook.<\/p>\n<p><strong>2.3 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 Dash<\/strong><\/p>\n<p>Jupyter Notebook \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0443 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u043e\u0432 \u0438 data scientist&#8217;\u043e\u0432, \u043d\u043e \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c, \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043b\u0438\u0446\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u044b\u0442 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043e\u0434\u043e\u043c \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043b\u044e\u0431\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. <\/p>\n<p>\u042d\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"https:\/\/plotly.com\/dash\/\" rel=\"noopener noreferrer nofollow\">Dash<\/a>, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. Dash \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0447\u0430\u0441\u0442\u044c\u044e \u043d\u0430 HTML, CSS \u0438 JavaScript \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438. <\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a Dash \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 Flask \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438 React.js \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0443 \u043d\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e Dash \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0441 Plotly, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u043b\u0435\u0433\u043a\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Dash-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<h2>3. \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0436\u0435 \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e!<\/p>\n<p><strong>3.1 \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 Dash \u043b\u0435\u0436\u0438\u0442 Flask, \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436.<\/p>\n<pre><code class=\"python\">import dash import dash_core_components as dcc import dash_html_components as html import networkx as nx import plotly.graph_objs as go import pandas as pd from colour import Color from datetime import datetime from textwrap import dedent as d import json  external_stylesheets = ['https:\/\/codepen.io\/chriddyp\/pen\/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.title = \"Transaction Network\"  if __name__ == '__main__':     app.run_server(debug=True)<\/code><\/pre>\n<p><strong>3.2 \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \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\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 Python-\u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 dash_html_components \u0438 dash_core_components. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/layout\/grid\/\" rel=\"noopener noreferrer nofollow\">Bootstrap grid system<\/a>, \u0430 \u0438\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/dash.plotly.com\/dash-core-components\/rangeslider\" rel=\"noopener noreferrer nofollow\">RangeSlider<\/a> \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dash.plotly.com\/dash-core-components\/input\" rel=\"noopener noreferrer nofollow\">Input<\/a> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e <a href=\"https:\/\/dash.plotly.com\/dash-core-components\/graph\" rel=\"noopener noreferrer nofollow\">Plotly graph<\/a> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f \u0441 \u0433\u0440\u0430\u0444\u043e\u043c \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>Hover box \u0438 Click box \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430\/\u043a\u043b\u0438\u043a\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u0440\u0430\u0444\u0430. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u043d\u0438\u0436\u0435, \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0430 <a href=\"https:\/\/dash.plotly.com\/dash-core-components\/markdown\" rel=\"noopener noreferrer nofollow\">Markdown<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f3c\/cb9\/493\/f3ccb94937ecc984bad58bf28c162b8c.png\" alt=\"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\" title=\"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\" width=\"1386\" height=\"650\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f3c\/cb9\/493\/f3ccb94937ecc984bad58bf28c162b8c.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<pre><code class=\"python\">app.layout = html.Div([     html.Div([html.H1(\"Transaction Network Graph\")],              className=\"row\",              style={'textAlign': \"center\"}),          html.Div(         className=\"row\",         children=[             html.Div(                 className=\"two columns\",                 children=[                     dcc.Markdown(d(\"\"\"                             **Time Range To Visualize**                             Slide the bar to define year range.                             \"\"\")),                     html.Div(                         className=\"twelve columns\",                         children=[                             dcc.RangeSlider(                                 id='my-range-slider',                                 min=2010,                                 max=2019,                                 step=1,                                 value=[2010, 2019],                                 marks={                                     2010: {'label': '2010'},                                     2011: {'label': '2011'},                                     2012: {'label': '2012'},                                     2013: {'label': '2013'},                                     2014: {'label': '2014'},                                     2015: {'label': '2015'},                                     2016: {'label': '2016'},                                     2017: {'label': '2017'},                                     2018: {'label': '2018'},                                     2019: {'label': '2019'}                                 }                             ),                             html.Br(),                             html.Div(id='output-container-range-slider')                         ],                         style={'height': '300px'}                     ),                     html.Div(                         className=\"twelve columns\",                         children=[                             dcc.Markdown(d(\"\"\"                             **Account To Search**                             Input the account to visualize.                             \"\"\")),                             dcc.Input(id=\"input1\", type=\"text\", placeholder=\"Account\"),                             html.Div(id=\"output\")                         ],                         style={'height': '300px'}                     )                 ]             ),             html.Div(                 className=\"eight columns\",                 children=[dcc.Graph(id=\"my-graph\",                                     figure=network_graph(YEAR, ACCOUNT))],             ),             html.Div(                 className=\"two columns\",                 children=[                     html.Div(                         className='twelve columns',                         children=[                             dcc.Markdown(d(\"\"\"                             **Hover Data**                             Mouse over values in the graph.                             \"\"\")),                             html.Pre(id='hover-data', style=styles['pre'])                         ],                         style={'height': '400px'}),                     html.Div(                         className='twelve columns',                         children=[                             dcc.Markdown(d(\"\"\"                             **Click Data**                             Click on points in the graph.                             \"\"\")),                             html.Pre(id='click-data', style=styles['pre'])                         ],                         style={'height': '400px'})                 ]             )         ]     ) ])<\/code><\/pre>\n<p><strong>3.3 \u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a \u043a\u043e\u0434\u0443 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f RangeSlider \u0438\u043b\u0438 Input, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0433\u0440\u0430\u0444, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0440\u0441\u043e\u0440 \u0438\u043b\u0438 \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0438\u043b\u0438 \u0440\u0435\u0431\u0440\u043e \u043d\u0430 \u0433\u0440\u0430\u0444\u0435, HoverBox\/ClickBox \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0443 \u0438\u043b\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/dash.plotly.com\/clientside-callbacks\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b<\/a>.<\/p>\n<pre><code class=\"python\">@app.callback(     dash.dependencies.Output('my-graph', 'figure'),     [dash.dependencies.Input('my-range-slider', 'value'), dash.dependencies.Input('input1', 'value')]) def update_output(value,input1):     YEAR = value     ACCOUNT = input1     return network_graph(value, input1)      @app.callback(     dash.dependencies.Output('hover-data', 'children'),     [dash.dependencies.Input('my-graph', 'hoverData')]) def display_hover_data(hoverData):     return json.dumps(hoverData, indent=2)      @app.callback(     dash.dependencies.Output('click-data', 'children'),     [dash.dependencies.Input('my-graph', 'clickData')]) def display_click_data(clickData):     return json.dumps(clickData, indent=2)<\/code><\/pre>\n<p><strong>3.4 \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430 \u043d\u0430 \u043f\u043e\u043b\u0435 \u0441 NetworkX \u0438 Plotly<\/strong><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430 \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u043e\u043a \u0441 \u0434\u0430\u0442\u0430\u043c\u0438 \u0432 \u043f\u0438\u0442\u043e\u043d\u043e\u0432\u0441\u043a\u0438\u0439 \u0442\u0438\u043f Datetime.<\/p>\n<pre><code class=\"python\">edge1 = pd.read_csv('edge1.csv') node1 = pd.read_csv('node1.csv') edge1['Datetime'] = \"\"  accountSet=set()  for index in range(0,len(edge1)):     edge1['Datetime'][index] = datetime.strptime(edge1['Date'][index], '%d\/%m\/%Y')     if edge1['Datetime'][index].year&lt;yearRange[0] or edge1['Datetime'][index].year>yearRange[1]:         edge1.drop(axis=0, index=index, inplace=True)         continue     accountSet.add(edge1['Source'][index])     accountSet.add(edge1['Target'][index])<\/code><\/pre>\n<p>\u0421\u0442\u0440\u043e\u0438\u043c \u0433\u0440\u0430\u0444 \u0441\u0435\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e NetworkX:<\/p>\n<pre><code class=\"python\">G = nx.from_pandas_edgelist(edge1, 'Source', 'Target', ['Source', 'Target', 'TransactionAmt', 'Date'], create_using=nx.MultiDiGraph()) nx.set_node_attributes(G, node1.set_index('Account')['CustomerName'].to_dict(), 'CustomerName') nx.set_node_attributes(G, node1.set_index('Account')['Type'].to_dict(), 'Type') pos = nx.layout.shell_layout(G, shells) for node in G.nodes:     G.nodes[node]['pos'] = list(pos[node])<\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d:<\/p>\n<pre><code class=\"python\">traceRecode = [] node_trace = go.Scatter(x=[], y=[], hovertext=[], text=[], mode='markers+text', textposition=\"bottom center\",                         hoverinfo=\"text\", marker={'size': 50, 'color': 'LightSkyBlue'})  index = 0 for node in G.nodes():     x, y = G.node[node]['pos']     hovertext = \"CustomerName: \" + str(G.nodes[node]['CustomerName']) + \"&lt;br>\" + \"AccountType: \" + str(         G.nodes[node]['Type'])     text = node1['Account'][index]     node_trace['x'] += tuple([x])     node_trace['y'] += tuple([y])     node_trace['hovertext'] += tuple([hovertext])     node_trace['text'] += tuple([text])     index = index + 1      traceRecode.append(node_trace)<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0440\u0435\u0431\u0440\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Plotly. \u042d\u0442\u043e \u0447\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0431\u044b\u043b\u043e \u0441 \u0432\u0435\u0440\u0448\u0438\u043d\u0430\u043c\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0446\u0432\u0435\u0442 \u0440\u0435\u0431\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 (\u0447\u0435\u043c \u0440\u0430\u043d\u044c\u0448\u0435, \u0442\u0435\u043c \u0441\u0432\u0435\u0442\u043b\u0435\u0435 \u0440\u0435\u0431\u0440\u043e), \u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0435\u0431\u0440\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u043c\u043c\u0435 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 (\u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435, \u0442\u0435\u043c \u0448\u0438\u0440\u0435 \u0440\u0435\u0431\u0440\u043e).<\/p>\n<pre><code class=\"python\">colors = list(Color('lightcoral').range_to(Color('darkred'), len(G.edges()))) colors = ['rgb' + str(x.rgb) for x in colors]  index = 0 for edge in G.edges:     x0, y0 = G.node[edge[0]]['pos']     x1, y1 = G.node[edge[1]]['pos']     weight = float(G.edges[edge]['TransactionAmt']) \/ max(edge1['TransactionAmt']) * 10     trace = go.Scatter(x=tuple([x0, x1, None]), y=tuple([y0, y1, None]),                        mode='lines',                        line={'width': weight},                        marker=dict(color=colors[index]),                        line_shape='spline',                        opacity=1)     traceRecode.append(trace)     index = index + 1<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0431\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043d\u0430 \u0440\u0435\u0431\u0440\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 (\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 Dash \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0442\u043e\u0447\u043a\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0430\u0431\u043e\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0445).<\/p>\n<pre><code class=\"python\">middle_hover_trace = go.Scatter(x=[], y=[], hovertext=[], mode='markers', hoverinfo=\"text\",marker={'size': 20, 'color': 'LightSkyBlue'},opacity=0) index = 0 for edge in G.edges:     x0, y0 = G.node[edge[0]]['pos']     x1, y1 = G.node[edge[1]]['pos']     hovertext = \"From: \" + str(G.edges[edge]['Source']) + \"&lt;br>\" + \"To: \" + str(         G.edges[edge]['Target']) + \"&lt;br>\" + \"TransactionAmt: \" + str(         G.edges[edge]['TransactionAmt']) + \"&lt;br>\" + \"TransactionDate: \" + str(G.edges[edge]['Date'])     middle_hover_trace['x'] += tuple([(x0 + x1) \/ 2])     middle_hover_trace['y'] += tuple([(y0 + y1) \/ 2])     middle_hover_trace['hovertext'] += tuple([hovertext])     index = index + 1 traceRecode.append(middle_hover_trace)<\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u043f\u0438\u0448\u0435\u043c \u0432\u0438\u0434 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0441 \u0433\u0440\u0430\u0444\u043e\u043c:<\/p>\n<pre><code class=\"python\">figure = {     \"data\": traceRecode,     \"layout\": go.Layout(title='Interactive Transaction Visualization', showlegend=False, hovermode='closest',                         margin={'b': 40, 'l': 40, 'r': 40, 't': 40},                         xaxis={'showgrid': False, 'zeroline': False, 'showticklabels': False},                         yaxis={'showgrid': False, 'zeroline': False, 'showticklabels': False},                         height=600,                         clickmode='event+select',                         annotations=[                             dict(                                 ax=(G.node[edge[0]]['pos'][0] + G.node[edge[1]]['pos'][0]) \/ 2,                                 ay=(G.node[edge[0]]['pos'][1] + G.node[edge[1]]['pos'][1]) \/ 2, axref='x', ayref='y',                                 x=(G.node[edge[1]]['pos'][0] * 3 + G.node[edge[0]]['pos'][0]) \/ 4,                                 y=(G.node[edge[1]]['pos'][1] * 3 + G.node[edge[0]]['pos'][1]) \/ 4, xref='x', yref='y',                                 showarrow=True,                                 arrowhead=3,                                 arrowsize=4,                                 arrowwidth=1,                                 opacity=1                             ) for edge in G.edges]                         )}<\/code><\/pre>\n<p>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/642db2ac61f0ac6fb28050d1\" data-style=\"\" id=\"642db2ac61f0ac6fb28050d1\" width=\"\"><\/div>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u0430\u0432\u0442\u043e\u0440\u043e\u043c \u0432 \u0435\u0435 <a href=\"https:\/\/github.com\/jhwang1992\/network-visualization\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043d\u0430 GitHub<\/a> \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 303 \u0441\u0442\u0440\u043e\u043a\u0438. \u0414\u0430\u043b\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/towardsdatascience.com\/deploying-your-dash-app-to-heroku-the-magical-guide-39bd6a0c586c\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Heroku<\/a>.<\/p>\n<\/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\/728256\/\"> https:\/\/habr.com\/ru\/articles\/728256\/<\/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>\u0413\u043e\u0432\u043e\u0440\u044f\u0442, \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043b\u0443\u0447\u0448\u0435 \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u043b\u043e\u0432 \u043e \u043d\u0438\u0445, \u0438 \u0441 \u044d\u0442\u0438\u043c \u0442\u0440\u0443\u0434\u043d\u043e \u0441\u043f\u043e\u0440\u0438\u0442\u044c. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u043e\u043c\u043f\u0442: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0431\u0435\u043b\u043e\u043c \u0444\u043e\u043d\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Python \u0434\u043b\u044f \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 \u0433\u0440\u0430\u0444\u043e\u0432. \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u2014 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438, \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f NetworkX, Plotly \u0438 Dash, \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u0434.<\/p>\n<h2>1. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0433\u0440\u0430\u0444\u043e\u0432<\/h2>\n<p>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444 \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0438 \u0430\u043d\u043e\u043c\u0430\u043b\u0438\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0422\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u043e\u0439 \u0441\u0444\u0435\u0440\u0435, \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0444\u0440\u043e\u0434\u0430 \u0438\u043b\u0438 \u043e\u0442\u043c\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u043d\u0435\u0433. \u0414\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0430\u0442\u0430\u0441\u0435\u0442 \u0438\u0437 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0438 \u043d\u0430 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0430 \u0441\u0435\u0442\u0438, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c \u043e \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u044f\u0445).<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430. \u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0446\u0432\u0435\u0442\u0430 \u0440\u0435\u0431\u0435\u0440 \u0433\u0440\u0430\u0444\u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438, \u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0435\u0431\u0440\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0443\u043c\u043c\u044b \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u0435\u0434\u0451\u0442 \u043c\u044b\u0448\u044c \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0438\u043b\u0438 \u0440\u0435\u0431\u0440\u043e \u0433\u0440\u0430\u0444\u0430, \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<h2>2. \u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430<\/h2>\n<p><strong>2.1 \u0422\u0435\u043e\u0440\u0438\u044f \u0433\u0440\u0430\u0444\u043e\u0432 \u0438 NetworkX<\/strong><\/p>\n<p>\u0413\u0440\u0430\u0444, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0435\u0442\u044c \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439, \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d (\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u044b-\u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439) \u0438 \u0440\u0451\u0431\u0435\u0440 (\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u0430\u043c\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438). \u0423 \u0432\u0435\u0440\u0448\u0438\u043d \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0442\u0438\u043f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430, \u0430 \u0443 \u0440\u0435\u0431\u0435\u0440 \u2014 \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0438 \u0441\u0443\u043c\u043c\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u0435\u0442\u044c \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0433\u0440\u0430\u0444\u043e\u043c, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u0440\u0435\u0431\u0440\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u043e\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u044f \u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p><a href=\"https:\/\/networkx.org\/documentation\/stable\/\" rel=\"noopener noreferrer nofollow\">NetworkX<\/a> \u2014 \u044d\u0442\u043e Python-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0433\u0440\u0430\u0444\u043e\u0432. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444 \u0432\u0441\u0435\u0433\u043e \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"python\">import networkx as nx import matplotlib.pyplot as plt G = nx.Graph() G.add_edge(1,2) G.add_edge(1,3) nx.draw(G, with_labels=True) plt.show()<\/code><\/pre>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0433\u0440\u0430\u0444\u043e\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435, NetworkX \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 .csv-\u0444\u0430\u0439\u043b\u043e\u0432 (\u0447\u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p><strong>2.2 \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 Plotly<\/strong><\/p>\n<p>\u0414\u043b\u044f Python \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u043d\u0435\u043c\u0430\u043b\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 Matplotlib \u0438 Seaborn, <a href=\"https:\/\/plotly.com\/python\/\" rel=\"noopener noreferrer nofollow\">Plotly <\/a>\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0433\u0440\u0430\u0444\u043e\u0432 \u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 ipywidgets, Plotly \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 Jupyter Notebook.<\/p>\n<p><strong>2.3 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 Dash<\/strong><\/p>\n<p>Jupyter Notebook \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0443 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u043e\u0432 \u0438 data scientist&#8217;\u043e\u0432, \u043d\u043e \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c, \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043b\u0438\u0446\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u044b\u0442 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043e\u0434\u043e\u043c \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043b\u044e\u0431\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. <\/p>\n<p>\u042d\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"https:\/\/plotly.com\/dash\/\" rel=\"noopener noreferrer nofollow\">Dash<\/a>, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. Dash \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0447\u0430\u0441\u0442\u044c\u044e \u043d\u0430 HTML, CSS \u0438 JavaScript \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438. <\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a Dash \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 Flask \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438 React.js \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0443 \u043d\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e Dash \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0441 Plotly, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u043b\u0435\u0433\u043a\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Dash-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<h2>3. \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0436\u0435 \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e!<\/p>\n<p><strong>3.1 \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 Dash \u043b\u0435\u0436\u0438\u0442 Flask, \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436.<\/p>\n<pre><code class=\"python\">import dash import dash_core_components as dcc import dash_html_components as html import networkx as nx import plotly.graph_objs as go import pandas as pd from colour import Color from datetime import datetime from textwrap import dedent as d import json  external_stylesheets = ['https:\/\/codepen.io\/chriddyp\/pen\/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.title = \"Transaction Network\"  if __name__ == '__main__':     app.run_server(debug=True)<\/code><\/pre>\n<p><strong>3.2 \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \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\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 Python-\u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 dash_html_components \u0438 dash_core_components. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/layout\/grid\/\" rel=\"noopener noreferrer nofollow\">Bootstrap grid system<\/a>, \u0430 \u0438\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/dash.plotly.com\/dash-core-components\/rangeslider\" rel=\"noopener noreferrer nofollow\">RangeSlider<\/a> \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dash.plotly.com\/dash-core-components\/input\" rel=\"noopener noreferrer nofollow\">Input<\/a> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e <a href=\"https:\/\/dash.plotly.com\/dash-core-components\/graph\" rel=\"noopener noreferrer nofollow\">Plotly graph<\/a> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f \u0441 \u0433\u0440\u0430\u0444\u043e\u043c \u0441\u0435\u0442\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>Hover box \u0438 Click box \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430\/\u043a\u043b\u0438\u043a\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u0440\u0430\u0444\u0430. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u043d\u0438\u0436\u0435, \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0430 <a href=\"https:\/\/dash.plotly.com\/dash-core-components\/markdown\" rel=\"noopener noreferrer nofollow\">Markdown<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<pre><code class=\"python\">app.layout = html.Div([     html.Div([html.H1(\"Transaction Network Graph\")],              className=\"row\",              style={'textAlign': \"center\"}),          html.Div(         className=\"row\",         children=[             html.Div(                 className=\"two columns\",                 children=[                     dcc.Markdown(d(\"\"\"                             **Time Range To Visualize**                             Slide the bar to define year range.                             \"\"\")),                     html.Div(                         className=\"twelve columns\",                         children=[                             dcc.RangeSlider(                                 id='my-range-slider',                                 min=2010,                                 max=2019,                                 step=1,                                 value=[2010, 2019],                                 marks={                                     2010: {'label': '2010'},                                     2011: {'label': '2011'},                                     2012: {'label': '2012'},                                     2013: {'label': '2013'},                                     2014: {'label': '2014'},                                     2015: {'label': '2015'},                                     2016: {'label': '2016'},                                     2017: {'label': '2017'},                                     2018: {'label': '2018'},                                     2019: {'label': '2019'}                                 }                             ),                             html.Br(),                             html.Div(id='output-container-range-slider')                         ],                         style={'height': '300px'}                     ),                     html.Div(                         className=\"twelve columns\",                         children=[                             dcc.Markdown(d(\"\"\"                             **Account To Search**                             Input the account to visualize.                             \"\"\")),                             dcc.Input(id=\"input1\", type=\"text\", placeholder=\"Account\"),                             html.Div(id=\"output\")                         ],                         style={'height': '300px'}                     )                 ]             ),             html.Div(                 className=\"eight columns\",                 children=[dcc.Graph(id=\"my-graph\",                                     figure=network_graph(YEAR, ACCOUNT))],             ),             html.Div(                 className=\"two columns\",                 children=[                     html.Div(                         className='twelve columns',                         children=[                             dcc.Markdown(d(\"\"\"                             **Hover Data**                             Mouse over values in the graph.                             \"\"\")),                             html.Pre(id='hover-data', style=styles['pre'])                         ],                         style={'height': '400px'}),                     html.Div(                         className='twelve columns',                         children=[                             dcc.Markdown(d(\"\"\"                             **Click Data**                             Click on points in the graph.                             \"\"\")),                             html.Pre(id='click-data', style=styles['pre'])                         ],                         style={'height': '400px'})                 ]             )         ]     ) ])<\/code><\/pre>\n<p><strong>3.3 \u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a \u043a\u043e\u0434\u0443 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f RangeSlider \u0438\u043b\u0438 Input, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0433\u0440\u0430\u0444, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0440\u0441\u043e\u0440 \u0438\u043b\u0438 \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0438\u043b\u0438 \u0440\u0435\u0431\u0440\u043e \u043d\u0430 \u0433\u0440\u0430\u0444\u0435, HoverBox\/ClickBox \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0443 \u0438\u043b\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/dash.plotly.com\/clientside-callbacks\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b<\/a>.<\/p>\n<pre><code class=\"python\">@app.callback(     dash.dependencies.Output('my-graph', 'figure'),     [dash.dependencies.Input('my-range-slider', 'value'), dash.dependencies.Input('input1', 'value')]) def update_output(value,input1):     YEAR = value     ACCOUNT = input1     return network_graph(value, input1)      @app.callback(     dash.dependencies.Output('hover-data', 'children'),     [dash.dependencies.Input('my-graph', 'hoverData')]) def display_hover_data(hoverData):     return<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-413630","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413630","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=413630"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413630\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}