{"id":186532,"date":"2013-07-14T21:36:03","date_gmt":"2013-07-14T17:36:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=186532"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=186532","title":{"rendered":"<span class=\"post_title\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u043b\u043e\u0431\u0443\u0441 \u2014 SVG versus Canvas<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c! \u0412 <a href=\"http:\/\/habrahabr.ru\/post\/181766\/\">\u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437<\/a> \u043c\u044b \u0438\u0437\u0443\u0447\u0430\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b-\u0445\u043e\u0440\u043e\u043f\u043b\u0435\u0442\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0417\u0435\u043c\u043b\u0438, \u0438\u043c\u0435\u043d\u0443\u0435\u043c\u043e\u0439 \u0432 \u043d\u0430\u0440\u043e\u0434\u0435 \u0433\u043b\u043e\u0431\u0443\u0441\u043e\u043c. \u0413\u043b\u043e\u0431\u0443\u0441 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u043e\u0432: <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr> \u0432\u0435\u0440\u0441\u0438\u044f \u0438 Canvas \u0432\u0435\u0440\u0441\u0438\u044f. \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <b>JavaScript<\/b> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"http:\/\/d3js.org\">d3.js<\/a>. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430. \u0412 \u043c\u043e\u0451\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 <i>\u0413\u043e\u043b\u0443\u0431\u0430\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430<\/i> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/ccb\/8b9\/ff3\/ccb8b9ff365f021954b038390f91b0c3.png\" alt=\"\u041f\u043b\u0430\u043d\u0435\u0442\u0430 \u0417\u0435\u043c\u043b\u044f\"\/><\/p>\n<p>  \u0410 \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 <i>\u041c\u0438\u0440<\/i> \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u043a\u0430\u043c\u0438 \u0438 \u043e\u043a\u0435\u0430\u043d\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c.<a name=\"habracut\"><\/a><\/p>\n<h4>\u041d\u0430\u0447\u0430\u043b\u043e<\/h4>\n<p>  \u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0433\u0435\u043e\u0434\u0430\u043d\u043d\u044b\u0435. \u041a\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/mbostock\/topojson\/wiki\">TopoJSON<\/a> \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439. \u041e \u0442\u043e\u043c \u043a\u0430\u043a \u0435\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 <a href=\"http:\/\/habrahabr.ru\/post\/181766\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u00ab\u0414\u0435\u043b\u0430 \u043a\u0430\u0440\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435\u00bb. \u0418 \u0442\u0430\u043a \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/mbostock\/topojson\/wiki\">TopoJSON<\/a> \u0444\u0430\u0439\u043b <code>world-110m.json<\/code> \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u044b \u0441 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u043c 1:110,000,000, \u0438\u043b\u0438 1 \u0441\u043c = 1,100 \u043a\u043c (1\u2033 = 1,736 \u043c\u0438\u043b\u044c) \u0438 \u0444\u0430\u0439\u043b <code>world-110m-country-names.tsv<\/code> \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0441\u0442\u0440\u0430\u043d \u0432\u0438\u0434\u0430 <code>id<\/code> \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u044b. \u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044f\u0437\u044b\u043a. \u0412\u0441\u0451, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0433\u043b\u043e\u0431\u0443\u0441\u0430.   <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b><\/p>\n<div class=\"spoiler_text\">\u0412 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u043d\u0430\u043c\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 <s>\u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435<\/s> \u0441\u0442\u0440\u0430\u043d\u044b \u00ab\u0432\u044b\u0440\u043e\u0436\u0434\u0430\u044e\u0442\u0441\u044f\u00bb \u0432 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0432\u0441\u0435\u0433\u043e 174 \u0441\u0442\u0440\u0430\u043d\u044b.<\/div>\n<\/div>\n<p>  <\/p>\n<h4>\u0420\u0438\u0441\u0443\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u043b\u043e\u0431\u0443\u0441<\/h4>\n<p>  \u041d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u044c\u044e \u0431\u0443\u0434\u0435\u0442 \u0433\u043b\u043e\u0431\u0443\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439 \u00ab\u0445\u0432\u0430\u0442\u0430\u044f\u00bb \u0437\u0430 \u0441\u0443\u0448\u0443<\/li>\n<li>\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0443\u0441 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0443, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0428\u0430\u0431\u043b\u043e\u043d, \u0434\u043b\u044f \u0442\u0435\u0445 \u043a\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e.<\/b><\/p>\n<div class=\"spoiler_text\">\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;title&gt;Nice title&lt;\/title&gt;   &lt;script src=&quot;http:\/\/d3js.org\/d3.v3.min.js&quot;&gt;&lt;\/script&gt;   &lt;script src=&quot;http:\/\/d3js.org\/queue.v1.min.js&quot;&gt;&lt;\/script&gt;   &lt;script src=&quot;http:\/\/d3js.org\/topojson.v1.min.js&quot;&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;style&gt;   Your awesome CSS        &lt;\/style&gt; &lt;body&gt;   &lt;h1&gt;Cool Header&lt;\/h1&gt;   &lt;script&gt;     Your awesome d3.js code   &lt;\/script&gt; &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <abbr title=\"Document Object Model\">DOM<\/abbr> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<pre><code class=\"javascript\">  var width = 600,   height = 500,   sens = 0.25,   focused;    \/\/Setting projection    var projection = d3.geo.orthographic()   .scale(245)   .rotate([0, 0])   .translate([width \/ 2, height \/ 2])   .clipAngle(90);    var path = d3.geo.path()   .projection(projection);    \/\/SVG container    var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)   .attr(&quot;width&quot;, width)   .attr(&quot;height&quot;, height);    \/\/Adding water    svg.append(&quot;path&quot;)   .datum({type: &quot;Sphere&quot;})   .attr(&quot;class&quot;, &quot;water&quot;)   .attr(&quot;d&quot;, path);    var countryTooltip = d3.select(&quot;body&quot;).append(&quot;div&quot;).attr(&quot;class&quot;, &quot;countryTooltip&quot;),   countryList = d3.select(&quot;body&quot;).append(&quot;select&quot;).attr(&quot;name&quot;, &quot;countries&quot;); <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>sens<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u043a\u043e\u0439, \u0430 <code>focused<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 (\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439) \u0441\u0442\u0440\u0430\u043d\u044b. \u041f\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 wikipedia: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Orthographic_projection_(cartography)\">Orthographic projection<\/a>. \u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Geo-Projections#wiki-clipAngle\">.clipAngle()<\/a> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u0444\u0435\u0440\u044b \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c (\u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u0432\u0438\u0434\u0435\u0442\u044c), \u043f\u0440\u043e \u044d\u0442\u043e \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 wikipedia: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Circle_of_a_sphere\">small-circle clipping<\/a>. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u043e\u0434\u0435 \u0432 \u0440\u0430\u0437\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f\u0445 \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/mbostock\/queue\">queue.js<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u043c \u044d\u0442\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e. <\/p>\n<pre><code class=\"javascript\">  queue()   .defer(d3.json, &quot;data\/world-110m.json&quot;)   .defer(d3.tsv, &quot;data\/world-110m-country-names.tsv&quot;)   .await(ready); <\/code><\/pre>\n<p>   \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>ready<\/code>. \u0412\u043d\u0430\u0447\u0430\u043b\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d \u0432 \u043d\u0430\u0448 <i>dropdown list<\/i> \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u044b \u043d\u0430 \u0433\u043b\u043e\u0431\u0443\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">  function ready(error, world, countryData) {      var countryById = {},     countries = topojson.feature(world, world.objects.countries).features;      \/\/Adding countries to select      countryData.forEach(function(d) {       countryById[d.id] = d.name;       option = countryList.append(&quot;option&quot;);       option.text(d.name);       option.property(&quot;value&quot;, d.id);     });      \/\/Drawing countries on the globe      var world = svg.selectAll(&quot;path.land&quot;)     .data(countries)     .enter().append(&quot;path&quot;)     .attr(&quot;class&quot;, &quot;land&quot;)     .attr(&quot;d&quot;, path) <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u044b\u0448\u0438. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Drag-Behavior#wiki-origin\">drag.origin()<\/a>, \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u00ab\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435\u00bb (\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435) \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u0438 \u0437\u0430\u0445\u0432\u0430\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0448\u0438\u0440\u043e\u0442\u0443 \u0438 \u0434\u043e\u043b\u0433\u043e\u0442\u0443.<\/p>\n<pre><code class=\"javascript\">    \/\/Drag event      .call(d3.behavior.drag()       .origin(function() { var r = projection.rotate(); return {x: r[0] \/ sens, y: -r[1] \/ sens}; })       .on(&quot;drag&quot;, function() {         var rotate = projection.rotate();         projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);         svg.selectAll(&quot;path.land&quot;).attr(&quot;d&quot;, path);         svg.selectAll(&quot;.focused&quot;).classed(&quot;focused&quot;, focused = false);       }))      \/\/Mouse events      .on(&quot;mouseover&quot;, function(d) {       countryTooltip.text(countryById[d.id])       .style(&quot;left&quot;, (d3.event.pageX + 7) + &quot;px&quot;)       .style(&quot;top&quot;, (d3.event.pageY - 15) + &quot;px&quot;)       .style(&quot;display&quot;, &quot;block&quot;)       .style(&quot;opacity&quot;, 1);     })     .on(&quot;mouseout&quot;, function(d) {       countryTooltip.style(&quot;opacity&quot;, 0)       .style(&quot;display&quot;, &quot;none&quot;);     })     .on(&quot;mousemove&quot;, function(d) {       countryTooltip.style(&quot;left&quot;, (d3.event.pageX + 7) + &quot;px&quot;)       .style(&quot;top&quot;, (d3.event.pageY - 15) + &quot;px&quot;);     }); <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430 \u043d\u0430\u043c \u0433\u0435\u043e\u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u044b \u043f\u043e \u0435\u0451 <code>id<\/code>&#8216;\u0448\u043d\u0438\u043a\u0443. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043e\u0442 \u043e\u043d\u0430.<\/p>\n<pre><code class=\"javascript\">    function country(cnt, sel) {        for(var i = 0, l = cnt.length; i &lt; l; i++) {         if(cnt[i].id == sel.value) {return cnt[i];}       }     }; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0438 (\u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0438) \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0435, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">    \/\/Country focus on option select      d3.select(&quot;select&quot;).on(&quot;change&quot;, function() {       var rotate = projection.rotate(),       focusedCountry = country(countries, this),       p = d3.geo.centroid(focusedCountry);        svg.selectAll(&quot;.focused&quot;).classed(&quot;focused&quot;, focused = false);      \/\/Globe rotating      (function transition() {       d3.transition()       .duration(2500)       .tween(&quot;rotate&quot;, function() {         var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);         return function(t) {           projection.rotate(r(t));           svg.selectAll(&quot;path&quot;).attr(&quot;d&quot;, path)           .classed(&quot;focused&quot;, function(d, i) { return d.id == focusedCountry.id ? focused = d : false; });         };       })       .transition();       })();     }); <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u044f \u0441\u043e\u043b\u044c \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Transitions#wiki-tween\">transition.tween()<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u043f\u043e\u0432\u043e\u0440\u043e\u0442) \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<h5>\u041a\u0440\u0443\u0442\u0438\u0442\u0441\u044f, \u0432\u0435\u0440\u0442\u0438\u0442\u0441\u044f \u0448\u0430\u0440 \u0433\u043e\u043b\u0443\u0431\u043e\u0439.<\/h5>\n<p>  \u0412\u0441\u0451 \u2014 <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr> \u0433\u043b\u043e\u0431\u0443\u0441 \u0433\u043e\u0442\u043e\u0432. \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/gist.github.com\/KoGor\/5994804\">GitHub<\/a> (\u0442\u0430\u043c \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0442\u0435\u043c \u0443 \u043a\u043e\u0433\u043e <b>read-only<\/b> \u043d\u0430 \u0425\u0430\u0431\u0440\u0430\u0445\u0430\u0431\u0440\u0435), \u0430 \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441 <a href=\"http:\/\/bl.ocks.org\/KoGor\/5994804\">bl.ocks.org<\/a>.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr>:<\/p>\n<ul>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 <abbr title=\"Document Object Model\">DOM<\/abbr> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 <code>path<\/code><\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <abbr title=\"Cascading Style Sheets\">CSS<\/abbr> (\u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430)<\/li>\n<li>\u0422\u0435\u043a\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u044b\u0442\u0435\u043a\u0430\u044e\u0449\u0438\u043c\u0438 \u043e\u0442\u0441\u044e\u0434\u0430 \u043f\u043b\u044e\u0441\u0430\u043c\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0417\u0435\u043c\u043b\u044f<\/h4>\n<p>  \u0421 <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr> \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u0440\u043e\u0434\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u043d\u0430 canvas. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0417\u0435\u043c\u043b\u0438. \u0422\u0443\u0442 \u043c\u043d\u043e\u0433\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443. \u041a\u043e\u0434\u0430 \u043c\u0430\u043b\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0435\u0433\u043e \u0432\u0435\u0441\u044c \u0441\u0440\u0430\u0437\u0443.<\/p>\n<pre><code class=\"javascript\">  var width = 800,   height = 500;    var projection = d3.geo.orthographic()   .scale(245)   .rotate([180, 0])   .translate([width \/ 2, height \/ 2])   .clipAngle(90);    var canvas = d3.select(&quot;body&quot;).append(&quot;canvas&quot;)   .attr(&quot;width&quot;, width)   .attr(&quot;height&quot;, height);    var c = canvas.node().getContext(&quot;2d&quot;);    var path = d3.geo.path()   .projection(projection)   .context(c);    function getImage(path, callback) {     var img = new Image();     img.src = path;     img.onload = callback(null, img);   }    queue()   .defer(d3.json, &quot;data\/world-110m.json&quot;)   .defer(d3.tsv, &quot;data\/world-110m-country-names.tsv&quot;)   .defer(getImage, &quot;data\/space.jpg&quot;)   .await(ready);    \/\/Main function    function ready(error, world, countryData, space) {      var globe = {type: &quot;Sphere&quot;},     land = topojson.feature(world, world.objects.land),     borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });      \/\/Earth rotating      (function transition() {       d3.transition()       .duration(15000)       .ease(&quot;linear&quot;)       .tween(&quot;rotate&quot;, function() {         var r = d3.interpolate(projection.rotate(), [-180, 0]);         return function(t) {           projection.rotate(r(t));           c.clearRect(0, 0, width, height);           c.drawImage(space, 0, 0);           c.fillStyle = &quot;#00006B&quot;, c.beginPath(), path(globe), c.fill();           c.fillStyle = &quot;#29527A&quot;, c.beginPath(), path(land), c.fill();           c.strokeStyle = &quot;#fff&quot;, c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();           projection.rotate([180, 0]);         };       })            .transition().duration(30).ease(&quot;linear&quot;)       .each(&quot;end&quot;, transition);     })();   }; <\/code><\/pre>\n<p>  \u0412\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043a\u0430\u043a \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0438\u0437 \u0442\u043e\u0447\u043a\u0438 <code>[180, 0]<\/code> \u0432 \u0442\u043e\u0447\u043a\u0443 <code>[-180, 0]<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u00ab\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0442\u043e\u0440\u00bb, \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0432 \u043f\u043e\u0434\u0432\u043e\u0445\u0430, \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u041f\u043e\u0442\u043e\u043c \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 canvas, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0432 \u0435\u0433\u043e. \u0420\u0438\u0441\u0443\u0435\u043c \u0444\u043e\u043d, \u0441\u0444\u0435\u0440\u0443, \u043c\u0430\u0442\u0435\u0440\u0438\u043a\u0438 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0442\u0440\u0430\u043d. \u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u0430 \u0441\u0447\u0451\u0442 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>transition<\/code>.<\/p>\n<h5>\u00ab\u0418 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043e\u043d\u0430 \u0432\u0435\u0440\u0442\u0438\u0442\u0441\u044f!\u00bb<\/h5>\n<p>  \u041d\u0443 \u0432\u043e\u0442 \u043c\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/gist.github.com\/KoGor\/5994960\">GitHub<\/a>, \u0430 \u043f\u043e\u043b\u044e\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0432\u0438\u0434\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441 <a href=\"http:\/\/bl.ocks.org\/KoGor\/5994960\">bl.ocks.org<\/a>.<\/p>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 Canvas:<\/p>\n<ul>\n<li> \u0411\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0430\u044f\/\u043f\u043b\u0430\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr><\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439, \u0432\u0438\u0434\u0435\u043e, \u0438\u0433\u0440\u0430\u043c\u0438 \u0438 \u043f\u0440\u043e\u0447\u0438\u043c\u0438 \u0448\u0442\u0443\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0412\u043e\u0442 \u043c\u044b \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0435\u0449\u0451 \u043f\u0430\u0440\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"http:\/\/d3js.org\">d3.js<\/a>. \u042f \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0431\u044b\u043b\u0438 \u0432 \u043c\u0435\u0440\u0443 \u043f\u0440\u043e\u0441\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b \u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e-\u0442\u0430\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b. \u0412 \u0431\u043e\u0440\u044c\u0431\u0435 <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr> \u0438 Canvas \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0431\u0435\u0434\u0438\u043b\u0430 \u0434\u0440\u0443\u0436\u0431\u0430, \u0442\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u0439 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u043a\u0430\u0440\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0435\u0439, \u0442\u043e \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr>, \u0435\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u043c\u0443\u043b\u044c\u0442\u0438\u043c\u0435\u0434\u0438\u0430, \u0442\u043e Canvas \u0432\u0430\u043c \u0432 \u043f\u043e\u043c\u043e\u0449\u044c. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e. \u0423\u0434\u0430\u0447\u0438 \u0438 \u0443\u0441\u043f\u0435\u0445\u043e\u0432 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u0438 <a href=\"http:\/\/d3js.org\">d3.js<\/a>!    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/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=\"http:\/\/habrahabr.ru\/post\/186532\/\"> http:\/\/habrahabr.ru\/post\/186532\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c! \u0412 <a href=\"http:\/\/habrahabr.ru\/post\/181766\/\">\u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437<\/a> \u043c\u044b \u0438\u0437\u0443\u0447\u0430\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b-\u0445\u043e\u0440\u043e\u043f\u043b\u0435\u0442\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0417\u0435\u043c\u043b\u0438, \u0438\u043c\u0435\u043d\u0443\u0435\u043c\u043e\u0439 \u0432 \u043d\u0430\u0440\u043e\u0434\u0435 \u0433\u043b\u043e\u0431\u0443\u0441\u043e\u043c. \u0413\u043b\u043e\u0431\u0443\u0441 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u043e\u0432: <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr> \u0432\u0435\u0440\u0441\u0438\u044f \u0438 Canvas \u0432\u0435\u0440\u0441\u0438\u044f. \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <b>JavaScript<\/b> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"http:\/\/d3js.org\">d3.js<\/a>. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430. \u0412 \u043c\u043e\u0451\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 <i>\u0413\u043e\u043b\u0443\u0431\u0430\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430<\/i> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/ccb\/8b9\/ff3\/ccb8b9ff365f021954b038390f91b0c3.png\" alt=\"\u041f\u043b\u0430\u043d\u0435\u0442\u0430 \u0417\u0435\u043c\u043b\u044f\"\/><\/p>\n<p>  \u0410 \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 <i>\u041c\u0438\u0440<\/i> \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u043a\u0430\u043c\u0438 \u0438 \u043e\u043a\u0435\u0430\u043d\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \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-186532","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/186532","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=186532"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/186532\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=186532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=186532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=186532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}