The area of each country using a circle at the countries centroid, based of County Circles bl.ock
Red dot is Japan
Last active
June 1, 2016 16:20
-
-
Save eesur/14e16ab00342ea44e46f3fa45a2bbf08 to your computer and use it in GitHub Desktop.
d3js | world map circle area of each country
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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); | |
| }); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment