DataViz, Dashboard, Observable Ambassador and Notion Certified
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
draw = (context, points, t) => {
mutable nbtotal = points.length;
if (points.length > nbCities) {
points = points.slice();
d3.quickselect( // very nice suggestion from https://observablehq.com/@fil Thanks!!
points,
nbCities,
0,
points.length - 1,
(a, b) => b.size - a.size
);
points.splice(nbCities, points.length - 1)
}
if (background){
context.globalAlpha = 1
context.drawImage(image, 0, 0, width, height)
context.fill()
}
mutable nbrendered = points.length;
// Les contours
const cities = points.map(p => contours.get(p.id)).filter(p => p)
const listes = d3.nest()
.key(d => d.properties.LISTE)
.entries(cities)
context.lineJoin = "round"
context.lineCap = "round"
context.lineWidth = 0.2/t.k
context.strokeStyle = "white"
//context.scale(t.k, t.k)
const path = d3.geoPath(null, context)
listes.forEach(c => {
context.beginPath()
const geo = {type: "FeatureCollection", features: c.values}
context.fillStyle = color(c.key)
path(geo)
context.fill()
context.stroke()
context.closePath
})
}
//topojson.mesh(contours, contours.objects.communesGeojsonInsse, (a, b) => a !== b)
/*
contours.objects.communesGeojsonInsse.geometries.forEach(c => {
const v = c.properties.insee_comm
const p = Cities.get(v)
if (p) p.id = c.properties.gid -1
})
*/
//contours = d3.json('https://raw.githubusercontent.com/toulousedataviz/toulousedataviz.github.io/master/communesTopoInsee.json')
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.
