D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html >
<head>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.hexbin.v0.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<style>
path {
  fill: none;
  stroke-linejoin: round;
}
​
​
​
#tooltip {
  color: #222; 
  background: #fff; 
  text-shadow: #f5f5f5 0 2px 0;
  border-radius: 2px; 
  box-shadow: 0px 0px 4px 0px #a6a6a6; 
  opacity: 1; 
  position: absolute;
  text-align:  center;
      }
      #tooltip.hidden {
        display: none;
      }
      #tooltip {
              font-family: Century Gothic; font-size:14px;
      }
     
.oblast {
      font-family: arial;
        font-size: 16px;
        color:black;
      }
.places,.leg{font-family: Century Gothic; font-size:10px; pointer-events: none;}
​
 svg{
     }
​
#title{
top: 10px;
left: 50px;
font-family:Century Gothic;
        font-size: 18px;
    position: fixed;
        opacity:1;  
font-weight: bold;      }
​
#title_{
top: 0px;
left: 0px;
font-family:Century Gothic;
        font-size: 20px;
    position: absolute;
        opacity:1;  
background-color: #FFFACD;
width: 320px;
height: 70px;
font-weight: bold;
color:grey;
    }
#vis{
top: 0px;
left: 0px;
    position: fixed;
        opacity:1;  
}
 .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 5px 5px 5px 5px; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
   margin: 5px 5px 5px 5px; /* Отступы вокруг картинки */
   }
</style>
</head>
<body>
​
<div id="vis" class=""></div>
<div id="vis_map" class=""></div>
​
<div id="title_" class=""> Чтобы просмотреть, наведите мышкой на визуализацию и прокручивайте вниз.</div>
​
<span class = "texts" style="font-family:Century Gothic;font-size: 12px; position:absolute;top:70px;left:480px;width: 330px;background-color: #fff;opacity:.7;"><span style="font-weight: bold;">1 июля. Вторник.</span> Святогорск, 25 километров от Изюма, последний безопасный город на пути к Славянску, где 20 июля Петр Порошенко объявил о  недельном перемирии. Дальше - не безоспасная территория АТО...К 1 июля позиции украинских силовиков выглядели так: они контролировали северо-запад от Славянска, в том числе гору Карачун южнее. Террористы, во главе с Игорем Гиркиным (позывной Стрелок) - сам Славянск и юго-востчные поселки от него. Через них "столица" террористов подпитывалась оружием и людьми.
</span>
<span class = "texts" style="font-family:Century Gothic;font-size: 12px; position:absolute;top:300px;left:280px;width: 350px;background-color: #fff;opacity:.7;"><span style="font-weight: bold;">3 июля. Четверг:</span> 
   С 1 по 3 июля силовики начали по-настоящему изолировать Славянск, освободив пять населенных пунктов на востоке - Райгородок, Рай-Александровка и другие.  Начались бои за Николаевку - последний опорный пункт террористов, после сдачи которого Славянск оказался бы в мертвом кольце. 
</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:580px;left:350px;width: 300px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 4 июля. Пятница.День</span>"Николаевка полностью под нашим контролем! Захвачено около 50 боевиков, сложивших оружие", - написал министр МВД Арсен Аваков в Фейсбуке.
</span>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:830px;left:510px;width: 330px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 5 июля. В ночь с Пятницы на субботу.</span> <img src="https://news.liga.net/upload/iblock/cc6/cc6ccdbff65c04f83a71ac9c9e4ea413.jpg"  width="200" height="150" class="leftimg" style="opacity:1;">Лидеры террористов  вместе с основными силами бежали из Славянска в направлении Краматорска.  Под утро город заняли украинские силовики. На горсовете снова подняли украинский флаг.
​
</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:1050px;left:500px;width: 330px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 5 июля. В ночь с Пятницы на субботу. </span><img src="https://img.pravda.com/images/doc/8/c/8c828cd-vojna-ato.jpg"  width="150" height="100" class="rightimg"> На Юге Слованяска возле села Андреевка c горы Карачун украинские силовики "поливали" огнем отступающих в сторону Краматорска террористов. Командование АТО заявило, что боевики бежали, прикрывась заложниками, взятыми из Славянска, на гражданских машинах с выключенными фарами, просеками и т. п.
</span>
​
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:1330px;left:500px;width: 300px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 5 июля. Cуббота. День </span><img src="https://news.liga.net/upload/iblock/08d/08df9f34606b13b5e11fc7cff17670eb.jpg"  width="200" height="150" class="rightimg"> В Краматорск вошли силы АТО. Хотя на окраинах города еще шли бои.
</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:1930px;left:220px;width: 350px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 6 июля. Воскресенье. Утро </span>  "Террористы оставили последние два города перед Донецком: Дружковка и Константиновка. Разведгруппы батальона Донбасс вошли в город, составляется карта возможных объектов минирования террористами. Над администрацией Константиновки водружен украинский флаг. Флаг ДНР пойдет на половой коврик", - написал  в "Фейсбуке" командир батальона "Донбасс" Семен Семенченко. Восточнее освобожден Артемовск (нет на карте).</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:3320px;left:220px;width: 250px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 6 июля. Воскресенье. Утро </span> <img src="https://news.liga.net/upload/resize_cache/iblock/767/380_230_2/7673f8666ea9b9ec6b904d1c8256a643.jpg"  width="150" height="100" class="rightimg"> Террористы отступили в Донецк.  Гиркин объявил себя "военным комендантом" города. По его словам, боевики покинули Славянск и Краматорск, чтобы сохранить силы, а Донецк оборонять удобнее. Он собирается создать военный совет из полевых командиров, чтобы согласовать вопросы обороны "Донецкой народной республики". Похоже, террористы решили окопаться в областном центре</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:3000px;left:300px;width: 350px;background-color: #fff;opacity:.7;"> <span style="font-weight: bold;"> 6 июля. Воскресенье. Утро </span> Силы АТО берут Донецк в "кольцо". В районе аэропорта были слышны интенсивные перестрелки и взрывы.  Звуки звучат во всех районах города. Боевые действия в воскресенье шли за пределами города со стороны поселка Пески и села Карловка.</span>
​
<span style="font-family:Century Gothic;font-size: 22px; position:absolute;top:3530px;left:650px;width: 350px;color:grey;font-weight: bold;"> Донецк</span>
​
<script type="text/javascript">
    
       //Width and height
            var w = 820;
            var h = 1200;
            //Define map projection
            var projection = d3.geo.mercator()
            .center([44.1, 48.5])
            .scale(7000)
            .translate([w /1, h / 3.7]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("#vis")
                        .append("svg")
                        .attr("width", w/3.6)
                        .attr("height", h*3);
    //Create SVG element
            var svg_map = d3.select("#vis_map")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h*3);
