Old school D3 from simpler times

All examples By author By category About

eesur

Full window Github gist

d3js | world map circle area of each country

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

<!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>

<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="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>

<script src="script-compiled.js" charset="utf-8"></script>

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

xxxxxxxxxx
 
<!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>
<!-- https://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="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://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>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js