D3 Examples - gaz

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
​
.g-buttons .g-button {
​
  border: solid 1px #ddd;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
   
}
​
.g-buttons .g-button:hover {
  border-color: #ccc;
  border-bottom-color: #bbb;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  color: #666;
​
}
​
.g-button {
  background: steelblue;
  border: none;
  border-radius: 3px;
  border-bottom-color: #ccc;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  margin: 0 -1px 0 0;
  padding: 4px 8px;
  white-space: nowrap;
}
​
.g-buttons .g-button.g-active,
.g-buttons .g-button:active {
  background: #f0f0f0;
  border-color: #ccc;
  border-top-color: #bbb;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  color: #222;
  
}
​
.g-buttons .g-button:first-child {
  border-radius: 0px 0 0 0px;
position:absolute;
 left:570px;
top:50px; 
}
.g-buttons .g-button:nth-child(2) {
  border-radius: 0 0 0 0;
  position:absolute;
 left:600px;
top:50px; 
   
 }
​
.g-buttons .g-button:nth-child(3) {
  border-radius: 0 0 0 0;
position:absolute;
 left:630px;
top:50px; 
   
 }
 .g-buttons .g-button:nth-child(4) {
  border-radius: 0 0 0 0;
position:absolute;
 left:660px;
top:50px; 
   
 }
 .g-buttons .g-button:nth-child(5) {
  border-radius: 0 0 0 0;
position:absolute;
 left:690px;
top:50px; 
   
 }
.g-buttons .g-button:focus {
  z-index: 3000;
}
​
.g-buttons .g-button.g-active {
  z-index: 2000;
}
.GTS_Ukraine_name,.South_Stream_no_name,.bel_name,.Blue_Stream_name,.bar_text{
  font-size:10px;
  font-family:Century Gothic;
}
.hidden { 
  display: none; 
}
div.tooltip {
  color: #222; 
  background: #fff; 
  padding: .5em; 
  text-shadow: #f5f5f5 0 1px 0;
  border-radius: 2px; 
  box-shadow: 0px 0px 2px 0px #a6a6a6; 
  opacity: 0.9; 
  position: absolute;
}
.GTS_Ukraine, .South_Stream_yes,.South_Stream_no, .Nabucco,.Nord_Stream,.Opal,.bel,.bel2,.Nord_Stream_yes,.Nord_Stream_yes2 {
  fill: none;
  }
 svg{ background-color: #F8F8FF;
 }
 #container{position:absolute;
 top:0px;}
 
 .hidden {
        display: none;
      }
</style>
</head>
<body>
<div id="container"></div>
 <div class="g-buttons">
