index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.country {
  fill: #C0D9AF;
  stroke: #fff;
  stroke-width: 1px;
  stroke-linejoin: round;
}

.graticule {
  fill: none;
  stroke: #aaa;
  stroke-opacity: .3;
  stroke-width: .5px;
}

.graticule.outline {
  stroke: #999;
  stroke-opacity: 1;
  stroke-width: 1.5px;
}

.sea {
  fill: #dde4e9;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
'use strict'

let width = 960
let height = 500

let projection = d3.geo.kavrayskiy7()
let color = d3.scale.category20()
let graticule = d3.geo.graticule()

let path = d3.geo.path().projection(projection)

let svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

svg.append('path')
  .datum(graticule.outline)
  .attr('class', 'graticule outline sea')
  .attr('d', path)

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

queue()
  .defer(d3.json, 'https://raw.githubusercontent.com/mbostock/topojson/master/examples/world-110m.json')
  .defer(d3.tsv, 'https://raw.githubusercontent.com/KoGor/Maps.GeoInfo/master/world-country-names.tsv')
  .await(ready)

function ready(err, world, names) {
  if (err) throw err
  let countries = topojson.feature(world, world.objects.countries).features

  countries = countries.filter(function(d) {
    return names.some(function(n) {
      if (d.id == n.id) return d.name = n.name
    })
  })

  svg.selectAll('.country')
    .data(countries)
    .enter().append('path', '.graticule')
      .attr('class', 'country')
      .attr({
        'data-name': function(d) {
          return d.name
        },
        'data-x-centroid': function(d) {
          return path.centroid(d)[0]
        },
        'data-y-bottom': function(d) {
          return path.bounds(d)[1][1]
        }
      })
      .attr('d', path)
      .on('mouseover', function() {
        let country = d3.select(this).style('fill', 'yellow')
        let countryName = country.attr('data-name')
        let xCentroid = country.attr('data-x-centroid')
        let yBottom = country.attr('data-y-bottom')

        nameTag.style('visibility', 'hidden')
        nameTag.text(countryName)
        let textWidth = nameTag.node().getComputedTextLength()

        nameTag.attr({
          x: xCentroid - (textWidth / 2),
          y: Number(yBottom) + (countryName === 'Antarctica' ? -70 : 15),
        })
        nameTag.style('visibility', 'visible')
        console.log('in')
      })
      .on('mouseout', function() {
          console.log('out')
        d3.select(this).style('fill', '#C0D9AF')
        nameTag.style('visibility', 'hidden')
      })
      .attr('title', 'Blah')

  let nameTag = svg.append('text')
    .attr('font-family', 'Verdana')
    .attr('font-size', '15px')
}

/*
Inspiration:
http://bl.ocks.org/mbostock/4183330
http://bl.ocks.org/jasondavies/4188334
*/
</script>
</body>
</html>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png