Skip to content

Instantly share code, notes, and snippets.

@stianSjoli

stianSjoli/index.html

Created April 18, 2019 18:09
Show Gist options
  • Save stianSjoli/3df769561697863b3983d19e708eed2b to your computer and use it in GitHub Desktop.
Save stianSjoli/3df769561697863b3983d19e708eed2b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<style>svg{width:100%;height:1000px;margin:0px auto;}
path {
stroke: black;
stroke-width: 1px;
}
</style>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script>
var data = [
{country:"Albania",amount:0.069},
{country:"Algeria",amount:0.144},
{country:"Angola",amount:0.062},
{country:"Anguilla",amount:0.252},
{country:"Antigua and Barbuda",amount:0.66},
{country:"Argentina",amount:0.183},
{country:"Aruba",amount:0.252},
{country:"Australia",amount:0.112},
{country:"Bahamas",amount:0.39},
{country:"Bahrain",amount:0.132},
{country:"Bangladesh",amount:0.034},
{country:"Barbados",amount:0.57},
{country:"Belgium",amount:0.08},
{country:"Belize",amount:0.172},
{country:"Benin",amount:0.043},
{country:"Bermuda",amount:0.252},
{country:"Bosnia and Herzegovina",amount:0.144},
{country:"Brazil",amount:0.165},
{country:"British Virgin Islands",amount:0.252},
{country:"Brunei",amount:0.026},
{country:"Bulgaria",amount:0.154},
{country:"Cambodia",amount:0.066},
{country:"Cameroon",amount:0.046},
{country:"Canada",amount:0.093},
{country:"Cape Verde",amount:0.065},
{country:"Cayman Islands",amount:0.252},
{country:"Channel Islands",amount:0.252},
{country:"Chile",amount:0.119},
{country:"China",amount:0.121},
{country:"Christmas Island",amount:0.252},
{country:"Cocos Islands",amount:0.252},
{country:"Colombia",amount:0.144},
{country:"Comoros",amount:0.201},
{country:"Congo, the Democratic Republic of the",amount:0.069},
{country:"Denmark",amount:0.047},
{country:"Djibouti",amount:0.103},
{country:"Dominica",amount:0.149},
{country:"Dominican Republic",amount:0.144},
{country:"Ecuador",amount:0.147},
{country:"Egypt",amount:0.178},
{country:"El Salvador",amount:0.147},
{country:"Equatorial Guinea",amount:0.144},
{country:"Eritrea",amount:0.045},
{country:"Estonia",amount:0.176},
{country:"Faeroe Islands",amount:0.252},
{country:"Falkland Islands",amount:0.252},
{country:"Fiji",amount:0.189},
{country:"Finland",amount:0.234},
{country:"France",amount:0.192},
{country:"French Guiana",amount:0.144},
{country:"French Polynesia",amount:0.252},
{country:"Gabon",amount:0.054},
{country:"Gambia",amount:0.048},
{country:"Georgia",amount:0.068},
{country:"Germany",amount:0.485},
{country:"Ghana",amount:0.04},
{country:"Gibraltar",amount:0.252},
{country:"Greece",amount:0.2},
{country:"Greenland",amount:0.252},
{country:"Grenada",amount:0.325},
{country:"Guadeloupe",amount:0.144},
{country:"Guam",amount:0.252},
{country:"Guatemala",amount:0.28},
{country:"Guernsey",amount:0.252},
{country:"Guinea",amount:0.03},
{country:"Guinea-Bissau",amount:0.054},
{country:"Guyana",amount:0.586},
{country:"Haiti",amount:0.09},
{country:"Honduras",amount:0.189},
{country:"Hong Kong",amount:0.398},
{country:"Iceland",amount:0.281},
{country:"India",amount:0.01},
{country:"Indonesia",amount:0.057},
{country:"Iran",amount:0.144},
{country:"Iraq",amount:0.103},
{country:"Ireland",amount:0.43},
{country:"Israel",amount:0.297},
{country:"Italy",amount:0.134},
{country:"Jamaica",amount:0.034},
{country:"Japan",amount:0.171},
{country:"Jordan",amount:0.144},
{country:"Kenya",amount:0.027},
{country:"Kiribati",amount:0.103},
{country:"Kuwait",amount:0.686},
{country:"Latvia",amount:0.124},
{country:"Lebanon",amount:0.094},
{country:"Liberia",amount:0.084},
{country:"Libya",amount:0.144},
{country:"Lithuania",amount:0.132},
{country:"Macao",amount:0.368},
{country:"Madagascar",amount:0.016},
{country:"Malaysia",amount:0.198},
{country:"Maldives",amount:0.322},
{country:"Malta",amount:0.214},
{country:"Marshall Islands",amount:0.192},
{country:"Martinique",amount:0.252},
{country:"Mauritania",amount:0.045},
{country:"Mauritius",amount:0.23},
{country:"Mexico",amount:0.087},
{country:"Micronesia",amount:0.103},
{country:"Monaco",amount:0.252},
{country:"Montenegro",amount:0.144},
{country:"Montserrat",amount:0.144},
{country:"Morocco",amount:0.073},
{country:"Mozambique",amount:0.015},
{country:"Myanmar",amount:0.075},
{country:"Namibia",amount:0.144},
{country:"Nauru",amount:0.144},
{country:"Netherlands",amount:0.424},
{country:"Netherlands Antilles",amount:0.252},
{country:"New Caledonia",amount:0.252},
{country:"New Zealand",amount:0.331},
{country:"Nicaragua",amount:0.143},
{country:"Nigeria",amount:0.103},
{country:"Niue",amount:0.252},
{country:"Norfolk Island",amount:0.103},
{country:"North Korea",amount:0.054},
{country:"Northern Mariana Islands",amount:0.252},
{country:"Norway",amount:0.28},
{country:"Oman",amount:0.084},
{country:"Pakistan",amount:0.103},
{country:"Palau",amount:0.144},
{country:"Palestine",amount:0.063},
{country:"Panama",amount:0.145},
{country:"Papua New Guinea",amount:0.103},
{country:"Peru",amount:0.144},
{country:"Philippines",amount:0.075},
{country:"Poland",amount:0.097},
{country:"Portugal",amount:0.265},
{country:"Puerto Rico",amount:0.252},
{country:"Qatar",amount:0.16},
{country:"Reunion",amount:0.144},
{country:"Romania",amount:0.042},
{country:"Russian Federation",amount:0.112},
{country:"Saint Helena",amount:0.144},
{country:"Saint Kitts and Nevis",amount:0.654},
{country:"Saint Lucia",amount:0.522},
{country:"Saint Pierre and Miquelon",amount:0.252},
{country:"Saint Vincent and the Grenadines",amount:0.221},
{country:"Samoa",amount:0.103},
{country:"Sao Tome and Principe",amount:0.103},
{country:"Saudi Arabia",amount:0.156},
{country:"Senegal",amount:0.103},
{country:"Seychelles",amount:0.358},
{country:"Sierra Leone",amount:0.041},
{country:"Singapore",amount:0.194},
{country:"Sint Maarten",amount:0.252},
{country:"Slovenia",amount:0.145},
{country:"Solomon Islands",amount:0.103},
{country:"Somalia",amount:0.054},
{country:"South Africa",amount:0.24},
{country:"South Korea",amount:0.112},
{country:"Spain",amount:0.277},
{country:"Sri Lanka",amount:0.357},
{country:"Sudan",amount:0.103},
{country:"Suriname",amount:0.163},
{country:"Sweden",amount:0.048},
{country:"Syria",amount:0.178},
{country:"Taiwan",amount:0.252},
{country:"Tanzania, United Republic of",amount:0.023},
{country:"Thailand",amount:0.144},
{country:"Togo",amount:0.057},
{country:"Tokelau",amount:0.103},
{country:"Tonga",amount:0.223},
{country:"Trinidad and Tobago",amount:3.6},
{country:"Tunisia",amount:0.144},
{country:"Turkey",amount:0.212},
{country:"Turks and Caicos Islands",amount:0.252},
{country:"Tuvalu",amount:0.144},
{country:"Ukraine",amount:0.103},
{country:"United Arab Emirates",amount:0.199},
{country:"United Kingdom",amount:0.215},
{country:"United States",amount:0.335},
{country:"Uruguay",amount:0.252},
{country:"Vanuatu",amount:0.295},
{country:"Venezuela, Bolivarian Republic of",amount:0.252},
{country:"Viet Nam",amount:0.103},
{country:"Yemen",amount:0.103}];
var svg = d3.select("body").append("svg");
var colour = d3.scaleLinear()
.domain([0, 0.160])
.range(["#b2d8d8","#66b2b2", "#008080","#006666","#004c4c"]);
var mercator = d3.geoMercator()
.center([0,60])
.scale(200)
var path = d3.geoPath()
.projection(mercator)
d3.queue()
.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/world-110m.json")
.defer(d3.tsv, "https://gist.githubusercontent.com/mbostock/4090846/raw/world-country-names.tsv")
.await(ready);
function ready(error, world, names){
var countries = topojson.feature(world, world.objects.countries).features;
svg.selectAll("path")
.data(countries)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function(d){
var name = names.find(function(elem){
return elem.id === d.id.toString();
})
if(name === undefined) {
return "#D3D3D3";
} else {
var dataItem = data.find(function(d){
return d.country.includes(name.name);
});
if(dataItem !== undefined) {
return colour(dataItem.amount);
} else {
return "#D3D3D3";
}
}
}).on("mouseenter", function(d){
})
}
</script>
</script>
<script id="jsbin-source-html" type="text/html">
<style>svg{width:100%;height:1000px;margin:0px auto;}
path {
stroke: black;
stroke-width: 1px;
}
</style>
<body>
<script src="https://unpkg.com/d3@4"><\/script>
<script src="https://unpkg.com/topojson-client@3"><\/script>
<script src="https://d3js.org/d3-queue.v3.min.js"><\/script>
<script>
var data = [
{country:"Albania",amount:0.069},
{country:"Algeria",amount:0.144},
{country:"Angola",amount:0.062},
{country:"Anguilla",amount:0.252},
{country:"Antigua and Barbuda",amount:0.66},
{country:"Argentina",amount:0.183},
{country:"Aruba",amount:0.252},
{country:"Australia",amount:0.112},
{country:"Bahamas",amount:0.39},
{country:"Bahrain",amount:0.132},
{country:"Bangladesh",amount:0.034},
{country:"Barbados",amount:0.57},
{country:"Belgium",amount:0.08},
{country:"Belize",amount:0.172},
{country:"Benin",amount:0.043},
{country:"Bermuda",amount:0.252},
{country:"Bosnia and Herzegovina",amount:0.144},
{country:"Brazil",amount:0.165},
{country:"British Virgin Islands",amount:0.252},
{country:"Brunei",amount:0.026},
{country:"Bulgaria",amount:0.154},
{country:"Cambodia",amount:0.066},
{country:"Cameroon",amount:0.046},
{country:"Canada",amount:0.093},
{country:"Cape Verde",amount:0.065},
{country:"Cayman Islands",amount:0.252},
{country:"Channel Islands",amount:0.252},
{country:"Chile",amount:0.119},
{country:"China",amount:0.121},
{country:"Christmas Island",amount:0.252},
{country:"Cocos Islands",amount:0.252},
{country:"Colombia",amount:0.144},
{country:"Comoros",amount:0.201},
{country:"Congo, the Democratic Republic of the",amount:0.069},
{country:"Denmark",amount:0.047},
{country:"Djibouti",amount:0.103},
{country:"Dominica",amount:0.149},
{country:"Dominican Republic",amount:0.144},
{country:"Ecuador",amount:0.147},
{country:"Egypt",amount:0.178},
{country:"El Salvador",amount:0.147},
{country:"Equatorial Guinea",amount:0.144},
{country:"Eritrea",amount:0.045},
{country:"Estonia",amount:0.176},
{country:"Faeroe Islands",amount:0.252},
{country:"Falkland Islands",amount:0.252},
{country:"Fiji",amount:0.189},
{country:"Finland",amount:0.234},
{country:"France",amount:0.192},
{country:"French Guiana",amount:0.144},
{country:"French Polynesia",amount:0.252},
{country:"Gabon",amount:0.054},
{country:"Gambia",amount:0.048},
{country:"Georgia",amount:0.068},
{country:"Germany",amount:0.485},
{country:"Ghana",amount:0.04},
{country:"Gibraltar",amount:0.252},
{country:"Greece",amount:0.2},
{country:"Greenland",amount:0.252},
{country:"Grenada",amount:0.325},
{country:"Guadeloupe",amount:0.144},
{country:"Guam",amount:0.252},
{country:"Guatemala",amount:0.28},
{country:"Guernsey",amount:0.252},
{country:"Guinea",amount:0.03},
{country:"Guinea-Bissau",amount:0.054},
{country:"Guyana",amount:0.586},
{country:"Haiti",amount:0.09},
{country:"Honduras",amount:0.189},
{country:"Hong Kong",amount:0.398},
{country:"Iceland",amount:0.281},
{country:"India",amount:0.01},
{country:"Indonesia",amount:0.057},
{country:"Iran",amount:0.144},
{country:"Iraq",amount:0.103},
{country:"Ireland",amount:0.43},
{country:"Israel",amount:0.297},
{country:"Italy",amount:0.134},
{country:"Jamaica",amount:0.034},
{country:"Japan",amount:0.171},
{country:"Jordan",amount:0.144},
{country:"Kenya",amount:0.027},
{country:"Kiribati",amount:0.103},
{country:"Kuwait",amount:0.686},
{country:"Latvia",amount:0.124},
{country:"Lebanon",amount:0.094},
{country:"Liberia",amount:0.084},
{country:"Libya",amount:0.144},
{country:"Lithuania",amount:0.132},
{country:"Macao",amount:0.368},
{country:"Madagascar",amount:0.016},
{country:"Malaysia",amount:0.198},
{country:"Maldives",amount:0.322},
{country:"Malta",amount:0.214},
{country:"Marshall Islands",amount:0.192},
{country:"Martinique",amount:0.252},
{country:"Mauritania",amount:0.045},
{country:"Mauritius",amount:0.23},
{country:"Mexico",amount:0.087},
{country:"Micronesia",amount:0.103},
{country:"Monaco",amount:0.252},
{country:"Montenegro",amount:0.144},
{country:"Montserrat",amount:0.144},
{country:"Morocco",amount:0.073},
{country:"Mozambique",amount:0.015},
{country:"Myanmar",amount:0.075},
{country:"Namibia",amount:0.144},
{country:"Nauru",amount:0.144},
{country:"Netherlands",amount:0.424},
{country:"Netherlands Antilles",amount:0.252},
{country:"New Caledonia",amount:0.252},
{country:"New Zealand",amount:0.331},
{country:"Nicaragua",amount:0.143},
{country:"Nigeria",amount:0.103},
{country:"Niue",amount:0.252},
{country:"Norfolk Island",amount:0.103},
{country:"North Korea",amount:0.054},
{country:"Northern Mariana Islands",amount:0.252},
{country:"Norway",amount:0.28},
{country:"Oman",amount:0.084},
{country:"Pakistan",amount:0.103},
{country:"Palau",amount:0.144},
{country:"Palestine",amount:0.063},
{country:"Panama",amount:0.145},
{country:"Papua New Guinea",amount:0.103},
{country:"Peru",amount:0.144},
{country:"Philippines",amount:0.075},
{country:"Poland",amount:0.097},
{country:"Portugal",amount:0.265},
{country:"Puerto Rico",amount:0.252},
{country:"Qatar",amount:0.16},
{country:"Reunion",amount:0.144},
{country:"Romania",amount:0.042},
{country:"Russian Federation",amount:0.112},
{country:"Saint Helena",amount:0.144},
{country:"Saint Kitts and Nevis",amount:0.654},
{country:"Saint Lucia",amount:0.522},
{country:"Saint Pierre and Miquelon",amount:0.252},
{country:"Saint Vincent and the Grenadines",amount:0.221},
{country:"Samoa",amount:0.103},
{country:"Sao Tome and Principe",amount:0.103},
{country:"Saudi Arabia",amount:0.156},
{country:"Senegal",amount:0.103},
{country:"Seychelles",amount:0.358},
{country:"Sierra Leone",amount:0.041},
{country:"Singapore",amount:0.194},
{country:"Sint Maarten",amount:0.252},
{country:"Slovenia",amount:0.145},
{country:"Solomon Islands",amount:0.103},
{country:"Somalia",amount:0.054},
{country:"South Africa",amount:0.24},
{country:"South Korea",amount:0.112},
{country:"Spain",amount:0.277},
{country:"Sri Lanka",amount:0.357},
{country:"Sudan",amount:0.103},
{country:"Suriname",amount:0.163},
{country:"Sweden",amount:0.048},
{country:"Syria",amount:0.178},
{country:"Taiwan",amount:0.252},
{country:"Tanzania, United Republic of",amount:0.023},
{country:"Thailand",amount:0.144},
{country:"Togo",amount:0.057},
{country:"Tokelau",amount:0.103},
{country:"Tonga",amount:0.223},
{country:"Trinidad and Tobago",amount:3.6},
{country:"Tunisia",amount:0.144},
{country:"Turkey",amount:0.212},
{country:"Turks and Caicos Islands",amount:0.252},
{country:"Tuvalu",amount:0.144},
{country:"Ukraine",amount:0.103},
{country:"United Arab Emirates",amount:0.199},
{country:"United Kingdom",amount:0.215},
{country:"United States",amount:0.335},
{country:"Uruguay",amount:0.252},
{country:"Vanuatu",amount:0.295},
{country:"Venezuela, Bolivarian Republic of",amount:0.252},
{country:"Viet Nam",amount:0.103},
{country:"Yemen",amount:0.103}];
var svg = d3.select("body").append("svg");
var colour = d3.scaleLinear()
.domain([0, 0.160])
.range(["#b2d8d8","#66b2b2", "#008080","#006666","#004c4c"]);
var mercator = d3.geoMercator()
.center([0,60])
.scale(200)
var path = d3.geoPath()
.projection(mercator)
d3.queue()
.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/world-110m.json")
.defer(d3.tsv, "https://gist.githubusercontent.com/mbostock/4090846/raw/world-country-names.tsv")
.await(ready);
function ready(error, world, names){
var countries = topojson.feature(world, world.objects.countries).features;
svg.selectAll("path")
.data(countries)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function(d){
var name = names.find(function(elem){
return elem.id === d.id.toString();
})
if(name === undefined) {
return "#D3D3D3";
} else {
var dataItem = data.find(function(d){
return d.country.includes(name.name);
});
if(dataItem !== undefined) {
return colour(dataItem.amount);
} else {
return "#D3D3D3";
}
}
}).on("mouseenter", function(d){
})
}
<\/script>
<\/script></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment