README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    The area of each country using a circle at the countries centroid, based of County Circles bl.ock

Red dot is Japan 

ISO 3166-1 codes

  

  

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font-family: Consolas, monaco, monospace;
        color: grey;
        background: #eee;
    }
    span {
        color: black;
        letter-spacing: 2px;
    }
    circle {
      fill: transparent;
      stroke: green;
      stroke-width: 3px;
      stroke-opacity: 0.6;
    }
    circle#code-392 {
      stroke: red;
      fill: red;
    }
    circle#code-10 {
      display: none;
    }
</style>
<!-- http://clrs.cc/ -->
<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">

<body>
<header>
    <p>country ISO 3166-1 numeric code: <span id='info'></span></p>
</header>

<section id="vis"></section>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>

<script>
    d3.select(self.frameElement).style('height', '650px');
</script>

## script-compiled.js
(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);
        });
    });
})();

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png
            
          
        
      
    

  
      
          
      
  

  

## world-110m.json

      
        
            
              
              
            

          Raw
        
        
          
            
          
          
            
              world-110m.json
            
          
        
      
    

  
      
  
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      Viewer requires iframe.