viewof button = Inputs.button("Click me")
chart = {
d3.select("svg").remove()
let svg = d3.select(".chart").append("svg").attr("viewBox", [0, 0, width, height]);
// world
svg.append("g").append("path").datum(land).attr("fill", landColor).attr("d", path);
// svg.append("g").append("path").datum(geom).attr("fill", "red").attr("stroke", "red").attr("d", path);
loadSeas(svg)
let colorIndex = -1;
svg.append("g")
.selectAll(".kingdoms")
.data(kingdoms)
.enter()
.append("path")
.attr("id", function(d) {
return d.altName + "_path";
})
.attr("class", function(d) {
return "state"
})
.attr("fill", function(d) {
colorIndex++
return diverging[colorIndex];
})
.attr("fill-opacity", function(d) {
return d.opacity;
})
.attr("stroke", function(d) {
return "grey";
})
.attr("stroke-width", 1)
//.datum(d=>d.datum)
.attr("d", d=>{
return path(d.datum)
});
// svg.append("g")
// .selectAll(".kingdoms")
// .append("path")
// .datum(topojson.feature(uk, uk.objects))
// .attr("d", path);
// svg.append("g")
// .selectAll(".kingdoms")
// .data(topojson.feature(uk, uk.objects)
// .enter()
// .append("path")
// .attr("id", function(d) {
// console.log("*****")
// console.log(d)
// return d.name + "_path";
// })
// .attr("class", function(d) {
// return "state"
// })
// .attr("fill", function(d) {
// return "red";
// })
// // .attr("fill-opacity", function(d) {
// // return d.opacity;
// // })
// .attr("stroke", function(d) {
// return "grey";
// })
// .attr("stroke-width", 1)
// //.datum(d=>d.datum)
// .attr("d", d=>{
// return path(d.objects)
// });
loadUkraine(svg)
return svg.node()
}
url = "https://unpkg.com/world-atlas@2/land-10m.json"
wd = fetch(url).then(d => d.json())
loadUkraine = function(svg) {
// let objects_ocean = ({
// type: "GeometryCollection",
// geometries: []
// })
const feat = uk.objects.sovco.geometries.filter(d=>{console.log(d.properties); return d.SOV_A3=="COS"})
console.log(feat)
let ocean = topojson.feature(uk, uk.objects.sovco.geometries)
svg.append("g")
.attr("id", "ukraine")
.append("path")
.datum(ocean)
.attr("fill", "red")
.attr("stroke", "#eceff5")
.attr("stroke-width", 0.5)
.attr("d", path);
// svg.append("g")
// .data([uk.objects.sovco[3]])
// .enter().append('path')
// .attr("fill", "red")
// .attr("stroke", "#eceff5")
// .attr("class", "country") // <- giving all paths the same class
// .attr('d', path);
}
loadSeas = function(svg) {
let objects_ocean = ({
type: "GeometryCollection",
geometries: [
{
type: "Polygon",
arcs: wd.objects.land.geometries
.map(polygon => polygon.arcs).flat(2)
.map(arcs => arcs.map(s => ~s).reverse())
}
]
})
let ocean = topojson.feature(wd, objects_ocean)
svg.append("g")
.append("path")
.datum(ocean)
.attr("fill", "lightblue")
.attr("stroke", "#eceff5")
.attr("stroke-width", 0.5)
.attr("d", path);
}
path = d3.geoPath(projection)
projection = d3.geoMercator()
.center([23, 50])
.scale(1500)
.translate([width / 2, height / 2])
.precision(0)
geometries = eu.objects["map (2)"].geometries
geom = uk.objects.sovco.geometries
kingdoms = [bohemia, moravia, meissen]
bohemia = new Kingdom("Bohemia", topojson.merge(eu, geometries.filter((d)=>filter(d, "CZ", ["KK", "PK", "UK", "SK", "LK", "HK", "CK", "JK", "EK"]))))
moravia = new Kingdom("Moravia", topojson.merge(eu, geometries.filter((d)=>filter(d, "CZ", ["BK", "ZK", "OK", "VK"]))))
meissen = new Kingdom("Meissen", topojson.merge(eu, geometries.filter((d)=>filter(d, "DE", ["SN"]))))
teschen = new Kingdom("Meissen", {
type: "MultiPolygon",
coordinates: uk.objects.sovco[0]})
poland = new Kingdom("Poland", topojson.merge(eu, geometries.filter((d)=>filter(d, "PL", ["LD", "WP", "SK", "PK", "LU", "KP", "PM"]))))
land = topojson.feature(world, world.objects.land)
world = FileAttachment("countries-50m.json").json()
Modules
Kingdom = function(name, datum) {
this.name = name;
this.datum = datum;
}
function filter(d, iso, cities) {
for (let index = 0; index < cities.length; ++index) {
if(iso === d.properties.iso_a2 && cities[index] === d.properties.id){
return true
}
}
return false
}
Constant values
diverging =['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
landColor = '#F7F5F2'
mutable height = 610
topojson = require("topojson-client@3")
File uploads
eu = FileAttachment("europe.json").json()
uk = FileAttachment("sovco.json").json()
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.
