static/renderearth.html

<!DOCTYPE html>
<html>
  <head>
    <title>Render the Earth</title>
    <link rel="stylesheet" href="/static/css/earth.css">
    <link rel="stylesheet" href="/static/css/d3tip.css">
    <script src="/static/js/d3.min.js"></script>
    <script src="/static/js/topojson.js"></script>
    <script src="/static/js/library/d3-tip.js"></script>
  </head>
  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
    <script>

    let svg = d3.select('svg');
    const width = +svg.attr('width');
    const height = +svg.attr('height');
    const margin = {top: 60, right: 60, bottom: 10, left: 60};
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    const g = svg.append('g').attr('id', 'maingroup')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // convert dataPath to svgPath; 
    // go to https://github.com/d3/d3-geo for more different projections; 
    //const projection = d3.geoMercator();
    //const projection = d3.geoOrthographic();
    //const projection = d3.geoStereographic();
    //const projection = d3.geoEquirectangular();
    const projection = d3.geoNaturalEarth1();
    //const projection = d3.geoTransverseMercator();
    const pathGenerator = d3.geoPath().projection(projection);

    // setting up the tip tool; 
    const tip = d3.tip()
    .attr('class', 'd3-tip').html(function(d) { return d.properties.name });
    svg.call(tip);

    let worldmeta;
    let lastid = undefined;

    d3.json('./static/data/countries-110m.json').then(
        function(data){
            // convert topo-json to geo-json; 
            worldmeta = topojson.feature(data, data.objects.countries);

            // this code is really important if you want to fit your geoPaths (map) in your SVG element; 
            projection.fitSize([innerWidth, innerHeight], worldmeta);

            // perform data-join; 
            const paths = g.selectAll('path')
            .data(worldmeta.features, d => d.properties.name)
            .enter().append('path')
            .attr('d', pathGenerator)
            .attr('stroke', 'black')
            .attr('stroke-width', 1)
            .on('mouseover',function(d){
              d3.select(this)
              .attr("opacity", 0.5)
              .attr("stroke","white")
              .attr("stroke-width", 6);
            })
            .on('mouseout', function(d){
              d3.select(this)
              .attr("opacity", 1)
              .attr("stroke","black")
              .attr("stroke-width",1);
            })
            .on('contextmenu', function(d){
              d3.event.preventDefault();
              if(lastid !== d.properties.name){
                tip.show(d)
                lastid = d.properties.name;
              }else{
                tip.hide(d)
              }
            })
        }
    );

  </script>
  </body>
</html>