<button id="_1" class="g-button">1</button>
<button id="_2" class="g-button">2</button>
<button id="_3" class="g-button">3</button>
<button id="_4" class="g-button">4</button>
</div>
​
​
<div style="position:absolute; top:300px;left:300px; font-family: Century Gothic;font-size:12px;font-weight: bold;">"Северный поток"</div>
<div style="position:absolute; top:420px;left:280px; font-family: Century Gothic;font-size:12px;font-weight: bold;">Через Беларусь-Польшу</div>
<div style="position:absolute; top:520px;left:350px; font-family: Century Gothic;font-size:12px;font-weight: bold;">Через Украину</div>
<div style="position:absolute; top:670px;left:250px; font-family: Century Gothic;font-size:12px;font-weight: bold;">"Южный поток"</div>
<div style="position:absolute; top:720px;left:400px; font-family: Century Gothic;font-size:12px;font-weight: bold;">"Голубой поток"</div>
​
​
​
<div id="text1"  class="hidden" style="position:absolute; top:100px;left:500px; width:300px; font-family: Century Gothic; font-size:14px;">
В 2006 году началась первая газовая война между Украиной и Россией. В 2008-2009 годах случилась вторая, а теперь - третья. С июня Россия перестала продавать, а Украина - покупать российский газ. Если до зимы стороны не договорятся, под большим вопросом окажется транзит в Европу. 
<p></p>
Но спустя годы у Украины все меньше козырей, в обход которой Россия строит трубопроводы.  Тогда же, в 2006 году, россияне экспортировали 161,5 млрд кубометров газа в страны Европы и основные маршруты выглядели так:
</div>
​
​
<div id="text2"  class="hidden" style="position:absolute; top:100px;left:450px; width:350px; font-family: Century Gothic; font-size:14px;">
Чтобы обойти украинские  магистральные трубопроводы "Уренгой-Ужгород" и "Союз", Россия придумала "Северный поток" по дну Балтийского моря. Его прокладка началась в апреле 2010 года, через два года - завершилась. Мощность первой нитки составила 27 млрд куб. м. Но в 2013 году через нее прокачали всего 12 млрд. 
<p></p>
Загрузить трубопровод не дают европейские ограничения "третьего энергопакета", который лишает монополистов вроде "Газпрома" доступа к трубам-стран конечных потребителей газа, "последней миле" (например, в Германии - трубопровод OPAL). <p></p>
В 2013 году  "Газпром" отправил на экспорт в европейские страны 161 млрд куб. м. газа и транзит выглядел уже так:</div>
​
​
<div id="text3"  class="hidden" style="position:absolute; top:100px;left:500px; width:300px; font-family: Century Gothic; font-size:14px;">
Не решив вопрос загрузки первой ветки «Северного потока», «Газпром» в 2012 году  протянул  вторую и увеличил мощность газопровода до 55 млрд кубометров в год. Все же, что если "Северный поток" при поддержке Европы заработает на полную? 
<p></p>
Транзит через Украину упадет, но при экспорте на уровне прошлого года «Газпрому» все равно придется качать через Украину 50-52 млрд куб. м.  «европейского» газа: 
 </div> 
​
 <div id="text4"  class="hidden" style="position:absolute; top:100px;left:450px; width:350px; font-family: Century Gothic; font-size:14px;">
