Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active September 29, 2017 12:34
Show Gist options
  • Save denjn5/c96c5900f0ffefc77d2bfe57d4d25df5 to your computer and use it in GitHub Desktop.
Save denjn5/c96c5900f0ffefc77d2bfe57d4d25df5 to your computer and use it in GitHub Desktop.
Download ZIP
World Countries Hierarchy
Raw
.block
license: mit
border: no
height: 800
Raw
README.md

A tree visualization of the hierarchy of countries in the World using tabular data.

Inspired by Curran Kelleher's World Countries Hierarchy and Avra Goldman's how i met my friends. I applied a streamlined data model and leveraged new d3 v4 functions (to minimize calculations, concatenation, and complexity).

Changes:

  • removed pan & zoom (they caused me trouble on mobile)
  • reduced the data file by 60% (using tabular and d3.stratify()) -- this turned out to be more challenging than expected, due to a node that operated at 2 depths ("Northern America"); I built a python script to remodel the data.
  • simplified the index.html code (cut complexity / size by 20%+)

Data from the United Nations Place Hierarchy.

--David

Raw
country-hierarchy.csv
id count devd_region least_devd_country parentId type
World 1 world
Africa 58 World majorarea
Northern America 5 World majorarea
Europe 48 World majorarea
Asia 50 World majorarea
Latin America 48 World majorarea
Oceania 23 World majorarea
Eastern Africa 20 Africa region
Middle Africa 9 Africa region
Northern Africa 7 Africa region
Southern Africa 5 Africa region
Western Africa 17 Africa region
Central Asia 5 Asia region
Eastern Asia 7 Asia region
South-Eastern Asia 11 Asia region
Southern Asia 9 Asia region
Western Asia 18 Asia region
Eastern Europe 10 Europe region
Northern Europe 13 Europe region
Southern Europe 16 Europe region
Western Europe 9 Europe region
Caribbean 26 Latin America region
Central America 8 Latin America region
South America 14 Latin America region
Australia & New Zealand 2 Oceania region
Melanesia 5 Oceania region
Micronesia 7 Oceania region
Polynesia 9 Oceania region
Australia 1 Yes No Australia & New Zealand country
New Zealand 1 Yes No Australia & New Zealand country
Anguilla 1 No No Caribbean country
Antigua & Barbuda 1 No No Caribbean country
Aruba 1 No No Caribbean country
Bahamas 1 No No Caribbean country
Barbados 1 No No Caribbean country
Bonaire, Sint Eustatius & Saba 1 No No Caribbean country
British Virgin Islands 1 No No Caribbean country
Cayman Islands 1 No No Caribbean country
Cuba 1 No No Caribbean country
Curacao 1 No No Caribbean country
Dominica 1 No No Caribbean country
Dominican Republic 1 No No Caribbean country
Grenada 1 No No Caribbean country
Guadeloupe 1 No No Caribbean country
Haiti 1 No Yes Caribbean country
Jamaica 1 No No Caribbean country
Martinique 1 No No Caribbean country
Montserrat 1 No No Caribbean country
Puerto Rico 1 No No Caribbean country
Saint Kitts & Nevis 1 No No Caribbean country
Saint Lucia 1 No No Caribbean country
Saint Vincent & the Grenadines 1 No No Caribbean country
Sint Maarten (Dutch part) 1 No No Caribbean country
Trinidad & Tobago 1 No No Caribbean country
Turks & Caicos Islands 1 No No Caribbean country
United States Virgin Islands 1 No No Caribbean country
Belize 1 No No Central America country
Costa Rica 1 No No Central America country
El Salvador 1 No No Central America country
Guatemala 1 No No Central America country
Honduras 1 No No Central America country
Mexico 1 No No Central America country
Nicaragua 1 No No Central America country
Panama 1 No No Central America country
Kazakhstan 1 No No Central Asia country
Kyrgyzstan 1 No No Central Asia country
Tajikistan 1 No No Central Asia country
Turkmenistan 1 No No Central Asia country
Uzbekistan 1 No No Central Asia country
Burundi 1 No Yes Eastern Africa country
Comoros 1 No Yes Eastern Africa country
Djibouti 1 No Yes Eastern Africa country
Eritrea 1 No Yes Eastern Africa country
Ethiopia 1 No Yes Eastern Africa country
Kenya 1 No No Eastern Africa country
Madagascar 1 No Yes Eastern Africa country
Malawi 1 No Yes Eastern Africa country
Mauritius 1 No No Eastern Africa country
Mayotte 1 No No Eastern Africa country
Mozambique 1 No Yes Eastern Africa country
Reunion 1 No No Eastern Africa country
Rwanda 1 No Yes Eastern Africa country
Seychelles 1 No No Eastern Africa country
Somalia 1 No Yes Eastern Africa country
South Sudan 1 No Yes Eastern Africa country
Uganda 1 No Yes Eastern Africa country
United Republic of Tanzania 1 No Yes Eastern Africa country
Zambia 1 No Yes Eastern Africa country
Zimbabwe 1 No No Eastern Africa country
China 1 No No Eastern Asia country
China, Hong Kong Special Administrative Region 1 No No Eastern Asia country
China, Macao Special Administrative Region 1 No No Eastern Asia country
Democratic People's Republic of Korea 1 No No Eastern Asia country
Japan 1 Yes No Eastern Asia country
Mongolia 1 No No Eastern Asia country
Republic of Korea 1 No No Eastern Asia country
Belarus 1 Yes No Eastern Europe country
Bulgaria 1 Yes No Eastern Europe country
Czech Republic 1 Yes No Eastern Europe country
Hungary 1 Yes No Eastern Europe country
Poland 1 Yes No Eastern Europe country
Republic of Moldova 1 Yes No Eastern Europe country
Romania 1 Yes No Eastern Europe country
Russian Federation 1 Yes No Eastern Europe country
Slovakia 1 Yes No Eastern Europe country
Ukraine 1 Yes No Eastern Europe country
Fiji 1 No No Melanesia country
New Caledonia 1 No No Melanesia country
Papua New Guinea 1 No No Melanesia country
Solomon Islands 1 No Yes Melanesia country
Vanuatu 1 No Yes Melanesia country
Guam 1 No No Micronesia country
Kiribati 1 No Yes Micronesia country
Marshall Islands 1 No No Micronesia country
Micronesia (Federated States of) 1 No No Micronesia country
Nauru 1 No No Micronesia country
Northern Mariana Islands 1 No No Micronesia country
Palau 1 No No Micronesia country
Angola 1 No Yes Middle Africa country
Cameroon 1 No No Middle Africa country
Central African Republic 1 No Yes Middle Africa country
Chad 1 No Yes Middle Africa country
Congo 1 No No Middle Africa country
Democratic Republic of the Congo 1 No Yes Middle Africa country
Equatorial Guinea 1 No Yes Middle Africa country
Gabon 1 No No Middle Africa country
Sao Tome & Principe 1 No Yes Middle Africa country
Algeria 1 No No Northern Africa country
Egypt 1 No No Northern Africa country
Libya 1 No No Northern Africa country
Morocco 1 No No Northern Africa country
Sudan 1 No Yes Northern Africa country
Tunisia 1 No No Northern Africa country
Western Sahara 1 No No Northern Africa country
Bermuda 1 Yes No Northern America country
Canada 1 Yes No Northern America country
Greenland 1 Yes No Northern America country
Saint Pierre & Miquelon 1 Yes No Northern America country
United States of America 1 Yes No Northern America country
Channel Islands 1 Yes No Northern Europe country
Denmark 1 Yes No Northern Europe country
Estonia 1 Yes No Northern Europe country
Faeroe Islands 1 Yes No Northern Europe country
Finland 1 Yes No Northern Europe country
Iceland 1 Yes No Northern Europe country
Ireland 1 Yes No Northern Europe country
Isle of Man 1 Yes No Northern Europe country
Latvia 1 Yes No Northern Europe country
Lithuania 1 Yes No Northern Europe country
Norway 1 Yes No Northern Europe country
Sweden 1 Yes No Northern Europe country
United Kingdom of Great Britain & Northern Ireland 1 Yes No Northern Europe country
American Samoa 1 No No Polynesia country
Cook Islands 1 No No Polynesia country
French Polynesia 1 No No Polynesia country
Niue 1 No No Polynesia country
Samoa 1 No No Polynesia country
Tokelau 1 No No Polynesia country
Tonga 1 No No Polynesia country
Tuvalu 1 No Yes Polynesia country
Wallis & Futuna Islands 1 No No Polynesia country
Argentina 1 No No South America country
Bolivia (Plurinational State of) 1 No No South America country
Brazil 1 No No South America country
Chile 1 No No South America country
Colombia 1 No No South America country
Ecuador 1 No No South America country
Falkland Islands (Malvinas) 1 No No South America country
French Guiana 1 No No South America country
Guyana 1 No No South America country
Paraguay 1 No No South America country
Peru 1 No No South America country
Suriname 1 No No South America country
Uruguay 1 No No South America country
Venezuela (Bolivarian Republic of) 1 No No South America country
Brunei Darussalam 1 No No South-Eastern Asia country
Cambodia 1 No Yes South-Eastern Asia country
Indonesia 1 No No South-Eastern Asia country
Lao People's Democratic Republic 1 No Yes South-Eastern Asia country
Malaysia 1 No No South-Eastern Asia country
Myanmar 1 No Yes South-Eastern Asia country
Philippines 1 No No South-Eastern Asia country
Singapore 1 No No South-Eastern Asia country
Thailand 1 No No South-Eastern Asia country
Timor-Leste 1 No Yes South-Eastern Asia country
Viet Nam 1 No No South-Eastern Asia country
Botswana 1 No No Southern Africa country
Lesotho 1 No Yes Southern Africa country
Namibia 1 No No Southern Africa country
South Africa 1 No No Southern Africa country
Swaziland 1 No No Southern Africa country
Afghanistan 1 No Yes Southern Asia country
Bangladesh 1 No Yes Southern Asia country
Bhutan 1 No Yes Southern Asia country
India 1 No No Southern Asia country
Iran (Islamic Republic of) 1 No No Southern Asia country
Maldives 1 No No Southern Asia country
Nepal 1 No Yes Southern Asia country
Pakistan 1 No No Southern Asia country
Sri Lanka 1 No No Southern Asia country
Albania 1 Yes No Southern Europe country
Andorra 1 Yes No Southern Europe country
Bosnia & Herzegovina 1 Yes No Southern Europe country
Croatia 1 Yes No Southern Europe country
Gibraltar 1 Yes No Southern Europe country
Greece 1 Yes No Southern Europe country
Holy See 1 Yes No Southern Europe country
Italy 1 Yes No Southern Europe country
Malta 1 Yes No Southern Europe country
Montenegro 1 Yes No Southern Europe country
Portugal 1 Yes No Southern Europe country
San Marino 1 Yes No Southern Europe country
Serbia 1 Yes No Southern Europe country
Slovenia 1 Yes No Southern Europe country
Spain 1 Yes No Southern Europe country
The former Yugoslav Republic of Macedonia 1 Yes No Southern Europe country
Benin 1 No Yes Western Africa country
Burkina Faso 1 No Yes Western Africa country
Cote d'Ivoire 1 No No Western Africa country
Cabo Verde 1 No No Western Africa country
Gambia 1 No Yes Western Africa country
Ghana 1 No No Western Africa country
Guinea 1 No Yes Western Africa country
Guinea-Bissau 1 No Yes Western Africa country
Liberia 1 No Yes Western Africa country
Mali 1 No Yes Western Africa country
Mauritania 1 No Yes Western Africa country
Niger 1 No Yes Western Africa country
Nigeria 1 No No Western Africa country
Saint Helena 1 No No Western Africa country
Senegal 1 No Yes Western Africa country
Sierra Leone 1 No Yes Western Africa country
Togo 1 No Yes Western Africa country
Armenia 1 No No Western Asia country
Azerbaijan 1 No No Western Asia country
Bahrain 1 No No Western Asia country
Cyprus 1 No No Western Asia country
Georgia 1 No No Western Asia country
Iraq 1 No No Western Asia country
Israel 1 No No Western Asia country
Jordan 1 No No Western Asia country
Kuwait 1 No No Western Asia country
Lebanon 1 No No Western Asia country
Oman 1 No No Western Asia country
Qatar 1 No No Western Asia country
Saudi Arabia 1 No No Western Asia country
State of Palestine 1 No No Western Asia country
Syrian Arab Republic 1 No No Western Asia country
Turkey 1 No No Western Asia country
United Arab Emirates 1 No No Western Asia country
Yemen 1 No Yes Western Asia country
Austria 1 Yes No Western Europe country
Belgium 1 Yes No Western Europe country
France 1 Yes No Western Europe country
Germany 1 Yes No Western Europe country
Liechtenstein 1 Yes No Western Europe country
Luxembourg 1 Yes No Western Europe country
Monaco 1 Yes No Western Europe country
Netherlands 1 Yes No Western Europe country
Switzerland 1 Yes No Western Europe country
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<head>
<title>Simple Radial Tree (d3 v4; CSV; 63 Lines)</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
</head>
<style>
html {
background-color: black;
}
.glow { /* This trick adds a heavy white shadow around the text. */
text-shadow:
-1px -1px 3px black,
-1px 1px 3px black,
1px -1px 3px black,
1px 1px 3px black;
}
text {
font-family: "Open Sans", sans-serif;
pointer-events: none;
alignment-baseline: central;
fill: white;
}
path {
fill: none;
stroke: white; /* #4fb9b5; */
}
</style>
<svg>
<g></g>
</svg>
<script>
var vWidth = 900;
var vHeight = 800;
var vFontSize = [6,10,18,22];
var vColor = d3.scaleOrdinal().domain(["Oceania", "Africa", "Europe", "Latin America", "Asia"])
.range(["#ff6698", "#ffb366", "#ffff66", "#98ff66", "#6698ff"]);
// .range(["#fb5454", "#f1fb54", "#54befb"]);
// Prepare our physical space
var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight)
.select('g').attr('transform', 'translate(' + vWidth/2 + ',' + vHeight/2 + ')');
// Get the data from our CSV file
d3.csv('country-hierarchy.csv', function(error, vCsvData) {
if (error) throw error;
vData = d3.stratify()(vCsvData);
drawViz(vData);
});
function drawViz(vData) {
vData.each( function(d){
switch (d.depth) {
case 1: d.data.leg = d.id; break;
case 2: d.data.leg = d.parent.id; break;
case 3: d.data.leg = d.parent.parent.id; break;
}});
// Declare d3 layout
var vLayout = d3.cluster().size([2 * Math.PI, Math.min(vWidth, vHeight)/2 - 130]); // margin!
// Layout + Data
var vRoot = d3.hierarchy(vData);
var vNodes = vRoot.descendants();
var vLinks = vLayout(vRoot).links();
// Draw on screen
g.selectAll('path').data(vLinks).enter().append('path')
.attr('d', d3.linkRadial()
.angle(function (d) { return d.x; })
.radius(function (d) { return d.y; }));
var node = g.selectAll(".node").data(vNodes).enter().append('g')
.attr('transform', function(d) { return "translate(" + d3.pointRadial(d.x, d.y) + ")"; });
node.append("text")
.text(function (d){ return d.data.data.id; })
.attr("font-size", function (d){ return vFontSize[d.height] + "pt"; })
.attr("transform", function(d) { return "rotate(" + textRotation(d) + ")" })
.attr("text-anchor", function (d){
if(d.height === 0){ return (d.x > Math.PI) ? "end" : "start"; }
else { return "middle"; } })
.attr("dx", function (d){
if(d.depth === 3){ return (d.x > Math.PI) ? "-2px" : "2px"; }
else { return "0px"; } })
.style("fill", function(d){
//if(d.data.data.least_devd_country === "Yes") { return "blue";}
//else if (d.data.data.devd_region === "Yes") { return "green";}
return vColor(d.data.data.leg);
})
.classed("glow", function (d){ return d.height !== 0; });
function textRotation(d) {
var angle = d.x / Math.PI * 180 + 90;
if (d.depth < 2) { return 0;}
else if (angle <= 270) { return angle - 180;}
else { return angle;}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment