Published
Edited
May 14, 2019
Fork of World Map
1 star
Insert cell
Insert cell
//load the basemap
world_topo110 = d3.json("https://gist.githubusercontent.com/jk979/e36a0b630a3f9565e7c2aeeaba002984/raw/e01abe1dc330e28484dbaafd44a7f2ae62f802ba/countries_110.json")
Insert cell
geoPath = d3.geoPath()
.projection( projection );
Insert cell
projection = d3.geoEquirectangular()
.scale(120)
.translate([width / 2, height / 2])
.precision(.1);
Insert cell
//flags csv
flags_csv = d3.csv('https://gist.githubusercontent.com/jk979/a1c394355e2cf1874ca0ac6ee609107b/raw/4215d6114baae284641d7e6fe1afb374818fcf31/world-countries-flags.csv')
Insert cell
rerun_sorted[33].name = "Ivory Coast"
Insert cell
//fix naming
{
rerun_sorted[195].name = "The Bahamas"
rerun_sorted[199].name = "Central African Republic"
rerun_sorted[201].name = "Comoros"
rerun_sorted[203].name = "Czech Republic"
rerun_sorted[204].name = "Democratic Republic of the Congo"
rerun_sorted[206].name = "Dominican Republic"
rerun_sorted[211].name = "Gambia"
rerun_sorted[213].name = "Marshall Islands"
rerun_sorted[214].name = "Netherlands"
rerun_sorted[216].name = "China"
rerun_sorted[217].name = "Philippines"
rerun_sorted[219].name = "Taiwan"
rerun_sorted[221].name = "Solomon Islands"
rerun_sorted[223].name = "United Arab Emirates"
rerun_sorted[224].name = "United Kingdom"
rerun_sorted[225].name = "United States of America"
rerun_sorted[228].name = "Vatican City"
rerun_sorted[92].name = "Burundi"
rerun_sorted[193].name = "United Republic of Tanzania"
}

Insert cell
rerun_sorted = rerun.sort(function(a, b) {
var textA = a.name.toUpperCase();
var textB = b.name.toUpperCase();
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});
Insert cell
rerun = {
let flag_array = []
for(let i=0; i<flags_csv.length; i++){
//add a column with the parsed flag name
let name = {name:(flags_csv[i].url).substring((flags_csv[i].url).lastIndexOf("/") + 1, (flags_csv[i].url).lastIndexOf(".")).slice(8).replace(/_/g," "),url:flags_csv[i].url}
flag_array.push(name)
}
return flag_array
}
Insert cell
countrySelected
Insert cell
countrySelected
Insert cell
//flag code from http://bl.ocks.org/espinielli/5107491
viewof countrySelected = {
let svg = d3.select(DOM.svg(width, height));
let value = null;
let active = d3.select(null);

var centered;
let g = svg.append("g");
var countries = topojson.feature(world_topo110, world_topo110.objects.ne_110m_admin_0_countries).features

var title = svg.append("text")
.attr("x", width / 2 -500)
.attr("y", height * 3 / 5 -10);

var flag = svg.append("image")
.attr("width", 150)
.attr("height", 75)
.attr("x", width / 2 -500) //where does flag display (x)
.attr("y", height * 3 / 5 + 3) //where does flag display (y)
.attr("preserveAspectRatio", "none")
const outline = svg.append("path")
.attr("stroke", "green")
.attr("stroke-width", "0.1px")
.attr("stroke-linejoin", "round")
.attr("fill", "green")
.attr("pointer-events", "none");
const outlineClick = svg.append("path")
.attr("fill", "red")
.attr("stroke","red")
.attr("stroke-width", "0.1px")
.attr("stroke-linejoin", "round")
.attr("pointer-events","none")
svg.selectAll(".country")
.data(countries)

.enter().insert("path", ".graticule")
.attr("class", function(d) { return "country " + "code" + d.id; })
.attr("d", geoPath)
.attr("opacity","0.5")
.style("fill", "black")
.on("click", d => {
const node = svg.node();
node.value = value = value === d.properties.ADMIN ? null : d.properties.ADMIN;
node.dispatchEvent(new CustomEvent("input"));
outlineClick.attr("d", value ? geoPath(d) : null);
title.text(d.properties.ADMIN);
let forGraph = rerun_sorted.filter(p => p.name == d.properties.ADMIN)[0].name
let forGraph_url = rerun_sorted.filter(p => p.name == d.properties.ADMIN)[0].url
console.log(forGraph_url)
flag.attr("xlink:href", forGraph_url);
});
function clicked(d) {
var x, y, k;

if (d && centered !== d) {
var centroid = geoPath.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
}
/*
.on("mouseover", d => {
const node = svg.node();
node.value = value = value === d.properties.ADMIN ? null : d.properties.ADMIN;
node.dispatchEvent(new CustomEvent("input"));
outline.attr("d", value ? geoPath(d) : null);
//show the country name
})*/;
svg.append("g");

return Object.assign(svg.node(), {value: null});

}
Insert cell
width = 1000;
Insert cell
height = 600;
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more