Published
Edited
Dec 22, 2020
4 stars
md`# Deconstruct Croatia to counties`
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let zupanije = svg
.selectAll('path')
.data(sortedFeatures)
.enter()
.append("path")
.attr("fill", "white")
.attr('class', d => d.properties.NAZIV.replace(/\s/g, ""))
.attr("stroke", "steelblue")
.attr("stroke-width", 1.2)
.attr("stroke-linejoin", "round")
.attr("d", d => path(d));
// .on('mouseover', d => console.log({ d }));
let transitions = [];
sortedFeatures.forEach((d, i) => {
transitions.push(
svg
.select(`.${d.properties.NAZIV.replace(/\s/g, "")}`)
.transition()
.delay(d => 1000 + i * 100)
.duration(2000)
.attr('transform', d => {
let centroid = path.centroid(d);
let row = Math.floor(i / numCols);
let col = i % numCols;
// console.log(d.properties.NAZIV, i, row, col, rowHeight, colWidth);
return `translate(${col * colWidth +
colWidth / 2 -
centroid[0]},${row * rowHeight + rowHeight / 2 - centroid[1]})`;
})
.style('fill', 'lightsteelblue')
.end()
);
});
Promise.all(transitions).then(() => {
svg
.selectAll('text')
.data(sortedFeatures)
.enter()
.append('text')
.style('font-size', 11)
.style('fill', 'steelblue')
.style('text-anchor', 'middle')
.attr('transform', (d, i) => {
let row = Math.floor(i / numCols) + 1;
let col = i % numCols;
return `translate(${col * colWidth + colWidth / 2},${row * rowHeight -
10})`;
})
.text((d, i) => {
let name = d.properties.NAZIV.toLowerCase();
return name.charAt(0).toUpperCase() + name.slice(1);
})
.attr('opacity', 0)
.transition()
.duration(1000)
.attr('opacity', 1);
});
return svg.node();
}
colWidth = width / numCols
rowHeight = height / numRows
sortedFeatures = {
return geojson.features.sort(
(a, b) => path.centroid(a)[1] - path.centroid(b)[1]
);
}
path = d3.geoPath().projection(projection)
projection = d3
.geoAlbers()
.rotate([-15, 0])
.fitExtent([[0, 20], [width * 0.9, height * 0.7]], geojson)
height = 600
geojson = {
let retval = topojson.feature(topoHrv, topoHrv.objects['hrvatska.1']);
// let geojson = topojson.mesh(topoHrv);
return retval;
}
topoHrv = {
let retval = await FileAttachment("hrvatska.1.tomo.topojson.json").json();
let simplified = topojson.presimplify(retval);
let min_weight = topojson.quantile(simplified, 0.35);
return (simplified = topojson.simplify(simplified, min_weight));
}
topojson = require("topojson")
d3 = require("d3@6", "d3-geo@2", "d3-geo-projection@3")
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.
