eesur/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

      
Display the source blob

    
Display the rendered blob

    
    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.
	<!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>
	(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);
	});
	});
	})();