D3 Examples - gaz

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html >
<head>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script src="d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<style>
​
.axiss {
  font: 10px sans-serif;
  font-family:Century Gothic;
}
​
.axiss path,
.axiss line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.x.axiss path {
  display: none;
}
​
.axis {
  font: 10px sans-serif;
  font-family:Century Gothic;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  
}
​
.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 10px;
  stroke-linecap: round;
}
​
.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 8px;
  stroke-linecap: round;
}
​
.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  pointer-events: none;
}
.text_consume, .text_all, .text_source, .text_exp
{font-family:Century Gothic;
font-size: 12px;}
  
 #annotation_all
 {font-family:Century Gothic;
font-size: 12px;
position:absolute;
top:50px;
left:380px;
width: 400px;}
  
  #annotation_search
 {font-family:Century Gothic;
font-size: 12px;
position:absolute;
top:370px;
left:380px;
width: 400px;}  
​
#annotation_consume
 {font-family:Century Gothic;
font-size: 12px;
position:absolute;
top:730px;
left:380px;
width: 400px;}
​
#annotation_exp
 {font-family:Century Gothic;
font-size: 12px;
position:absolute;
top:1130px;
left:380px;
width: 400px;}
​
</style>
</head>
<body>
<div id="annotation_all" class="">    
<div style="font-weight: bold; font-size: 18px;">Общее потребление газа в Украине за последние девять лет</div><p></p>
Потребление газа постепенно снижается. И дело тут не в падающей экономике Украины. После газовой войны 2009 года наши металлурги, больше других палившие российский газ, провели эффективную модернизацию. Постепенно реформируется и коммунальное хозяйство, в частности,  теплокоммунэнерго, которые переводят свои котельные на альтернативные источники. Потребление ими газа только  в прошлом году снизилось на 10%. 
</div>
<div id="annotation_search" class="">    
<div style="font-weight: bold;font-size: 18px;">Откуда берется газ и что, если Россия перекроет вентель</div><p></p>
<p></p>
В 2013 г. "Газпром" поставил для потребностей Украины 28 млрд кубометров (включая частным компаниям). В 2014-м в прогнозном газовом балансе Украины было запланировано 33 млрд кубометров.<p></p>
В случае перекрытия вентеля Кремлем, Украина будет наращивать реверсные поставки. "В настоящее время они составляют 12 млн кубометров в сутки, мы уже в ближайшее время можем увеличить их до 20. С учетом реверса из Словакии с сентября можем рассчитывать на 40 млн кубометров ежесуточно", - рассказал вчера Hubs министр энергетики Юрий Продан. Помимо Словакии в числе транзитеров - Венгрия и Польща.
​
<p></p>
<span style="background-color: #FFFACD;">Перетягивайте круг, что бы изменить объем газпромовского газа и увидеть вероятный эффект </span>
</div>
<div id="annotation_consume" class="">    
<div style="font-weight: bold;font-size: 18px;">Кто и сколько потребляет газа </div><p></p>
До зимы Украина удовлетворяет потребности в газе за счет внутренней добычи. Но зимой потребление растет и нужен импорт. Причем для зимнего потребления закачивать газ в подземные хранилища нужно уже с середины июля, иначе к зиме не успеют наполнить необходимый объем, отмечает Дмитрий Марунич, сопредседатель Фонда энергетических стратегий. Но если игра нервов затянется, зимой под "нож" первым делом пождут промышленники. "В 2009 году первым делом отключили промышленность. Тут будет тоже самое", - говорит Марунич.  Но в этот раз Украину коллапс  не ждет. И промышленность в упадке, и реверсные поставки есть. 
</div>
<p></p>
<div id="annotation_exp" class="">    
<div style="font-weight: bold;font-size: 18px;">Украина - второй по объемам потребитель российского газа </div><p></p>
Украина наряду с Италией, Германией и Турцией входит в группу крупнейших контрагентов "Газпрома". О поисках новых потребителей, вместо остановившихся поставок в Украину, в российской монополии пока ничего не сообщали</div>
​
<script type="text/javascript">
           var margin = {top: 50, right: 20, bottom: 20, left: 5},
    width = 800 - margin.left - margin.right,
    height = 1300 - margin.bottom - margin.top;
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
  
                  
​
////////////////////////////////////////////////////////////////////////
​
​
​
​
  