Решить эту проблему должен был еще один трубопровод в обход Украины. С 2012 года ведется подготовка к строительству "Южного потока" по дну Черного моря  мощностью 63 млрд кубометров газа в год.
<p></p>
Однако 17 апреля 2014 года из-за военной агрессии России к  Украине Европарламент принял резолюцию, в которой призвал отказаться от строительства газопровода. Или Европа, как минимум, хочет ждать, пока Россия согласится на условия "третьего энергопакета". Восьмого июня Болгария объявила о своем решении прекратить строительство на своей территории.
<p></p>
Если "Южный поток" все же построят, Украина останется без транзита российского газа и своих привычных козырей
</div> 
 
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/topojson.v1.min.js"></script>
<script>
​
var width = 800;
var height = 870;
​
var topo,projection,path,svg,g;
​
var graticule = d3.geo.graticule();
​
var tooltip = d3.select("#container").append("div").attr("class", "tooltip hidden");
​
setup(width,height);
​
​
function setup(width,height){
  projection = d3.geo.mercator()
  .center([37.10, 63.35])
    //.translate([(width), (height)])
    .scale(700);
​
  path = d3.geo.path().projection(projection);
​
  svg = d3.select("#container").append("svg")
      .attr("width", width)
      .attr("height", height) 
.append("g")
    .attr("transform", "translate(0,0)");
  
  g = svg.append("g");
​
}
/////////////////////////////////////////////////////////////////////////
​
​
d3.json("data/world-topo-min.json", function(error, world) {
​
var color = d3.scale.linear()
.domain([0, 100])
    .range(["white", "darkblue"])
    .interpolate(d3.interpolateHcl);
​
  var countries = topojson.feature(world, world.objects.countries).features;
​
  topo = countries;
​
    var country = g.selectAll(".country").data(topo);
​
  country.enter().insert("path")
      .attr("class", "country")
   .attr("clip-path", "url(#chart-area)") 
      .attr("d", path)
      .attr("id", function(d,i) { return d.id; })
      .attr("title", function(d,i) { return d.properties.name; })
 .style("fill", function (d) {
  if (d.properties.name=="Tunisia"
  ||d.properties.name=="Egypt"
  ||d.properties.name=="Libya"
  ||d.properties.name=="Algeria"
  ||d.properties.name=="Morocco"
  ||d.properties.name=="Iceland"
  ||d.properties.name=="Georgia"
  ||d.properties.name=="Azerbaijan"
  ||d.properties.name=="Armenia"
  ||d.properties.name=="Iran, Islamic Republic of"
  ||d.properties.name=="Iraq"
  ||d.properties.name=="Saudi Arabia"
  ||d.properties.name=="Syrian Arab Republic"
  ||d.properties.name=="Lebanon"
  ||d.properties.name=="Israel"
  ||d.properties.name=="Palestine, State of"
  ||d.properties.name=="Jordan"
  ||d.properties.name=="Kuwait"
  ||d.properties.name=="Turkmenistan"
  ||d.properties.name=="Uzbekistan"
  ||d.properties.name=="Afghanistan"
  ||d.properties.name=="Tajikistan"
  ||d.properties.name=="Pakistan"
  ||d.properties.name=="China"
  ||d.properties.name=="Kyrgyzstan"
  ||d.properties.name=="India"
​
​
  ) {return "none"} 
 // else if (d.properties.colors>0) {return color(d.properties.colors);}
     if (d.properties.name=="Russian Federation"||d.properties.name=="Kazakhstan") 
  {return "white"} 
  else {return "#aaa"}
  
  })
  .attr("opacity", 1);
​
  //offsets for tooltips
  var offsetL = document.getElementById('container').offsetLeft+20;
  var offsetT = document.getElementById('container').offsetTop+10;
​
  
  svg.append("clipPath") 
    .attr("id", "chart-area")  
    .append("rect")
.attr("class", "clipPath")
.attr("x", 0)
.attr("y", 0)
    .attr("width", 800)
    .attr("height", 870);
  
  /*
  //tooltips
  country
    .on("mousemove", function(d,i) {
​
      var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );
​
      tooltip.classed("hidden", false)
             .attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
             .html(d.properties.name);
​
      })
      .on("mouseout",  function(d,i) {
        tooltip.classed("hidden", true);
      }); 
*/
});
​
var gaz = [
{name:"Северный поток",value2006:0,value13:24*2,value14:55*2,value15:55*2},
{name:"Беларусь-Польша",value2006:30*2,value13:34.7*2,value14:35*2,value15:35*2},
{name:"Украина",value2006:112*2,value13:84*2,value14:52*2,value15:0},
{name:"Южный поток",value2006:0,value13:0,value14:0,value15:55*2},
{name:"Голубой поток",value2006: 7*2,value13:13.7*2,value14:13.7*2,value15:13.7*2},
//{name:"Другие",value2006: 12,value13:5,value14:5,value15:55},
];
​
var Y2006 = function(d,i) {
  if(d.name=="Северный поток") {return 500} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value2006+3}
  if(d.name=="Украина"){return 500+gaz[0].value2006+gaz[1].value2006+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006+9}
  if(d.name=="Голубой поток"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006+gaz[3].value2006+9}
  if(d.name=="Другие"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006+gaz[3].value2006+gaz[4].value2006+12}
  };
  
var Y2013 =function(d,i) {
  if(d.name=="Северный поток") {return 500} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value13+3}
  if(d.name=="Украина"){return 500+gaz[0].value13+gaz[1].value13+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13+9}
  if(d.name=="Голубой поток"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13+gaz[3].value13+9}
  if(d.name=="Другие"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13+gaz[3].value13+gaz[4].value13+12}
  };
​
var Y2014 =function(d,i) {
  if(d.name=="Северный поток") {return 500} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value14+3}
  if(d.name=="Украина"){return 500+gaz[0].value14+gaz[1].value14+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14+9}
  if(d.name=="Голубой поток"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14+gaz[3].value14+9}
  if(d.name=="Другие"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14+gaz[3].value14+gaz[4].value14+12}
  };
​
var Y2015 =function(d,i) {
  if(d.name=="Северный поток") {return 500} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value15+3}
  if(d.name=="Украина"){return 500+gaz[0].value15+gaz[1].value15+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15+6}
  if(d.name=="Голубой поток"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15+gaz[3].value15+9}
  if(d.name=="Другие"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15+gaz[3].value15+gaz[4].value15+12}
  };
  
var Y2006text = function(d,i) {
  if(d.name=="Северный поток") {return 500+gaz[0].value2006/2} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value2006+gaz[1].value2006/2+3}
  if(d.name=="Украина"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006/2+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006+gaz[3].value2006/2+9}
  if(d.name=="Голубой поток"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006+gaz[3].value2006+gaz[4].value2006/2+12}
  if(d.name=="Другие"){return 500+gaz[0].value2006+gaz[1].value2006+gaz[2].value2006+gaz[3].value2006+gaz[4].value2006+15}
  };
​
var Y2013text = function(d,i) {
  if(d.name=="Северный поток") {return 500+gaz[0].value13/2} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value13+gaz[1].value13/2+3}
  if(d.name=="Украина"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13/2+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13+gaz[3].value13/2+9}
  if(d.name=="Голубой поток"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13+gaz[3].value13+gaz[4].value13/2+12}
  if(d.name=="Другие"){return 500+gaz[0].value13+gaz[1].value13+gaz[2].value13+gaz[3].value13+gaz[4].value13+15}
  };
​
var Y2014text = function(d,i) {
  if(d.name=="Северный поток") {return 500+gaz[0].value14/2} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value14+gaz[1].value14/2+3}
  if(d.name=="Украина"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14/2+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14+gaz[3].value14/2+9}
  if(d.name=="Голубой поток"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14+gaz[3].value14+gaz[4].value14/2+12}
  if(d.name=="Другие"){return 500+gaz[0].value14+gaz[1].value14+gaz[2].value14+gaz[3].value14+gaz[4].value14+15}
  };
​
​
var Y2015text = function(d,i) {
  if(d.name=="Северный поток") {return 500+gaz[0].value15/2} 
  if(d.name=="Беларусь-Польша"){return 500+gaz[0].value15+gaz[1].value15/2+3}
  if(d.name=="Украина"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15/2+6}
  if(d.name=="Южный поток"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15+gaz[3].value15/2+6}
  if(d.name=="Голубой поток"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15+gaz[3].value15+gaz[4].value15/2+9}
  if(d.name=="Другие"){return 500+gaz[0].value15+gaz[1].value15+gaz[2].value15+gaz[3].value15+gaz[4].value15+12}
  };
  
var y_bar = d3.scale.linear()
    .range([0, 250])
.domain([0, 150]);
​
​
  svg.selectAll(".bar")
      .data(gaz)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("fill", function(d,i) {
   if(d.name=="Северный поток") {return "#dfc27d"} 
  if(d.name=="Беларусь-Польша"){return "#80cdc1"}
  if(d.name=="Украина"){return "#018571"}
  if(d.name=="Южный поток"){return "#a6611a"}
  if(d.name=="Голубой поток"){return "#f6e8c3"}
  if(d.name=="Другие"){return "grey"}
  })
  //.attr("stroke","black") 
      .attr("x", 620)
      .attr("width", 100)
      .attr("y", Y2006)
      .attr("height", function(d) {return d.value2006; });
​
  
 svg.selectAll(".bar_text")
      .data(gaz)
    .enter().append("text")
      .attr("class", "bar_text")
      .attr("x", 730)
  .attr("y", Y2006text)
   .text(function(d) {if (d.value2006==0){return } else {return d.value2006/2;} })
​
/////////////////////////////////////////////////
​
​
var line = d3.svg.line()
  .tension(3) // Catmull–Rom
.interpolate("monotone")
    .x(function(d) {  return projection([d.lon, d.lat])[0];})
    .y(function(d) { return projection([d.lon, d.lat])[1];});
 
