D3 World Continents

World Map of Continents with D3v4

Europe Asia split in Russia
Rotated for better Alaska Russia split
Using Kavrayskiy VII projection

forked from piwodlaiwo's block: World Continents with D3v4

forked from piwodlaiwo's block: World Continents with D3v4 with Labels

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
  
  <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
    <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%;height:100% }
    path {fill:none;}
    .graticule {
      fill: none;
      stroke: #777;
      stroke-width: .5px;
      stroke-opacity: .5;
    }
    .stroke {
  	  fill: none;
  		stroke: #000;
  		stroke-width: 3px;
		}
    text {
    	font-family: 'Karla' ;
      font-weight : normal;
    }
  </style>
</head>

<body>
  <script>
    var width = 960;
    var height = 500;
    
    var color = d3.scaleOrdinal(d3.schemeCategory20);

var graticule = d3.geoGraticule();
    var svg = d3.select("body").append("svg");
    var g = svg.append("g");

//https://bl.ocks.org/mbostock/3710082
		var projection = d3.geoKavrayskiy7()
    .scale(170)
    .translate([width / 2, height / 2])
    .precision(.1)
    .rotate([-11,0]);
    
    var path = d3.geoPath().projection(projection);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
        .attr("class", "stroke")
        .attr("xlink:href", "#sphere");

svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

})

//reference
      /*
      starting point: techslides.com/demos/d3/worldmap-template-d3v4.html
      colors via neighbors: https://bl.ocks.org/mbostock/4180634
      https://github.com/piwodlaiwo/topojson
      https://bl.ocks.org/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f (look into using d3.tip.js)
      
      //Did not need polylabel.js for labels
      https://bl.ocks.org/Fil/da021023d58b8ddefd165c65e37f796b
      https://blockbuilder.org/pnavarrc/75ec1502f51f86c2f43e
      https://bl.ocks.org/hugolpz/42955069888057aff8c2
      https://blockbuilder.org/d3noob/401237468c9e38cea8c7
      */
    
  </script>
</body>

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

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

https://d3js.org/d3-geo-projection.v1.min.js