(function () {

    let width = 960,
        height = 600;

    let projection = d3.geo.kavrayskiy7().scale(180).translate([width / 2, height / 2]).precision(.1);

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

    let svg = d3.select('#vis').append('svg').attr('width', width).attr('height', height);

    d3.json('world-110m.json', function (error, world) {
        if (error) throw error;

        svg.selectAll('circle').data(topojson.feature(world, world.objects.countries).features).enter().append('circle').on('mouseover', d => d3.select('#info').text(d.id)).attr('id', d => 'code-' + d.id).attr('transform', function (d) {
            return 'translate(' + path.centroid(d) + ')';
        }).attr('r', function (d) {
            return Math.sqrt(path.area(d) / Math.PI);
        });
    });
})();