var x = d3.scale.linear()
    .range([0,width/3])
.domain([0, 33]);
​
​
     ///////////////////////////////////////////// 
 
var x_all = d3.scale.linear()
    .range([0,width/3])
.domain([0, 80]);
​
var xAxis_all = d3.svg.axis()
    .scale(x_all)
    .orient("bottom")
    .ticks(8);
​
 svg.append("g")
      .attr("class", "x axiss")
   .attr("transform", "translate(70,0 )")
      .call(xAxis_all)
    .append("text")
      .attr("y", 26)
      .attr("x", 76)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("млрд куб. м.");
  
var dataset_all = [
{year:"2005",value:76.4},
{year:"2006",value:73.9},
{year:"2007",value:69.9},
{year:"2008",value:66.3},
{year:"2009",value:51.9},
{year:"2010",value:57.7},
{year:"2011",value:59.3},
{year:"2012",value:54.8},
{year:"2013",value:50.4},
{year:"2014",value:50.4},
];
​
svg.selectAll(".rect_all_invariable")
                           .data(dataset_all)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_all_invariable")
   .attr("transform", "translate(0,40)")
                           .attr("x", 70)
.attr("width", function(d) { return x_all(d.value); })
.attr("y",  function(d,i) { return  i*20; } )
.attr("height", 18)
.style("fill", "#ddd")  
.attr("opacity", .7); 
   
svg.selectAll(".rect_all")
                           .data(dataset_all)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_all")
    .attr("id", function(d, i) { return "rect_all-" + i; })
   .attr("transform", "translate(0,40)")
                           .attr("x", 70)
.attr("width", function(d) { return x_all(d.value); })
.attr("y",  function(d,i) { return  i*20; } )
.attr("height", 18)
.style("fill", "orangered")  
.attr("opacity", .5);  
​
svg.selectAll(".text_all")
.data(dataset_all)
.enter()
.append("text")
.attr("class", "text_all")
 .attr("id", function(d, i) { return "text_all-" + i; })
.attr("transform", "translate(0,40)")
.attr("x", 20)
.attr("y",  function(d,i) { return  15 + i*20; } )
.text(function(d,i) { return d.year});  
  
​
  
////////////////////////////////////////////////////////
​
var xAxis_source = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8);
​
 svg.append("g")
      .attr("class", "x axiss")
 .attr("transform", "translate(70,320)")
      .call(xAxis_source);
​
var dataset_source =   [
{name:"Газпром",value:28},
{name:"Укргаздоб.",value:15.1},
{name:"Укрнафта",value:1.9},
{name:"ЧНГ",value:1.6},
{name:"остальные",value:2.2},
{name:"Словакия",value:1.977},
{name:"Венгрия",value:0},
];
​
svg.selectAll(".rect_source_inv")
                           .data(dataset_source)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_source_inv")
      .attr("transform", "translate(0,350)")
                           .attr("x", 70)
      .attr("width", function(d) { return x(d.value); })
      .attr("y",  function(d,i) { return i*20; } )
      .attr("height", 18)
                         .style("fill", "#ddd")  
                           .attr("opacity", .7);  
   
svg.selectAll(".rect_source")
                           .data(dataset_source)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_source")
   .attr("id", function(d, i) { return "rect_source-" + i; })
      .attr("transform", "translate(0,350)")
                           .attr("x", 70)
      .attr("width", function(d) { return x(d.value); })
      .attr("y",  function(d,i) { return i*20; } )
      .attr("height", 18)
                         .style("fill", "orangered")  
                           .attr("opacity", .5);  
