chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.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("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", 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")
.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)
.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) => d3.interpolateGreys(d.data.value / totalLenth))
.attr("class", "arc")
.style("opacity", 0)
.attr("transform", (d) => `translate(${centroid[0]},${centroid[1]})`)
.attr("d", arc);
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")
.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("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();
}