//load the basemap
world_topo110 = d3.json("https://gist.githubusercontent.com/jk979/e36a0b630a3f9565e7c2aeeaba002984/raw/e01abe1dc330e28484dbaafd44a7f2ae62f802ba/countries_110.json")
geoPath = d3.geoPath()
.projection( projection );
projection = d3.geoEquirectangular()
.scale(120)
.translate([width / 2, height / 2])
.precision(.1);
//flags csv
flags_csv = d3.csv('https://gist.githubusercontent.com/jk979/a1c394355e2cf1874ca0ac6ee609107b/raw/4215d6114baae284641d7e6fe1afb374818fcf31/world-countries-flags.csv')
rerun_sorted[33].name = "Ivory Coast"
//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"
}
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;
});
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
}
countrySelected
countrySelected
//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});
}
width = 1000;
height = 600;
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.