​
svg.selectAll(".text_source")
.data(dataset_source)
.enter()
.append("text")
.attr("class", "text_source")
.attr("transform", "translate(0,350)")
.attr("x", 0)
.attr("y",  function(d,i) { return  15 + i*20; } )
.text(function(d,i) { return d.name});  
​
//////////////////////////////////////////////////////////////
​
var xAxis_consume = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8);
​
 svg.append("g")
      .attr("class", "x axiss")
   .attr("transform", "translate(70,670 )")
      .call(xAxis_consume);
  
​
var dataset_consume =    [
{name:"население",value:16.2},   
{name:"ТКЭ",value:10.2},
{name:"ТЭК",value:6.17},
{name:"химики",value:6.13},
{name:"ГМК",value:4.54},
{name:"потери",value:3.98},
{name:"остальные",value:3.18},
​
/*
{name:"Одесский припортовый завод",value:1.300},
{name:"Стирол",value:1.086},
{name:"Северодонецкий Азот ",value:1.088},
{name:"Черкасский Азот",value:0.974},
{name:"Ривнеазот",value:0.426},
{name:"Днипроазот",value:0.657},
{name:"Сумыхимпромом",value:0.63},
{name:"АrcelorMittal Кривой Рог",value:0.897},
{name:"Мариупольский меткомбинат им. Ильича",value:0.611},
{name:"Азовсталь",value:0.566},
{name:"Николаевский глиноземный завод",value:0.471},
{name:"ДМК им Дзержинского",value:0.297},
{name:"Запорожсталь",value:0.236},
{name:"Южный ГОК",value:0.197},
{name:"Енакиевский металлургический завод",value:0.193},
{name:"Полтавский ГОК",value:0.175},
{name:"Алчевский меткомбинат",value:0.159},
{name:"Нижнеднепровский трубопрокатный завод",value:0.111},
*/
];
​
svg.selectAll(".rect_consume_inv")
                           .data(dataset_consume)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_consume_inv")
    .attr("transform", "translate(0,700)")
                     .attr("x", 70)
      .attr("width", function(d) { return x(d.value); })
      .attr("y",  function(d,i) { return i*20; } )
      .attr("height", 18)
                         .style("fill", "#ddd")  
                           .attr("opacity", .7); 
   
svg.selectAll(".rect_consume")
                           .data(dataset_consume)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_consume")
   .attr("id", function(d, i) { return "rect_consume-" + i; })
    .attr("transform", "translate(0,700)")
                     .attr("x", 70)
      .attr("width", function(d) { return x(d.value); })
      .attr("y",  function(d,i) { return i*20; } )
      .attr("height", 18)
                         .style("fill", "orangered")  
                           .attr("opacity", .5);            
​
  
svg.selectAll(".text_consume")
.data(dataset_consume)
.enter()
.append("text")
.attr("class", "text_consume")
.attr("transform", "translate(0,700)")
.attr("x", 0)
.attr("y",  function(d,i) { return  15 + i*20; } )
.text(function(d,i) { return d.name});  
​
//////////////////////////////////////////////////////////////
​
var xAxis_exp = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8);
​
 svg.append("g")
      .attr("class", "x axiss")
   .attr("transform", "translate(70,970 )")
      .call(xAxis_consume);
  
​
var dataset_exp =    [
{name:"Италия",value:25.33},
{name:"Турция",value:26.61},
{name:"Германия",value:40.18},
{name:"Австрия",value:5.23},
{name:"Словакия",value:5.42},
{name:"Венгрия",value:6.00},
{name:"Чехия",value:7.32},
{name:"Франция",value:8.21},
{name:"Польша",value:9.80},
{name:"Украина",value:28},
{name:"другие",value:23},
];
​
svg.selectAll(".rect_exp_inv")
                           .data(dataset_exp)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_exp_inv")
    .attr("transform", "translate(0,1000)")
                     .attr("x", 70)
      .attr("width", function(d) { return x(d.value); })
      .attr("y",  function(d,i) { return i*20; } )
      .attr("height", 18)
                         .style("fill", "#ddd")  
                           .attr("opacity", .7); 
   
