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;
}
​
.land {
  fill: #ddd;
}
​
.states {
  stroke: #fff;
}
.hexagons path {
  stroke: lightsteelblue;
}
​
#tooltip {
  color: #222; 
  background: #fff; 
  text-shadow: #f5f5f5 0 2px 0;
  border-radius: 2px; 
  box-shadow: 0px 0px 4px 0px #a6a6a6; 
  opacity: .8; 
  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:11px; pointer-events: none;font-weight: bold;}
 #vis{
      position:absolute;
top:50px;}
.cities_sep {
  fill: none;
  }
</style>
</head>
<body>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:15px;left:0px;opacity:.8;">ОПУБЛИКОВАНО 10 ИЮЛЯ</span>
<div id="vis" class=""></div>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:55px;left:670px;width: 150px;"><span style="font-weight: bold;">Где засели террористы: </span> Вчера, 9 июля, в Министерстве обороны Украины рассказали, что основные города, находящиеся под контролем террористов -  Донецк, Горловка, Луганск, Снежное, Антрацит, Краснодон и Металлист. </span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:250px;left:670px;width: 150px;"><span style="font-weight: bold;">Освобождены: </span> Славянск, Краматорск, Дружковка, освобождены за последнюю неделю в результате успешной АТО.</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:380px;left:670px;width: 150px;"><span style="font-weight: bold;">Атаки террористов за минувшие сутки: </span> Было совершено шесть нападений, сообщает сайт СНБО, на подразделения вооруженных сил Украины - в районах Луганска, Дьяково, Веселая Гора, Лисичье, Мариновка, Счастье.</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:630px;left:350px;width: 350px;font-style:italic;background-color: #FFFACD;">Наведите мышкой на рамки квадратов на карте или на круги, что бы увидеть название города или села, где происходило происшествие.</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:230px;left:150px;width: 200px;">Марш-бросок АТО от Славянска к Донецку почти на 100 км</span>
​
<span style="font-family:Century Gothic;font-size: 14px; position:absolute;top:340px;left:400px;width: 200px;color:grey;font-weight: bold;">Территория АТО</span>
​
<div id="tooltip" class="hidden">
            <span id="place" style="font-size: 14px;" ></span>
</div>
​
<script type="text/javascript">
            //Width and height
            var w = 700;
            var h = 550;
            //Define map projection
            var projection = d3.geo.mercator()
            .center([36.3, 48.45])
            .scale(6400)
            .translate([w /4.3, h / 2]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("#vis")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
        
var cities = [
{"place":"Донецк","lon": 37.791673,"lat":47.999148},
{"place":"Луганск","lon":39.304206,"lat":48.549134},
{"place":"Днепропетровск","lon":35.040869,"lat":48.444310},
{"place":"Мариуполь","lon":37.555183,"lat":47.105072},
{"place":"Харьков","lon": 36.231038,"lat":49.982604},
{"place":"Запорожье","lon": 35.156918,"lat":47.859264},
{"place":"Ростов-на-Дону","lon": 39.714616,"lat":47.261507},
{"place":"Изюм","lon":  37.268309,"lat":49.203501}
];
​
var cities_free = [
{"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},
];
​
​
    
var cities_sep = [
{"place":"Донецк","cat":1,lon:37.766327,lat:47.993104},
{"place":"Горловка","cat":1,lon:38.125906,lat:48.322913},
{"place":"Металлист","cat":1,lon:39.275660,lat:48.623021},
{"place":"Луганск","cat":1,lon:39.334308,lat:48.526660},
{"place":"Краснодон","cat":1,lon:39.743638,lat:48.292514},
{"place":"Антрацит","cat":2,lon:39.088502,lat:48.129241},
{"place":"Снежное","cat":1,lon:38.763476,lat:48.021575},
{"place":"","cat":1,lon:37.766327,lat:47.993104},
​
];
​
var attack = [
{"place":"Счастье","cat":1,lon:39.228565,lat:48.756238},
{"place":"Мариновка","cat":1,lon:38.843524,lat:47.902413},
{"place":"Лисичье","cat":1,lon: 38.587202,lat:47.721074},
{"place":"Веселая гора","cat":1,lon: 39.251469,lat:48.709293},
{"place":"Дьяково","cat":1,lon: 39.134224,lat:47.939908},
{"place":"Луганск","lon":39.304206,"lat":48.549134},
​
​
];
    
var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) {  return projection([d.lon, d.lat])[0];})
    .y(function(d) { return projection([d.lon, d.lat])[1];});
    