var  data_GTS_Ukraine = [
{name:"",lon:34.616001,lat:51.567587    },
{name:"Ромны",lon:33.550194,lat:50.826887},
{name:"Киев",lon: 30.421746,lat:50.271702},
{name:"",lon: 25.497860,lat:49.550826},
{name:"Ужгород",lon: 22.207712,lat:48.583497},
]
​
​
var  data_bel = [
{name:"Смоленск",lon:31.838599,lat:54.754176},
{name:"",lon:25.244908,lat:53.303025},
{name:"Франкфурт",lon: 14.373235,lat:52.437233},]
​
var  data_bel2 = [
{name:"",lon:31.357798,lat:55.164794},
{name:"",lon:26.244908,lat:53.303025},
{name:"Франкфурт",lon: 14.373235,lat:52.237233},]
​
var  data_South_Stream_no = [
{name:"Геленджик",lon:37.926562,lat:44.709820},
{name:"",lon:35.854303,lat:43.671649},
{name:"Варна",lon:27.994644,lat:43.200974},
{name:"Плевен",lon:24.720718,lat:43.424802},
{name:"Суботица",lon:19.633233,lat:46.066411},
{name:"терминал Баугартен",lon: 16.639459,lat:48.122873},]
​
 var  data_Nord_Stream = [
{name:"Выборг",lon:28.798118,lat:60.709529},
{name:"",lon:21.798118,lat:59.109529},
{name:"",lon:18.709529,lat:56.871900},
{name:"Грайфсвальт",lon:13.539825,lat:54.068715},
]
​
var   data_Opal = [
{name:"Грайфсвальт",lon:13.539825,lat:54.068715},
{name:"Ольбернхау",lon:13.303057,lat:50.658460},
]
​
var   data_Blue_Stream = [
{name:"",lon:37.926562,lat:44.709820},
{name:"Самсун",lon:36.358895,lat:41.260988},
]
​
​
///////////////////////////////////////////////
 
function transition(path) {
  path.transition()
      .duration(1500)
   .attrTween("stroke-dasharray", tweenDash);
}
function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) { return i(t); };
}
​
​
//////////////////////////////////////////////////
​
 
 var GTS_Ukraine = svg.append("path")
      .datum(data_GTS_Ukraine)
      .attr("class", "GTS_Ukraine")
      .attr("d", line)
   .attr("stroke-width",4)
   .attr("stroke", "#018571");
   
var GTS_Ukraine_circle = svg.selectAll(".GTS_Ukraine_circle")
   .data(data_GTS_Ukraine)
       .enter()
       .append("circle")
       .attr("class",".GTS_Ukraine_circle")
  .attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
       .attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
       .attr("r", 2)
       .style("fill", "black")
        .style("opacity", 1);
​
 var GTS_Ukraine_name = svg.selectAll(".GTS_Ukraine_name")
   .data(data_GTS_Ukraine)
       .enter()
       .append("text")
   .attr("class","GTS_Ukraine_name")
  .attr("x", function(d) {return projection([d.lon, d.lat])[0]+10;})
       .attr("y", function(d) {return projection([d.lon, d.lat])[1]+10;})
        .text(function(d) {return d.name});
​
  //////////////////////////////////////////////////// 
var bel = svg.append("path")
    .datum(data_bel)
.attr("class", "bel")
      .attr("d", line)
   .attr("stroke-width",4) 
   .attr("stroke", "#80cdc1") ;
   
svg.selectAll(".bel_circle")
   .data(data_bel)
       .enter()
       .append("circle")
       .attr("class",".bel_circle")
  .attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
       .attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
       .attr("r", 2)
       .style("fill", "black")
        .style("opacity", 1);
​
svg.selectAll(".bel_name")
   .data(data_bel)
       .enter()
       .append("text")
   .attr("class","bel_name")
  .attr("x", function(d) {return projection([d.lon, d.lat])[0]+10;})
       .attr("y", function(d) {return projection([d.lon, d.lat])[1]+10;})
        .text(function(d) {return d.name});
​
   /*
var South_Stream_yes = svg.append("path")
    .datum(data_South_Stream_yes)
.attr("class", "South_Stream_yes")
      .attr("d", line)
   .attr("stroke-width", 1).attr("stroke", "orange") ;
   */
//////////////////////////////////////////////////// 
​
var South_Stream_no = svg.append("path")
    .datum(data_South_Stream_no)
.attr("class", "South_Stream_no")
      .attr("d", line)
   .attr("stroke-width", 1)
   .attr ("stroke-dasharray", 3, .1)
   .attr("stroke", "black") ;
   
 svg.selectAll(".South_Stream_no_circle")
   .data(data_South_Stream_no)
       .enter()
       .append("circle")
       .attr("class",".South_Stream_no_circle")
  .attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
       .attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
       .attr("r", 2)
       .style("fill", "black")
        .style("opacity", 1);
