карта АТО2

<!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: 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:11px; pointer-events: none;}
 #vis{
	  position:absolute;
top:50px;}
</style>
</head>
<body>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:15px;left:0px;opacity:.8;">ОПУБЛИКОВАНО 4 ИЮЛЯ</span>
<div id="vis" class=""></div>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:65px;left:670px;width: 150px;"><span style="font-weight: bold;">Освобождены: </span> Группа "Информационное сопротивление" и командование сил АТО сообщают, что за последние три дня, с момента возобновления АТО, были освобождены от террористов пять населенных пунктов - Райгородок, Резниковка, Рай-Александровка, Старый Караван и Брусовка, также взять под контроль пропускной пункт на границе Изварино. По карте не трудно заметить, что благодаря этому, наконец, Славянск окружается и берется в полную блокаду.</span>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:500px;left:670px;width: 150px;"><span style="font-weight: bold;">В процессе: </span> По состоянию на вечер 3 июля, шли бои за Металлист под Луганском и поселок Николаевка под Славянском</span>

<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:650px;left:550px;width: 150px;font-style:italic;background-color: #FFFACD;">Наведите мышкой на рамки красных и оранжевых квадратов на карте, что бы увидеть название города или села</span>

svg.append("path")
      .datum(topojson.feature(ua, ua.objects.states))
      .attr("class", "land")
      .attr("d", path);

svg.append("path")
  .attr("clip-path", "url(#chart-area)") 
      .datum(topojson.feature(ua, ua.objects.states).features)
      .attr("class", "states")
      .attr("d", path);

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.append("g")
      .attr("class", "hexagons")
    .selectAll("path")
      .data(hexbin(walmarts).sort(function(a, b) { return b.length - a.length; }))
    .enter().append("path")
	.attr("opacity", 1)
      .attr("d", function(d) { return hexbin.hexagon(); })
	//	.attr("d", function(d) { return hexbin.hexagon(radius(d.length)); })
	 // .attr("d", function(d) { return hexbin.hexagon(radius(d3.median(d, function(d) { return +d.dobkin*100; }))); })
		.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
		.style("fill", "lightsteelblue")
	  //.style("fill", function(d) { return color(d3.median(d, function(d) { return +d.dobkin; })); });

///////////////////////////////////////////////////////////		   
	
	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", 3)
                           .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) {
                               return projection([d.lon, d.lat])[0]+3;
                           })
                           .attr("y", function(d) {
						   if(d.place=="Славянск") { return projection([d.lon, d.lat])[1]-15;}
						   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_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", 2)
							.attr("stroke", function (d){if (d.cat==1){return "red"} else {return "orange"}})
							.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", 20)
	  .attr("width", 10)
	  .attr("height", 10)
	  .attr("stroke", "red")
	  .style("fill", "none")  
	  .attr("opacity", 1);
 
 leg.append("rect")
      .attr("x",645)
      .attr("y", 455)
	  .attr("width", 10)
	  .attr("height", 10)
	  .attr("stroke", "orange")
	  .style("fill", "none")  
	  .attr("opacity", 1);
	  
  
	/*
	svg.append("defs").append("path")
    .attr("id", "s3")
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");

var thing = svg.append("g")
    .attr("id", "thing")
    .style("fill", "navy");
	thing.append("use")
    .attr("xlink:href", "#s3")
    .style("stroke", "black")
    .style("fill", "none");
	*/
//Load in cities data
/*
	
	
*/
</script>
<hr style="font-family:Century Gothic;font-size: 12px; position:absolute;top:750px;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;"><span style="font-weight: bold;color:steelblue;">Светлосиним цветом </span>отмечена площадь зоны АТО или территория, контролируемая террористами. Источник данных для нее - более 100 сообщений о столкновениях за последние несколько недель. "Соты" помечены только на тех территориях, на которых зафиксированы атаки террористов на силы АТО, подрывы или диверсии инфраструктуры и т. п. Список ведет в он-лайне сайт <a href="https://texty.org.ua/">texty.org.ua</a>. Он в открытом доступе в таблицах google-docs и доступен по <a href="https://docs.google.com/spreadsheets/d/15dk9iT_6QST0MXTNZErv_MICuw103BAur-nESeo7VsI/pubhtml">этой</a>  ссылке 
 </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