Created
March 19, 2014 10:35
-
-
Save agribanovskiy/9639186 to your computer and use it in GitHub Desktop.
Kreml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| #name_companies { | |
| font-family: verdana; | |
| left: 70px; | |
| position: relative; | |
| top: 205px; | |
| width: 160px; | |
| font-weight: bold; | |
| font-size: 12px;} | |
| #value_companies { | |
| font-family: verdana; | |
| left: 250px; | |
| position: relative; | |
| top: 190px; | |
| width: 250px; | |
| font-weight: bold; | |
| font-size: 12px;} | |
| #data { | |
| font-family: Arial; | |
| left: 50px; | |
| position: relative; | |
| top: 1000px; | |
| width: 300px; | |
| font-style: italic; | |
| font-size: 10px; } | |
| .axis { | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis line { | |
| stroke: green; | |
| } | |
| .x.axis .minor { | |
| stroke-opacity: .5; | |
| } | |
| .y.axis path { | |
| display: none; | |
| } | |
| .y.axis line, | |
| .x.axis path { | |
| fill: none; | |
| stroke: none; | |
| } | |
| label { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size:12px; } | |
| #tooltips { | |
| position: absolute; | |
| padding: 10px; | |
| left: 220px; | |
| border-radius: 5px; | |
| pointer-events: none; | |
| font-family: arial; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| #tooltips.hidden { | |
| display: none; | |
| } | |
| rect:hover { | |
| fill: orange; | |
| } | |
| #Tutle { | |
| font-size: 10px; | |
| font-family: sans-serif; | |
| color: black; | |
| } | |
| #annotation {font-family:georgia; | |
| font-size: 16px; | |
| position: absolute; | |
| width: 500px; | |
| top: 0px; | |
| left: 150px; | |
| } | |
| #putins_friends {font-family:arial; | |
| font-size: 14px; | |
| position: absolute; | |
| width: 200px; | |
| top: 350px; | |
| left: 600px; | |
| font-weight: bold; | |
| } | |
| #putin { | |
| width: 300px; | |
| top: 550px; | |
| left: 500px; | |
| } | |
| #katunin { | |
| width: 300px; | |
| top: 810px; | |
| left: 500px; | |
| } | |
| #rotenberg { | |
| width: 300px; | |
| top: 1070px; | |
| left: 500px; | |
| } | |
| .men {text-align:center; | |
| margin: 0; | |
| font-family:arial; | |
| font-size: 12px; | |
| position: absolute; | |
| color: #666; | |
| } | |
| #image { position: absolute; | |
| top: 20px; | |
| height: 200px; | |
| width: 200px; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="d3.v3.min.js"></script> | |
| <div id="name_companies">название</div> | |
| <div id="value_companies">выручка, млн грн/собственник</div> | |
| <div id="data">Данные: для всех компаний указан период 2012 года, для банков - размеры активов (на конец 2013 года), для страховых компаний - премий. Для недвижимости - оценочная рыночная стоимость</div> | |
| <div id="tooltips" class="hidden"> | |
| <span id="value"></span> | |
| / <span id="owners"></span> | |
| </div> | |
| <div id="annotation"> | |
| <span style="color:black; font-size: 18px; font-weight: bold;">Чем владеют россияне в Украине</span><p></p> | |
| Российский капитал глубоко проник в украинский бизнес. По подсчетам Hubs, граждане РФ владеют каждой десятой компанией из рейтинга 200 крупнейших компаний Forbes Украина. Тогда как у украинцев там ни одного актива из аналогичного списка. В Украине силен не только частный, но и госуарственный капитал, а также ярко выраженных прокремлевских бизнесменов. Их активы тут - в числе наиболее рисковых. | |
| </div> | |
| <div id="putins_friends"> | |
| <span style="color:black;">Владения Путина и его друзей в Украине</span> | |
| </div> | |
| <div id="putin" class="men"> | |
| <span style="color:black; font-weight: bold;">Владимир Путин</span> <br> президент РФ <br>лично контролирует финансовые потоки ряда государтсвенных компаний. | |
| </div> | |
| <div id="katunin" class="men"> | |
| <span style="color:black; font-weight: bold;">Александр Катунин</span> <br> экс-совладелец "Евраза"<br>инвестирует в украинские активы на деньги "ВТБ" банка | |
| </div> | |
| <div id="rotenberg" class="men"> | |
| <span style="color:black; font-weight: bold;">Аркадий Ротенберг</span> <br> друг Путина, спарринг-партнер по Дзюдо<br>получает в РФ без тендера многомиллиардные подряды от "Газпрома" | |
| </div> | |
| <script> | |
| //Width and height | |
| var margin = {top: 150, right: 20, bottom: 100, left: 20}, | |
| w = 800 - margin.left - margin.right, | |
| h = 1000 - margin.top - margin.bottom; | |
| //Create SVG element | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", w + margin.left + margin.right) | |
| .attr("height", h + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var dataset = [ { key : " Проминвестбанк " , value : 40236 , owners: " Внешэкономбанк "} , | |
| { key : " Сбербанк России " , value : 33571 , owners: " Сбербанк "} , | |
| { key : " ВТБ Банк " , value : 29089 , owners: " Банк ВТБ "} , | |
| { key : " Индустриальный союз Донбасса " , value : 28920 , owners: " Александр Катунин - 50% акций "} , | |
| { key : " Альфа-банк " , value : 28496 , owners: " Альфа-групп Михаила Фридмана "} , | |
| { key : " Мегаполис-Украина " , value : 27452 , owners: " Игорь Кесаев "} , | |
| { key : " Донецксталь " , value : 16300 , owners: " Виктор Нусенкис "} , | |
| { key : " Запорожсталь " , value : 15560 , owners: " Александр Катунин, 50% акций "} , | |
| { key : " Киевстар " , value : 13159 , owners: " Альфа-групп Михаила Фридмана "} , | |
| { key : " ТНК-BP Коммерс " , value : 12162 , owners: " Роснефть "} , | |
| { key : " Энергостандарт " , value : 10320 , owners: " Константин Григоришин "} , | |
| { key : " МТС-Украина " , value : 9651 , owners: " АФК Система Владимира Евтушенко "} , | |
| { key : " ЮГОК " , value : 8243 , owners: " ЕВРАЗ Романа Абрамовиа - 50% "} , | |
| { key : " VS Energy International " , value : 7978 , owners: " Александр Бабаков и Евгений Гиннер "} , | |
| { key : " Лукойл-Украина " , value : 7889 , owners: " Лукойл Вагита Алекперова "} , | |
| { key : " Газпром сбыт Украина " , value : 7718 , owners: " Газпром "} , | |
| { key : " Крюковский вагонзавод " , value : 7225 , owners: " Станислав Гамзалов - 25% "} , | |
| { key : " Евраз Украина " , value : 6900 , owners: " Роман Абрамович "} , | |
| { key : " Альянс ойл Украина " , value : 5941 , owners: " Братья Муса и Мавлит Бажаевы "} , | |
| { key : " Запорожтрансформатор " , value : 3947 , owners: " Константин Григоришин "} , | |
| { key : " Карпатнефтехим химия " , value : 3837 , owners: " Лукойл "} , | |
| { key : " Николаевский глиноземный завод " , value : 3400 , owners: " Олег Дерипаска "} , | |
| { key : " ДЭМЗ " , value : 2727 , owners: " Вадим Варшавский "} , | |
| { key : " Океан плаза " , value : 1800 , owners: " Аркадий Ротенберг "} , | |
| { key : " Лугансктепловоз " , value : 1731 , owners: " Алишер Усманов "} , | |
| { key : " М.С.Л. " , value : 1700 , owners: " Альфа-групп Михаила Фридмана "} , | |
| { key : " Патриот " , value : 1600 , owners: " Finstar Олега Бойко "} , | |
| { key : " Побужский ферроник. комб. " , value : 1589 , owners: " фонд Solway Александра Бронштейна "} , | |
| { key : " КрымТЭЦ " , value : 1323 , owners: " КрымТЭЦ "} , | |
| { key : " Украинские агроинвестиции " , value : 1300 , owners: " Онэксим Михаила Прохорова "} , | |
| { key : " Энергомашспецсталь " , value : 1200 , owners: " Росатом - 50% "} , | |
| { key : " Днепрометиз " , value : 636 , owners: " Северсталь Алексея Мордашова "} , | |
| { key : " Инго Украина " , value : 485 , owners: " Ингосстрах "} , | |
| { key : " Провидна " , value : 445 , owners: " Росгосстрах "} , | |
| { key : " Альфа страхование " , value : 418 , owners: " Альфа-групп Михаила Фридмана "} , | |
| { key : " Конт. терм. Ильичевск " , value : 245 , owners: " Global Ports Никиты Мишина, Константина Николаева, Андрея Филатова "} , | |
| { key : " Премьер Палац " , value : 221 , owners: " Александр Бабаков и Евгений Гиннер "} , | |
| { key : " Фармстандарт-Биолек " , value : 171 , owners: " Фармстандарт Виктора Харитонина и Егора Кулькова "} , ]; | |
| var color = d3.scale.ordinal() | |
| // задание цветов двум категориям | |
| .range(["#d84b2a", "#7aa25c"]); | |
| var yScale = d3.scale.ordinal() | |
| .domain(dataset.map(function(d) { return d.key; })) | |
| .rangeRoundBands([0, h], 0.05); | |
| var xScale = d3.scale.linear() | |
| .domain ([0,40236]) | |
| // .domain([d3.max(dataset, function(d) { return d.value; }), 0]) | |
| .range([0, 500]); | |
| //Define X axis | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom"); | |
| //Define y axis | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left"); | |
| //Define key function, to be used when binding data | |
| var key = function(d) { | |
| return d.key; | |
| }; | |
| //Create y axis | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + 0 + ")", 0) | |
| .call(yAxis).selectAll("text") | |
| .attr("y", 0) | |
| .attr("x", 10) | |
| .attr("dy", ".35em") | |
| .attr("transform", "rotate(0)") | |
| .style("text-anchor", "start"); | |
| //Create bars | |
| var rect = svg.selectAll("rect") | |
| .data(dataset, key) | |
| rect.enter() | |
| .append("rect") | |
| .attr("class", "rect") | |
| .attr("id", function(d, i) { return "r-" + i; }) | |
| .attr("x", 170) | |
| .attr("y", function(d) { | |
| return yScale(d.key); | |
| }) | |
| .attr("width", function(d) { | |
| return xScale(d.value); | |
| } ) | |
| .attr("height", yScale.rangeBand()) | |
| .style("fill", "#ccc") | |
| .attr("opacity", .9) | |
| .on("mouseover", function(d) { | |
| //Update the tooltip position and value | |
| d3.select("#tooltips") | |
| .style("top", (d3.event.pageY-10) + "px") | |
| .select("#value") | |
| .text(d.value); | |
| d3.select("#tooltips") | |
| .style("top", (d3.event.pageY-10) + "px") | |
| .select("#owners") | |
| .text(d.owners); | |
| //Show the tooltip | |
| d3.select("#tooltips").classed("hidden", false); | |
| d3.select(this) | |
| .style("fill", "grey") | |
| }) | |
| .on("mouseout", function() { | |
| //Hide the tooltip | |
| d3.select("#tooltips").classed("hidden", true); | |
| d3.select(this) | |
| .style("fill", "#ccc") | |
| }); | |
| /* | |
| //Create X axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + h + ")") // переносим ось сверху вниз svg контейнера | |
| .call(xAxis) | |
| .selectAll("text") | |
| .attr("y", 0) | |
| .attr("x", 9) | |
| .attr("dy", ".35em") | |
| .attr("transform", "rotate(90)") | |
| .style("text-anchor", "start"); | |
| */ | |
| svg.append("svg:image") | |
| .attr("id", "putin") | |
| .attr("xlink:href", "http://i.pixs.ru/storage/1/0/9/putinjpg_8537147_11295109.jpg") | |
| .attr("x", "550px") | |
| .attr("y", "150px") | |
| .attr("width", "150px") | |
| .attr("height", "150px").on("mouseover", function(d) { | |
| d3.select(this) | |
| .attr("opacity", 1); | |
| d3.selectAll("#r-0,#r-1,#r-2,#r-15,#r-32,#r-33") | |
| .style("fill", "orange") | |
| }).on("mouseout", function(d) { | |
| d3.selectAll("rect") | |
| .style("fill", "#ccc") | |
| d3.select(this) | |
| .attr("opacity", .9); | |
| }); | |
| svg.append("svg:image") | |
| .attr("id", "putin") | |
| .attr("xlink:href", "http://i7.pixs.ru/storage/5/5/0/katuninjpg_2220568_11295550.jpg") | |
| .attr("x", "550px") | |
| .attr("y", "400px") | |
| .attr("width", "150px") | |
| .attr("height", "150px").on("mouseover", function(d) { | |
| d3.selectAll("#r-3,#r-7") | |
| .style("fill", "orange") | |
| }).on("mouseout", function(d) { | |
| d3.selectAll("rect") | |
| .style("fill", "#ccc") | |
| }); | |
| svg.append("svg:image") | |
| .attr("id", "putin") | |
| .attr("xlink:href", "http://i.pixs.ru/storage/2/2/0/rotenbergj_9772556_11300220.jpg") | |
| .attr("x", "550px") | |
| .attr("y", "650px") | |
| .attr("width", "150px") | |
| .attr("height", "150px").on("mouseover", function(d) { | |
| d3.select(this) | |
| .attr("opacity", 1); | |
| d3.selectAll("#r-23") | |
| .style("fill", "orange") | |
| }).on("mouseout", function(d) { | |
| d3.selectAll("rect") | |
| .style("fill", "#ccc") | |
| d3.select(this) | |
| .attr("opacity", .9); | |
| }); | |
| var line_news=d3.select("svg").append("g") | |
| .attr("class", "line_news") | |
| .attr("transform", "translate(0,0)" ); | |
| line_news.selectAll("line") | |
| .data([432,695,950]) | |
| .enter().append("line") | |
| .attr ("stroke", "grey") | |
| .attr ("stroke-width", .5) | |
| .attr("x1", 550) | |
| .attr("y1", function (d){return d}) | |
| .attr("x2", 750) | |
| .attr("y2", function (d){return d}); | |
| </script> | |
| <p> </p> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment