D3 Examples - ЮФО

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
/* CSS goes here. */
​
.subunit { fill: #ccc; opacity: 1; }
.subunit:hover { fill: #a3c; opacity: 1; }
​
.subunit.Ростовская.область{ fill: #ddc; }
.subunit.Ростовская.область:hover { fill: #a3c; opacity: 1; }
​
.subunit.Ставропольский.край { fill: #cdd; }
.subunit.Ставропольский.край:hover { fill: #a3c; opacity: 1; }
​
.subunit.Астраханская.область { fill: #ddc; }
.subunit.Астраханская.область:hover { fill: #a3c; opacity: 1; }
​
.subunit.Дагестан { fill: #dcd; }
.subunit.Дагестан:hover { fill: #a3c; opacity: 1; }
​
.subunit.Чеченская.республика{ fill: #ddc; }
.subunit.Чеченская.республика:hover { fill: #a3c; opacity: 1; }
​
.subunit.Карачаево-Черкесская.республика { fill: #ddc; }
.subunit.Карачаево-Черкесская.республика:hover { fill: #a3c; opacity: 1; }
​
.subunit.Волгоградская.область { fill: #dcd; }
.subunit.Волгоградская.область:hover { fill: #a3c; opacity: 1; }
​
.subunit.Адыгея{ fill: #ddc; }
.subunit.Адыгея:hover { fill: #a3c; opacity: 1; }
​
.subunit.Республика.Калмыкия { fill: #cdc; }
.subunit.Республика.Калмыкия:hover { fill: #a3c; opacity: 1; }
​
.subunit.Краснодарский.край { fill: #dcd; }
.subunit.Краснодарский.край:hover { fill: #a3c; opacity: 1; }
​
​
.subunit-boundary {
  fill: none;
  stroke: #AAA;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}
​
.subunit-label {
  fill: #777;
  fill-opacity: .9;
    stroke: #AAA;
  font-size: 30px;
  font-weight: 300;
  text-anchor: middle;
}
​
.subunit-boundary.hide {
  stroke: #aaa;
}
​
.subunit.hide { display: none; }
​
.subunit-label {
  fill: #777;
  fill-opacity: .5;
  font-size: 20px;
  font-weight: 300;
  text-anchor: middle;
   word-wrap: break-word;
  width:10px;
}
​
.place,
.place-label {
  fill: #444;
}
​
text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  pointer-events: none;
}
​
.hide {
  display: none;
}
​
div.tooltip {
  position: absolute; 
  text-align: center; 
  width: 90px;  
  height: 28px;   
  padding: 2px; 
  font: 12px sans-serif;  
  background: white;
  stroke:#a3c;
  fill-opacity: .2; 
  border: 0px;          
  border-radius: 8px;
  
}
​
.selected { fill:#000; fill-opacity:1;}
​
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var width = 1200,
    height = 1200;
​
var div = d3.select("body").append("div")   
  .attr("class", "tooltip")               
  .style("opacity", 0);
​
var projection = d3.geo.albers()
    .center([26, 43.5])
    .rotate([-20, 0])
    .parallels([50, 60])
    .scale(1200 * 4)
    .translate([width / 2, height / 2]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("ufo.json", function(error, uk) {
  console.log(uk); 
​
  svg.selectAll(".subunit")
      .data(topojson.feature(uk, uk.objects.subunits).features)
    .enter().append("path")
      .attr("class", function(d) { 
          return "subunit " + d.properties.ADM4_NAME; })
      .attr("d", path)
  
  .on("mouseover", function(d) {
    d3.select(this)
    .transition().duration(300);
​
    div.transition().duration(300)
    .style("opacity", 1);
    
    div.text(d.properties.NAME)
    .style("left", (d3.event.pageX) + "px")
    .style("top", (d3.event.pageY -30) + "px");
  })
​
  .on("mouseout", function() {
    d3.select(this)
    .transition().duration(300);
    
    div.transition().duration(300)
    .style("opacity", 0);
  });
​
  svg.append("path")
    .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b  }))
    .attr("d", path)
    .attr("class", "subunit-boundary");
​
  svg.append("path")
    .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b  }))
    .attr("d", path)
    .attr("class", "subunit-boundary hide");
​
svg.append("path")
    .datum(topojson.feature(uk, uk.objects.stavropol))
    .attr("d", path)
    .attr("class", "place");
​
svg.selectAll(".place-label")
    .data(topojson.feature(uk, uk.objects.stavropol).features)
  .enter().append("text")
    .attr("class", function(d) {
​
      if (d.properties.TYPE=="г") return "place-label"
      else return "hide"})
    .attr("transform", function(d) {
    if (d.properties.TYPE=="г") return "translate(" + projection(d.geometry.coordinates[0][0]) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.properties.NAME; });
​
svg.selectAll(".place-label")
    .attr("x", function(d) { return d.geometry.coordinates[0][0][0] > 47 ? 6 : -6; })
    .style("text-anchor", function(d) { return d.geometry.coordinates[0][0][0] > -1 ? "start" : "end"; });
​
​
svg.selectAll(".subunit-label")
    .data(topojson.feature(uk, uk.objects.regions).features)
  .enter().append("text")
    .attr("class", function(d) { return "subunit-label " + d.id; })
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.properties.NAME; }); 
​
//https://bl.ocks.org/mbostock/7555321
​
});
​
​
​
​
</script>
    