​
svg.selectAll(".South_Stream_no_name")
   .data(data_South_Stream_no)
       .enter()
       .append("text")
   .attr("class","South_Stream_no_name")
  .attr("x", function(d) {return projection([d.lon, d.lat])[0]+10;})
       .attr("y", function(d) {return projection([d.lon, d.lat])[1]+10;})
        .text(function(d) {return d.name});
////////////////////////////////////////////////////
   
​
​
////////////////////////////////////////////////////
var Nord_Stream  = svg.append("path")
    .datum(data_Nord_Stream)
.attr("class", "Nord_Stream")
      .attr("d", line)
   .attr("stroke-width", 1).attr ("stroke-dasharray", 3, .1).attr("stroke", "black") ;
​
svg.selectAll(".Nord_Stream_circle")
   .data(data_Nord_Stream)
       .enter()
       .append("circle")
       .attr("class",".Nord_Stream_circle")
  .attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
       .attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
       .attr("r", 2)
       .style("fill", "black")
        .style("opacity", 1);
​
svg.selectAll(".Nord_Stream_name")
   .data(data_Nord_Stream)
       .enter()
       .append("text")
   .attr("class","South_Stream_no_name")
  .attr("x", function(d) {return projection([d.lon, d.lat])[0]+10;})
       .attr("y", function(d) {return projection([d.lon, d.lat])[1]+10;})
        .text(function(d) {return d.name});
​
​
////////////////////////////////////////////////////
/*
var Opal  = svg.append("path")
    .datum(data_Opal)
.attr("class", "Opal")
      .attr("d", line)
   .attr("stroke-width",4).attr ("stroke-dasharray", 3, .1).attr("stroke", "black") ;
*/   
 var Blue_Stream  = svg.append("path")
    .datum(data_Blue_Stream)
.attr("class", "Blue_Stream")
      .attr("d", line)
   .attr("stroke-width",4).attr("stroke", "#f6e8c3") ;
​
  svg.selectAll(".Blue_Stream_circle")
   .data(data_Blue_Stream)
       .enter()
       .append("circle")
       .attr("class",".Blue_Stream_circle")
  .attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
       .attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
       .attr("r", 2)
       .style("fill", "black")
        .style("opacity", 1);
​
svg.selectAll(".Blue_Stream_name")
   .data(data_Blue_Stream)
       .enter()
       .append("text")
   .attr("class","Blue_Stream_name")
  .attr("x", function(d) {return projection([d.lon, d.lat])[0]+10;})
       .attr("y", function(d) {return projection([d.lon, d.lat])[1]+10;})
        .text(function(d) {return d.name});
