world_topo2 = d3.json("https://gist.githubusercontent.com/jk979/07669a4c0cd4a2836761b62bc92589ec/raw/b7ee9c00c6b6ba55481a34244e6bbb41aaad37cd/countries_topojson.json")
world_topo110 = d3.json("https://gist.githubusercontent.com/jk979/e36a0b630a3f9565e7c2aeeaba002984/raw/e01abe1dc330e28484dbaafd44a7f2ae62f802ba/countries_110.json")
countries_output = world_topo2.objects.countries_geojson.geometries[162].properties.ADMIN
countries_length = world_topo2.objects.countries_geojson.geometries.length
countries_list = {
let countries_list = []
for(let i=0; i<countries_length;i++){
let countries_objects = {
"country": world_topo2.objects.countries_geojson.geometries[i].properties.ADMIN
}
countries_list.push(countries_objects)
}
return countries_list
}
DOM.download(serialize(countries_list), null, "Download CSV")
function serialize (data) {
let parser = new json2csv.Parser();
let csv = parser.parse(data);
return new Blob([csv], {type: "text/csv"})
}
//world_topo = d3.json("https://gist.githubusercontent.com/jk979/424fdd5cd1a662bd3d047643ff1493ca/raw/5db2b3a6feadcae0bfd927bc6bf2608c02b13f43/countries3_topojson.json")
//countries = topojson.feature(world_topo, world_topo.objects.world_map_geojson).geometries
countrySelected
//flags
flags_csv = d3.csv('https://gist.githubusercontent.com/jk979/a1c394355e2cf1874ca0ac6ee609107b/raw/4215d6114baae284641d7e6fe1afb374818fcf31/world-countries-flags.csv')
flag_url = flags_csv[240].url
//get just the flag name
flag_name = ((flag_url.substring(
flag_url.lastIndexOf("/") + 1,
flag_url.lastIndexOf(".")).slice(8)).replace(/_/g," ")
);
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
//use countrySelected to search for the URL of that country in the flags csv
rerun[0].name=="Afghanistan"
rerun[0].url
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.