var cities = [
{"place":"","cat":1,"lon":37.546273,"lat":48.813874},
{"place":"","cat":1,"lon":37.783200,"lat":48.919460},
{"place":"","cat":1,"lon":37.723184,"lat":48.897414},
{"place":"","cat":1,"lon":37.843566,"lat":48.813892},
{"place":"","cat":1,"lon":37.964139,"lat":48.898029},
{"place":"","cat":1,"lon":38.008941,"lat":48.836809},
{"place":"","cat":2,"lon":37.774263,"lat":48.849167},
{"place":"Славянск","lon": 37.592468,"lat":48.847769},
{"place":"Краматорск","lon": 37.557531,"lat":48.723452},
{"place":"Дружковка","lon": 37.535248,"lat":48.621655},
{"place":"Константиновка","lon": 37.705928,"lat":48.523391},
{"place":"Донецк","lon": 37.791673,"lat":47.999148},
{"place":".","lon": 37.791673,"lat":47.999148},
{"place":"Святогорск","lon": 37.567270,"lat":49.039456},
​
];
    
​
 d3.json("ua_topo.json", function(error, ua) {  
            
  svg.append("path")
      .datum(topojson.feature(ua, ua.objects.states))
      .attr("class", "land")
      .attr("d", path);
      
       var obl =  svg.append("g")
            .attr("class", "obl")
            .selectAll("path")
            .data(topojson.feature(ua, ua.objects.states).features)
            .enter().append("path")
            .attr("d", path);
            
        obl.style("fill", function (d){if (d.properties.oblname=="Донецкая"){return "#fff"}else {return "none"}})
      
            //.style("fill", function (d) {
            //if(d.properties.oblname=="Cherkasy"){return "red"} 
            //else {return "steelblue"}
            //})
            .attr("opacity", 1);
​
​
​
svg_map.append("image")
    //.attr("clip-path", "url(#chart-area)") 
    //    .attr("clip-path", function(d,i){ return "url(#clipper_"+i+")"; })
    .attr("xlink:href", "https://i.imgur.com/QVmJ5X8.jpg")
        .attr("x", -20)
        .attr("y", 0)
        .attr("width", 1320)
        .attr("height",3550)
        .attr("opacity", .8)
        .style("pointer-events", "none");
                       
    ///////////////////////////////////////////////////////////        
            svg_map.selectAll(".lines")
        .data([
        {X1:475,Y1:70,X2:280,Y2:160},
        {X1:350,Y1:640,X2:700,Y2:750},
        {X1:510,Y1:1045,X2:250,Y2:910},
        {X1:500,Y1:1330,X2:300,Y2:1200},
        ])
            .enter().append("line")
              .attr("class", "lines")
               .attr ("stroke", "white")
               .attr ("opacity", .9)
               .attr ("stroke-width", 2)
               //.attr ("stroke-dasharray", 1, .1) 
                .attr("x1", function (d){return d.X1})
               .attr("y1", function (d){return d.Y1})
               .attr("x2", function (d){return d.X2})
               .attr("y2", function (d){return d.Y2});
               
               
    svg.selectAll(".circle")
                           .data(cities)
                           .enter()
                           .append("circle")
                           .attr("class", "circle")
                         .attr("id", function(d, i) { return "c-" + i; })
                           .attr("cx", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                           .attr("cy", function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                           //.attr("r", function(d) {
                         //       return Math.sqrt(parseInt(d.value) * 0.004);
                          // })
                          .attr("r", 3)
                            .style("fill", function(d, i) {if(d.place=="Святогорск"||d.place=="гора Карачун"||d.place=="Белбасовка") {return "white"} else {return "black"} } )
                           .style("stroke", "black")
                            .style("opacity", 1)
                            .append("title");
               
    //Load in cities data
svg.selectAll(".places")
                           .data(cities)
                           .enter()
                           .append("text")
                           .attr("class", "places")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0]+3;
                           })
                           .attr("y", function(d) {
                           if(d.place=="Славянск") { return projection([d.lon, d.lat])[1];}
                    
                             else {  return projection([d.lon, d.lat])[1];}
                           })
                           .attr("opacity",.7)
                           .text(function(d) {
                    return d.place});
               
    ////////////////////////////////////////////////////////           
​
    
});
    
