Published
Edited
Mar 10, 2022
1 star
Insert cell
md`# Which countries border Ukraine?`
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg
.append("rect")
.attr("width", width)
.attr("height", height)
// .attr("fill", "#FFF8E7");
.attr("fill", "white");

let zupanije = svg
.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("fill", "lightsteelblue")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.4)
.attr("stroke-linejoin", "round")
.attr("d", (d) => {
return path(d);
});

let title = svg
.append("text")
.attr("x", centroid[0])
.attr("y", centroid[1] - 70)
.attr("font-size", 22)
// .attr("font-weight", 700)
.attr("text-anchor", "middle")
.style("opacity", 0)
.text("Borders shared");

let subtitle = svg
.append("text")
.attr("x", centroid[0])
.attr("y", centroid[1] - 50)
.attr("font-size", 22)
.attr("font-weight", 700)
.attr("text-anchor", "middle")
.style("opacity", 0)
.text(`${d3.format(",")(totalLenth)} km`);

let credit = svg
.append("text")
// .attr("x", width - 20)
// .attr("y", height - 20)
.attr("x", 20)
.attr("y", 70)
.attr("fill", "#546767")
.attr("text-anchor", "start")
.attr("font-size", 12)
.style("opacity", 1)
.text(`@velimirgasp`);

let majorTitle = svg
.append("text")
.attr("x", 20)
.attr("y", 50)
.attr("fill", "#546767")
.attr("text-anchor", "start")
.attr("font-size", 24)
.style("opacity", 1)
.text(`🇺🇦 Ukraine Borders 🇺🇦`);

let transitions = [];

transitions.push(
svg
.selectAll("path")

// .attr("fill-opacity", 1)
.transition()
.delay(duration)
.duration(duration)
.attrTween("d", function (d, i) {
return flubber.toCircle(path(d), centroid[0], centroid[1], radius, {
maxSegmentLength: 0.2
});
})
.transition()
.duration(duration)
.attr("stroke-width", 40)
.attr("fill", "white")
.transition()
.duration(duration)

// .attr("fill", "#FFF8E7")
// .attr("fill", "lightsteelblue")
// .attr("fill-opacity", 0.5)
.end()
);

title
.transition()
.duration(duration)
.delay(2 * duration)
.style("opacity", 1);

subtitle
.transition()
.duration(duration)
.delay(3 * duration)
.style("opacity", 1);

Promise.all(transitions).then(() => {
let pieChart = svg
.selectAll(".arc")
.data(arcs)
.join("path")
// .attr("fill", (d) => color(d.data.name))
.attr("fill", (d) => d3.interpolateGreys(d.data.value / totalLenth))
// .attr("fill", "steelblue")
// .attr("fill-opacity", (d, i) => d.data.value / totalLenth)
.attr("class", "arc")
.style("opacity", 0)
.attr("transform", (d) => `translate(${centroid[0]},${centroid[1]})`)
.attr("d", arc);

// pieChart
// .append("title")
// .text((d) => `${d.data.label}: ${d.data.value.toLocaleString()}`);

pieChart.on("mouseover", (event, d) => {
const i = data.indexOf(data.find((item) => item.name === d.data.name));
d3.select(`.countryLabel-${i}`).style("font-weight", 700);
});

pieChart.on("mouseout", (event, d) => {
const i = data.indexOf(data.find((item) => item.name === d.data.name));
d3.select(`.countryLabel-${i}`).style("font-weight", 400);
});

pieChart.transition().duration(duration).style("opacity", 1).end("sad je");

let texts = svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 16)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.style("opacity", 0)
.attr(
"transform",
(d) =>
`translate(${arc.centroid(d)[0] + centroid[0]}, ${
arc.centroid(d)[1] + centroid[1]
})`
)
.call((text) =>
text
.append("tspan")
.attr("y", (_, i) => (i != 5 ? 10 : 0))
.attr("font-size", 32)
.style("pointer-events", "none")
// .attr("font-weight", "bold")
.text((d) => d.data.name)
)
.transition()
.duration(duration)
.style("opacity", 1);

let table = svg
.append("g")
.attr("transform", `translate(${centroid[0]}, ${centroid[1]})`)
.attr("font-family", "sans-serif")
.attr("font-weight", 400)
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.style("opacity", 0)
.attr("dy", (_, i) => i * 16)
.call((text) =>
text
.append("tspan")
// .attr("x", "2em")
.attr("font-size", 14)
.attr("text-anchor", "middle")
.attr("class", (_, i) => `countryLabel-${i}`)
.attr("opacity", 0.8)
.text((d) => `${d.data.label} ${d3.format(",")(d.data.value)} km`)
)
.transition()
.duration(duration)
.style("opacity", 1);
});

return svg.node();
}
Insert cell
pie = d3
.pie()
//.padAngle(0.005)
.padAngle(0.0)
.startAngle(-1)
.sort(null)
.value((d) => d.value)
Insert cell
arc = {
// const radius = Math.min(width, height) / 2;
return d3
.arc()
.innerRadius(radius * 0.85)
.outerRadius(radius * 1.15);
}
Insert cell
duration = 2000
Insert cell
radius = 175
Insert cell
Insert cell
arcs = pie(data)
Insert cell
color = d3
.scaleOrdinal()
.domain(data.map(d => d.name))
.range(
d3
.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length)
.reverse()
)
Insert cell
data = neighbours.map((d) => {
return { name: d[0], value: d[1], label: d[2] };
})
Insert cell
totalLenth = neighbours.reduce((a, b) => a + (b[1] || 0), 0)
Insert cell
Insert cell
neighbours = [
["🇧🇾", 891, "Belarus"],
["🇷🇺", 1974, "Russia"],
["🇲🇩", 939, "Moldova"],
["🇷🇴", 531, "Romania"],
["🇭🇺", 103, "Hungary"],
["🇸🇰", 90, "Slovakia"],
["🇵🇱", 428, "Poland"]
]
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
projection = d3
.geoAlbers()
.rotate([-15, 0])
.fitExtent(
[
[20, 100],
[width * 0.9, height * 0.9]
],
geojson
)
Insert cell
height = 600
Insert cell
geojson = {
//let retval = topojson.feature(topoHrv, topoHrv.objects['gadm36_HRV_0']);
let retval = topojson.feature(topo, topo.objects.gadm40_UKR_0);

//topojson.feature(topo, topo.objects.states)

// let retval = await FileAttachment('hrv.geojson').json();
// let geojson = topojson.mesh(topoHrv);
return retval;
}
Insert cell
topo = {
//let retval = await FileAttachment("gadm36_HRV_0.json").json();
let retval = await FileAttachment("ukraine.topo.json").json();
retval.arcs.reverse();
return retval;
// let simplified = topojson.presimplify(retval);
// //let min_weight = topojson.quantile(simplified, 0.35);
// let min_weight = topojson.quantile(simplified, 0.25);
// return (simplified = topojson.simplify(simplified, min_weight));
}
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