svg.selectAll(".rect_exp")
                           .data(dataset_exp)
                           .enter()
                           .append("rect")
                           .attr("class", "rect_exp")
   .attr("id", function(d, i) { return "rect_exp-" + i; })
    .attr("transform", "translate(0,1000)")
                     .attr("x", 70)
      .attr("width", function(d) { return x(d.value); })
      .attr("y",  function(d,i) { return i*20; } )
      .attr("height", 18)
                         .style("fill", "orangered")  
                           .attr("opacity", .5);            
​
  
svg.selectAll(".text_exp")
.data(dataset_exp)
.enter()
.append("text")
.attr("class", "text_exp")
.attr("transform", "translate(0,1000)")
.attr("x", 0)
.attr("y",  function(d,i) { return  15 + i*20; } )
.text(function(d,i) { return d.name});  
///////////////////////////////////////////////////////////////////
​
​
var x_slider = d3.scale.linear()
    .domain([0, 33])
    .range([width/2, width])
    .clamp(true);
​
var brush = d3.svg.brush()
    .x(x_slider)
    .extent([0, 0])
    .on("brush", brushed);
​
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(-20,630)")
    .call(d3.svg.axis()
      .scale(x_slider)
      .orient("bottom")
      .tickFormat(function(d) { return d; })
      .tickSize(0)
      .tickPadding(12))
  .select(".domain")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "halo");
​
​
var slider = svg.append("g")
    .attr("class", "slider")
    .call(brush);
​
slider.selectAll(".extent,.resize")
    .remove();
​
slider.select(".background")
    .attr("height", height);
​
var handle = slider.append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(-20,630)")
    .attr("r", 9);
​
slider
    .call(brush.event)
  .transition() // gratuitous intro!
    .duration(1500)
    .call(brush.extent([28, 28]))
    .call(brush.event);
​
function brushed() {
  var value = brush.extent()[0];
​
  if (d3.event.sourceEvent) { // not a programmatic event
    value = x_slider.invert(d3.mouse(this)[0]);
    brush.extent([value, value]);
  }
​
  handle.attr("cx", x_slider(value));
  d3.select("#rect_source-0")
  .attr("width", function(d) {if (value<15.4) {return x(value); } else {return x(value); }});
  
  
   
   d3.select("#rect_source-5")
  .attr("width", function(d) {if (value<20) {return x(10) } else {return x(30-value);}});
  d3.selectAll("#rect_source-6")
  .attr("width", function(d) {if (value<15.4) {return x(4.6) } else {return x(20-value);}});
  
  
  d3.select("#rect_consume-3")
  .attr("width", function(d) {if (value<15.4) {return x(value - 15.4 + d.value) } else {return x(d.value);}});
  
  d3.select("#rect_consume-4")
  .attr("width", function(d) {if (value<9.27) {return x(value - 9.27 + d.value) } else {return x(d.value);}});
  
  d3.select("#rect_consume-6")
  .attr("width", function(d) {if (value<4.73) {return x(value - 4.73 + d.value) } else {return x(d.value);}});
  
   d3.select("#rect_consume-1")
  .attr("width", function(d) {if (value<1.55) {return x(value - 1.55 + d.value) } else {return x(d.value);}});
  
  
   d3.select("#rect_all-9")
  .attr("width", function(d) {if (value<15.4) {return x_all(value - 15.4 + d.value) } if (value>28) { return x_all(24 +value) } else {return x_all(d.value);}});
  
​
​
     d3.select("#rect_exp-9")
  .attr("width", function(d) {return x(value);});
  
  
}
​
</script>
<hr noshade size="1" width="750px" align="left">
​
</body>
</html>
    