Statistician, map-maker, dataviz consultant and trainer, Observable ambassador & R instructor. I enjoy explaining things i love in detail, the most clearly i can, and building live analytical opendataflows.
@ericmauviere
a_dep_topo = FileAttachment('a_dep2021_topo.json').json()
a_dep = topojson.feature(a_dep_topo, a_dep_topo.objects.a_dep2021_topo)
proj_e4326_to_map_e2154 = proj4d3(2154).fitExtent(map_extent, a_dep)
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154, context)
// départements
context.lineWidth = 1
context.strokeStyle = '#ccc'
context.fillStyle = '#FEEDAB'
a_dep.features.forEach( d => path2154(d) )
context.fill()
context.stroke()
return context.canvas
}
a_fra = topojson.merge(a_dep_topo, a_dep_topo.objects.a_dep2021_topo.geometries)
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154 , context)
// départements
context.strokeStyle = '#ccc'
context.fillStyle = '#FEEDAB'
a_dep.features.forEach( d => path2154(d) )
context.fill()
context.stroke()
// contour France
context.strokeStyle = 'black'
context.beginPath()
path2154(a_fra)
context.stroke()
return context.canvas
}
regions = d3.dsv(';','https://static.data.gouv.fr/resources/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/20210108-093655/reg2020.csv')
reg_features = regions.map ( r => [r, topojson.merge(a_dep_topo, a_dep_topo.objects.a_dep2021_topo.geometries
.filter(d => d.properties.reg == r.codgeo))] )
.map(d => ({type:'Feature', properties:d[0], geometry:d[1]}))
a_reg = ({type: "FeatureCollection", features: reg_features})
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154, context)
// régions
context.strokeStyle = '#ccc'
context.fillStyle = '#FEEDAB'
a_reg.features.forEach((d,i) => {
context.beginPath()
context.fillStyle = d3.schemeTableau10[i % 10]
path2154(d)
context.fill()
})
context.stroke()
// contour France
context.strokeStyle = 'black'
context.beginPath()
path2154(a_fra)
context.stroke()
return context.canvas
}
l_dep0 = topojson.mesh(a_dep_topo, a_dep_topo.objects.a_dep2021_topo)
l_dep = topojson.mesh(a_dep_topo, a_dep_topo.objects.a_dep2021_topo,
(a, b) => a !== b )
l_fra = topojson.mesh(a_dep_topo, a_dep_topo.objects.a_dep2021_topo,
(a, b) => a === b)
l_reg = topojson.mesh(a_dep_topo, a_dep_topo.objects.a_dep2021_topo,
(a, b) => a.properties.reg !== b.properties.reg )
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154, context)
// fond France
context.fillStyle = '#FEEDAB'
context.beginPath()
path2154(a_fra)
context.fill()
context.stroke()
// limites départementales
context.strokeStyle = '#ccc'
context.beginPath()
path2154(l_dep)
context.stroke()
// limites régionales
context.strokeStyle = '#999'
context.beginPath()
path2154(l_reg)
context.stroke()
return context.canvas
}
a_dep_topo2 = topojson.presimplify(a_dep_topo)
a_dep_topo_s = topojson.simplify(a_dep_topo2, topojson.quantile(a_dep_topo2, 0.01) )
a_dep_s = topojson.feature(a_dep_topo_s, a_dep_topo_s.objects.a_dep2021_topo)
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154, context)
// départements
context.strokeStyle = '#ccc'
context.fillStyle = '#FEEDAB'
a_dep_s.features.forEach( d => path2154(d) )
context.fill()
context.stroke()
// contour France
let a_fra = topojson.merge(a_dep_topo_s, a_dep_topo_s.objects.a_dep2021_topo.geometries)
context.strokeStyle = 'black'
context.beginPath()
path2154(a_fra)
context.stroke()
return context.canvas
}
neighbors = topojson.neighbors(a_dep_topo.objects.a_dep2021_topo.geometries)
neighbors_map = new Map(neighbors.map((neighbors, i) =>
[a_dep.features[i].properties.dep, neighbors
.map(j => a_dep.features[j].properties.dep)]))
enc_map = a_dep_topo.objects.a_dep2021_topo.geometries
.filter(d => d.arcs.length > 1) // plusieurs rings
.map((d,i) => [ d.properties.dep, d.type,
d.arcs.filter(e => e.flat().length == 1) //isoler les rings d'un seul arc
.flat(2)
.map(i => i < 0 ? -i - 1 : i) ])
viewof enc_dt = aq.from(enc_map)
.select({'0':'dep', '1':'type','2':'id_arcs'})
.unroll('id_arcs')
.view()
viewof enc_dt2 = enc_dt.join(enc_dt, 'id_arcs')
.filter(d => d.dep_1 != d.dep_2)
.dedupe('dep_1','dep_2').select(aq.not(2))
.filter(d => d.dep_1 < d.dep_2)
.view()
dep_geom_map = new Map( a_dep_topo.objects.a_dep2021_topo.geometries.map( (d,i) => [i, d.arcs.flat(2)]) )
dep_geom_dt = aq.from(dep_geom_map, ['fid', 'arcs'])
.unroll('arcs')
.derive({arcs_abs: d => d.arcs < 0 ? -d.arcs - 1 : d.arcs})
bordures = dep_geom_dt.groupby('arcs_abs').count()
.filter(d => d.count == 1) // retient les arcs qui ne sont utilisés qu'une fois
.lookup(dep_geom_dt, ['arcs_abs'], 'fid') // va chercher les départements correspondants
.dedupe('fid').array('fid') // dédoublonne
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154, context)
// départements
context.strokeStyle = '#ccc'
a_dep.features.forEach( (d,i) => {
context.beginPath()
context.fillStyle = bordures.includes(i) ? 'steelblue' : '#FEEDAB'
path2154(d)
context.fill()
context.stroke()
})
// contour France
context.strokeStyle = 'black'
context.beginPath()
path2154(a_fra)
context.stroke()
return context.canvas
}
{
const context = DOM.context2d(size.width, size.height)
const path2154 = d3.geoPath(proj_e4326_to_map_e2154, context)
// départements
context.strokeStyle = '#ccc'
a_dep.features.forEach( (d,i) => {
let dist = distances.get(i)
context.beginPath()
context.fillStyle = color(dist)
path2154(d)
context.fill()
context.stroke()
})
return context.canvas
}
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.