/////////////////////////////////////////////////////////////////////////////////////////
var cbpAnimatedHeader = (function() {
​
    var docElem = document.documentElement,
        headerUp = document.querySelector( '.cbp-af-header' ),
        header = document.querySelector( '.rect_mask' ),
        didScroll = false,
        changeHeaderOn = 300;
        
    function init() {
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }
​
    ////////////////////////////////////
        
    function scrollPage() {
        var sy = scrollY();
        if ( sy >= 0&& sy < 200) {
        
d3.selectAll("#c-0").transition().duration(500).style("fill", "white");
d3.selectAll("#c-1,#c-2,#c-3,#c-4,#c-5,#c-6,#c-7,#c-8,#c-9,#c-10").transition().duration(500).style("fill", "black");
            }
                        
        else if ( sy >= 200 && sy < 300) {
    d3.selectAll("#c-0,#c-1,#c-2,#c-3,#c-4,#c-5").transition().duration(500).style("fill", "white");
    d3.selectAll("#c-6,#c-7,#c-8,#c-9,#c-10").transition().duration(500).style("fill", "black");
​
        }
​
        else if ( sy >= 300&& sy < 500 ) {
    d3.selectAll("#c-0,#c-1,#c-2,#c-3,#c-4,#c-5,#c-6").transition().duration(500).style("fill", "white");
    d3.selectAll("#c-7,#c-8,#c-9,#c-10").transition().duration(500).style("fill", "black");
        }
        
        else if ( sy >= 500&& sy < 700  ) {
            d3.selectAll("#c-0,#c-1,#c-2,#c-3,#c-4,#c-5,#c-6,#c-7").transition().duration(500).style("fill", "white");
            d3.selectAll("#c-8,#c-9,#c-10").transition().duration(500).style("fill", "black");
        }
        
        else if ( sy >= 700 && sy < 1000) {
    d3.selectAll("#c-0,#c-1,#c-2,#c-3,#c-4,#c-5,#c-6,#c-7,#c-8").transition().duration(500).style("fill", "white");
    d3.selectAll("#c-9,#c-10").transition().duration(500).style("fill", "black");
        }
        
        else if ( sy >= 1000 && sy < 1200) {
    d3.selectAll("#c-0,#c-1,#c-2,#c-3,#c-4,#c-5,#c-6,#c-7,#c-8,#c-9").transition().duration(500).style("fill", "white");
    d3.selectAll("#c-10").transition().duration(500).style("fill", "black");
        }
        
        else if ( sy >= 1200 && sy < 2500) {
    d3.selectAll("#c-0,#c-1,#c-2,#c-3,#c-4,#c-5,#c-6,#c-7,#c-8,#c-9,#c-10").transition().duration(500).style("fill", "white");
        
        d3.select("#c-10").transition().duration(500).style("fill", "white");
        d3.select("#c-12").transition().duration(500).attr("r", 3);
        }
        
        else if ( sy >= 2500 && sy < 3100) {
    d3.selectAll("circle").transition().duration(500).attr("r", function(d, i) {if(d.place==".") {return 8} else {return 3} });
        }
        didScroll = false;
    }
​
    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }
​
    init();
​
})();
​
​
</script>
<div style="font-family:  Century Gothic; font-size: 12px;font-style:italic; position:absolute;top:3640px;opacity:.8; "><span style="font-weight: bold;">Данные:</span> По материалам новостных лент hubs.com.ua,liga.net, pravda.com.ua
    </div> 
<hr style="font-family:Century Gothic;font-size: 12px; position:absolute;top:3670px;opacity:.8;" noshade size="1" width="800px" align="left">
</body>
</html>
    