map_ATO3

<!DOCTYPE html>
<meta charset="utf-8">
<html >
<head>

.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>

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:38.374551,lat:48.904009},
{"place":"Северодонецк","cat":1,lon:38.496773,lat:48.953551},
{"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);
});;
///////////////////////////////////////////////////////////////////////////////////////////////////////

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.hexbin.v0.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.hexbin.v0.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js