// Lambert-93 as per https://geodesie.ign.fr/contenu/fichiers/Lambert93_ConiquesConformes.pdf, p.2.
proj = d3.geoConicConformal()
.parallels([44, 49])
.rotate([-3, -46.5])
.scale(3200)
.translate([width / 2, height / 2])
function draw(transform) {
const map = d3.select('svg');
if (transform.k === 1 && transform.x === 0 && transform.y === 0) {
// First draw
map.select('g.layer-comm')
.attr('stroke', '#fff')
.attr('stroke-width', communePathWidth)
.selectAll('path')
.data(data.communes)
.join('path')
.attr('d', path)
.attr('fill', d => d.properties.color);
map.select('g.layer-dep')
.attr('stroke', colorDep)
.attr('stroke-width', depPathWidth)
.selectAll('path')
.data(data.dep_borders)
.join('path')
.attr('d', path)
.attr('fill', 'transparent');
} else {
// Scale / translate the path and scale the stroke width
d3.selectAll('g.layer-comm > path')
.attr('stroke-width', communePathWidth / transform.k)
.attr('fill', d => d.properties.color)
.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')')
d3.selectAll('g.layer-dep > path')
.attr('stroke-width', depPathWidth / transform.k)
.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')')
}
}
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.