​
//////////////////////////////////////////////////////////////////////////////////
/////CHANGE/////
/////////////////////////////////////////////////////////////////////////////////////
​
d3.select("#_1").classed("g-active", true); 
d3.select("#_2").classed("g-active", false);
d3.select("#_3").classed("g-active", false);
d3.select("#_4").classed("g-active", false);
​
d3.select("#text1").classed("hidden", false);
d3.select("#text2").classed("hidden", true);
d3.select("#text3").classed("hidden", true);
d3.select("#text4").classed("hidden", true);
   
   d3.selectAll("button").on("click", change);
  
  function change() {
var paragraphID = d3.select(this)
                    .attr("id");
                    
if (paragraphID == "_1") {
d3.select("#_1").classed("g-active", true); 
d3.select("#_2").classed("g-active", false);
d3.select("#_3").classed("g-active", false);
d3.select("#_4").classed("g-active", false);
​
d3.select("#text1").classed("hidden", false);
d3.select("#text2").classed("hidden", true);
d3.select("#text3").classed("hidden", true);
d3.select("#text4").classed("hidden", true);
​
d3.selectAll(".GTS_Ukraine").transition()
      .duration(1000)
  .attr("opacity", 1);
  
d3.selectAll(".Nord_Stream_yes,.Nord_Stream_yes2,.South_Stream_yes,.bel2").remove();
​
​
d3.selectAll(".bar").transition()
      .duration(1000)
  .attr("y", Y2006)
      .attr("height", function(d) {return d.value2006; });
​
d3.selectAll(".bar_text").transition()
      .duration(1000)
  .attr("y", Y2006text)
      .attr("height", function(d) {return d.value2006; })
   .text(function(d) {if (d.value2006==0){return } else {return d.value2006/2;} });
  
}
​
if (paragraphID == "_2") {
d3.select("#_1").classed("g-active", false); 
d3.select("#_2").classed("g-active", true);
d3.select("#_3").classed("g-active", false);
d3.select("#_4").classed("g-active", false);
​
d3.select("#text1").classed("hidden",true );
d3.select("#text2").classed("hidden", false);
d3.select("#text3").classed("hidden",true );
d3.select("#text4").classed("hidden",true );
​
d3.selectAll(".GTS_Ukraine").transition()
      .duration(1000)
  .attr("opacity", 1);
  
d3.selectAll(".Nord_Stream_yes2,.South_Stream_yes,.bel2").remove();
​
 
svg.append("path")
 .datum(data_Nord_Stream)
 .attr("class", "Nord_Stream_yes")
    .attr("d", line)
.style("stroke", "#dfc27d")
.attr("stroke-width",3)
    .call(transition);
​
d3.selectAll(".bar").transition()
      .duration(1000)
  .attr("y", Y2013)
      .attr("height", function(d) {return d.value13; });
​
d3.selectAll(".bar_text").transition()
      .duration(1000)
  .attr("y", Y2013text)
      .attr("height", function(d) {return d.value13; })
   .text(function(d) {if (d.value13==0){return } else {return d.value13/2;} });
}
​
​
if (paragraphID == "_3") {
d3.select("#_1").classed("g-active", false); 
d3.select("#_2").classed("g-active",false );
d3.select("#_3").classed("g-active", true );
d3.select("#_4").classed("g-active", false);
​
d3.select("#text1").classed("hidden",true );
d3.select("#text2").classed("hidden", true);
d3.select("#text3").classed("hidden",false  );
d3.select("#text4").classed("hidden",true );
​
d3.selectAll(".GTS_Ukraine").transition()
      .duration(1000)
  .attr("opacity", 1);
  
svg.append("path")
 .datum(data_Nord_Stream)
 .attr("class", "Nord_Stream_yes")
    .attr("d", line)
.style("stroke", "#dfc27d")
.attr("stroke-width",5)
    .call(transition);
​
 d3.selectAll(".South_Stream_yes,.bel2").remove();
​
 
d3.selectAll(".bar").transition()
      .duration(1000)
  .attr("y", Y2014)
      .attr("height", function(d) {return d.value14; });
​
d3.selectAll(".bar_text").transition()
      .duration(1000)
  .attr("y", Y2014text)
      .attr("height", function(d) {return d.value14; })
    .text(function(d) {if (d.value14==0){return } else {return d.value14/2;} });
​
​
}
​
if (paragraphID == "_4") {
d3.select("#_1").classed("g-active", false); 
d3.select("#_2").classed("g-active",false );
d3.select("#_3").classed("g-active", false  );
d3.select("#_4").classed("g-active", true);
​
d3.select("#text1").classed("hidden",true );
d3.select("#text2").classed("hidden", true);
d3.select("#text3").classed("hidden",  true);
d3.select("#text4").classed("hidden",false );
​
svg.append("path")
 .datum(data_South_Stream_no)
 .attr("class", "South_Stream_yes")
    .attr("d", line)
.style("stroke", "#a6611a")
.attr("stroke-width",4)
    .call(transition);
​
    
d3.selectAll(".GTS_Ukraine").transition()
      .duration(1000)
  .attr("opacity", .2);
      
d3.selectAll(".bar").transition()
      .duration(1000)
  .attr("y", Y2015)
      .attr("height", function(d) {return d.value15; });
​
d3.selectAll(".bar_text").transition()
      .duration(1000)
  .attr("y", Y2015text)
      .attr("height", function(d) {return d.value15; })
   .text(function(d) {if (d.value15==0){return } else {return d.value15/2;} });
​
   
 }
​
​
};
​
</script>
<div style="position:absolute; top:870px; font-size: 12px;font-style:italic ">Данные: www.gazpromexport.ru/statistics/ и uk.wikipedia.org/  </div> 
​
</body>
</html>
    