Old school D3 from simpler times

All examples By author By category About

alteist

Full window Github gist

d3 geo

Built with blockbuilder.org

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

https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js