D3 Examples - d3 geo

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>D3.js v4 Mapping Tutorial 1</title>
  
  <style>
  
  svg {
            font-family: sans-serif;
        }
​
        path.feature {
            fill: rgba(255, 0, 0, 0.5);
        }
        path.feature:hover {
            fill: rgba(255, 140, 0, 0.5);
            cursor: zoom-in;
        }
        text.halo {
            opacity: 0.7;
            stroke: #fff;
            stroke-width: 5px;
        }
  
  </style>
</head>
<body>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 
  
<script>
    var projection = d3
        .geoMercator()
        .scale(800)
//      .rotate([-0.25, 0.25, 0])
        .center([77.5356944, 45.0747547]);
    
    var path = d3.geoPath().projection(projection);　
    
    var map = d3.select("body")
        .append("svg")
        .attr("width", 960)
        .attr("height", 500); 
     var labels = map.append('g').attr('class', 'labels')
​
    d3.json("qazaqstan.json", drawMaps);
​
    function drawMaps(geojson) {
    map.selectAll("path")
            .data(geojson.features)
            .enter()
            .append("path")
            .attr("d", path)
            .attr("fill", "steelblue")
            .attr("fill-opacity", 0.1)
            .attr("stroke", "steelblue")
   
    labels.selectAll('.label').data(geojson.features).enter().append('text')
        .attr("class", "halo")
        .attr('transform', function(d) {
            return "translate(" + path.centroid(d) + ")";
        })
        .style('text-anchor', 'middle')
        .text(function(d) {
            return d.properties.name
        });
    labels.selectAll('.label').data(geojson.features).enter().append('text')
        .attr("class", "label")
        .attr('transform', function(d) {
            return "translate(" + path.centroid(d) + ")";
        })
        .style('text-anchor', 'middle')
        .text(function(d) {
            return d.properties.name
        });
   
​
    }
​
    d3.json("cities.json", drawCities);
​
    function drawCities(geojson) {
    console.log(geojson)
    map.selectAll(".symbol")
      .data(geojson.features.sort(function(a, b) { return b.properties.population - a.properties.population; }))
    .enter().append("path")
      .attr("class", "symbol")
      .attr("d", path.pointRadius(function(d) { return radius(d.properties.population); }));
  }
</script>
</body>
</html>
    