​
   
var hexbin = d3.hexbin()
    .size([w, h])
    .radius(16);
    
var radius = d3.scale.sqrt()
    .domain([0, 8])
    .range([0, 8]);
    
d3.json("ua_topo.json", function(error, ua) {
​
 
            
var subunits = topojson.feature(ua, ua.objects.states);
  svg.append("path")
            .datum(subunits)
            .attr("d", path)            
            .style("fill", "black")
            .attr("opacity", 1);
​
  var obl =  svg.append("g")
            .attr("class", "obl")
              .attr("clip-path", "url(#chart-area)") 
            .selectAll("path")
            .data(topojson.feature(ua, ua.objects.states).features)
            .enter().append("path")
            .attr("d", path);
            
        obl.style("fill", "#ddd")
            .attr("opacity", 1);
​
​
​
  svg.append("clipPath") 
    .attr("id", "chart-area")  
    .append("rect")
.attr("class", "clipPath")
.attr("x", 0)
.attr("y", 0)
    .attr("width", 630)
    .attr("height", 800);
  
​
        svg.append("image")
    .attr("clip-path", "url(#chart-area)") 
    //    .attr("clip-path", function(d,i){ return "url(#clipper_"+i+")"; })
        .attr("xlink:href", "https://i.pixs.ru/storage/7/4/8/Bezimyanni_2645030_12822748.png")
        .attr("x", -72)
        .attr("y", -155)
        .attr("width", 800)
        .attr("height",800)
        .attr("opacity", .9)
        .style("pointer-events", "none");
        
        
    
​
               
    ///////////////////////////////////////////////////////////        
    
    svg.selectAll(".circle")
                           .data(cities)
                           .enter()
                           .append("circle")
                           .attr("class", "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", function(d) {
                         //       return Math.sqrt(parseInt(d.value) * 0.004);
                          // })
                          .attr("r", 2)
                           .style("fill", "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) {
                           if(d.place=="Луганск") { return projection([d.lon, d.lat])[0]+18;}
                             else {  return projection([d.lon, d.lat])[0]+5;}
                           })
                           .attr("y", function(d) {
                           if(d.place=="Луганск") { return projection([d.lon, d.lat])[1]+10;}
                           if(d.place=="Донецк") { return projection([d.lon, d.lat])[1]-9;}
                             else {  return projection([d.lon, d.lat])[1];}
                           })
                           .text(function(d) {
                    return d.place});
               
    ////////////////////////////////////////////////////////           
    svg.selectAll(".cities_sep")
                            .data(cities_sep)
                            .enter()
                            .append("rect")
                            .attr("class", "cities_sep")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                            .attr("width", 10)
                            .attr("y",  function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                            .attr("height", 10)
                            .attr("stroke-width", 3)
                            .attr("stroke", "black")
                            .style("fill", "none")  
                            .attr("opacity", .9)
                            .on("mouseover", function(d,i) {
                    
    //Update the tooltip position and value
d3.select("#tooltip")
   .style("left", (d3.event.pageX+30) + "px")
     .style("top", (d3.event.pageY-30) + "px")
    .select("#place")
    .text(d.place); 
​
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
​
​
})
.on("mouseout", function(d,i) {
d3.select("#tooltip").classed("hidden", true);
});
    
svg.selectAll(".cities_free")
                            .data(cities_free)
                            .enter()
                            .append("rect")
                            .attr("class", "cities_free")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                            .attr("width", 10)
                            .attr("y",  function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                            .attr("height", 10)
                            .attr("stroke-width", 3)
                            .attr("stroke", "steelblue")
                            .style("fill", "none")  
                            .attr("opacity", .9)
                            .on("mouseover", function(d,i) {
                    
    //Update the tooltip position and value
d3.select("#tooltip")
   .style("left", (d3.event.pageX+30) + "px")
     .style("top", (d3.event.pageY-30) + "px")
    .select("#place")
    .text(d.place); 
​
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
​
​
})
.on("mouseout", function(d,i) {
d3.select("#tooltip").classed("hidden", true);
});
​
​
​
svg.append("path")
      .datum(cities_sep)
      .attr("class", "cities_sep")
      .attr("d", line)
    .attr("stroke-width",1)
     .attr ("stroke-dasharray", 3, .1)
    .attr("stroke", "black");
​
svg.selectAll(".circle_attack")
                           .data(attack)
                           .enter()
                           .append("circle")
                           .attr("class", "circle_attack")
                           .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", "red")
                            .attr("stroke-width", 3)
                           .attr("stroke", "red")
                           .style("opacity", 1)
                           .on("mouseover", function(d,i) {
                    
    //Update the tooltip position and value
d3.select("#tooltip")
   .style("left", (d3.event.pageX+30) + "px")
     .style("top", (d3.event.pageY-30) + "px")
    .select("#place")
    .text(d.place); 
​
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
​
​
})
.on("mouseout", function(d,i) {
d3.select("#tooltip").classed("hidden", true);
});
    
svg.selectAll(".cities_free")
                            .data(cities_free)
                            .enter()
                            .append("rect")
                            .attr("class", "cities_free")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                            .attr("width", 10)
                            .attr("y",  function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                            .attr("height", 10)
                            .attr("stroke-width", 3)
                            .attr("stroke", "steelblue")
                            .style("fill", "none")  
                            .attr("opacity", .9)
                            .on("mouseover", function(d,i) {
                    
    //Update the tooltip position and value
d3.select("#tooltip")
   .style("left", (d3.event.pageX+30) + "px")
     .style("top", (d3.event.pageY-30) + "px")
    .select("#place")
    .text(d.place); 
​
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
​
​
})
.on("mouseout", function(d,i) {
d3.select("#tooltip").classed("hidden", true);
});;
///////////////////////////////////////////////////////////////////////////////////////////////////////
​
var leg = svg.append("g")
.attr("class","leg");
​
​
      
 leg.append("rect")
      .attr("x",645)
      .attr("y", 10)
      .attr("width", 10)
      .attr("height", 10)
      .attr("stroke-width", 3)
      .attr("stroke", "black")
      .style("fill", "none")  
      .attr("opacity", 1);
 
 leg.append("rect")
      .attr("x",645)
      .attr("y", 205)
      .attr("width", 10)
      .attr("height", 10)
      .attr("stroke", "steelblue")
      .style("fill", "none")  
        .attr("stroke-width", 3)
      .attr("opacity", 1);
    
 leg.append("circle")
      .attr("cx",645)
      .attr("cy", 345)
      .attr("stroke", "red")
      .attr("fill", "red")
      .attr("r", 3)
      .attr("stroke-width", 3)
      .attr("opacity", 1);
      
})  
​
</script>
<hr style="font-family:Century Gothic;font-size: 12px; position:absolute;top:700px;opacity:.8;" noshade size="1" width="800px" align="left">
<div style="font-family:  Century Gothic; font-size: 12px;width:  500px;opacity:.8;position:absolute;top:630px;">Данные: СНБО и пресс-служба Минобороны.
 </div> 
​
</body>
</html>
    