Hi. I'm Nicolas Lambert, research engineer in geographic information science at CNRS (France). My job is to draw maps and teach cartography at the university. I am a geographer 🌎, and not really a developer 🖥️
map1 = {
let svg = viz.create({
projection: d3.geoEqualEarth(),
zoomable: true // 🪄🪄🪄🪄🪄
});
svg.outline();
svg.graticule({ stroke: "white" });
svg.path({ datum: world, fill: "white", fillOpacity: 0.5 });
svg.circle({
data: cities,
r: "population",
k: 10,
fill: "#38896F",
strokeWidth: 0.5,
tip: "$city"
});
svg.header({ text: "A Zoomable Map of World Cities" });
return svg.render();
}
map = {
let svg = viz.create({
projection: d3.geoMercator(),
zoomable: true
});
svg.tile({
zoomDelta: 1,
increasetilesize: 1,
url: "worldStreet"
});
return svg.render();
}
{
let svg = viz.create({
projection: d3.geoEqualEarth(),
zoomable: [0.75, 2] // by using an array, you can specify the zoom scale extent
});
svg.outline();
svg.graticule({ stroke: "white" });
svg.path({ datum: world, fill: "white", fillOpacity: 0.5 });
return svg.render();
}
{
let k = 80;
let scale = d3.scaleSqrt(
[0, d3.max(world.features.map((d) => +d.properties.pop))],
[0, k * 0.8]
);
viz.tool.addfonts([
{
fontFamily: "TiltNeon",
url: await FileAttachment(
"TiltNeon-Regular-VariableFont_XROT,YROT.ttf"
).url()
}
]);
let svg = viz.create({
zoomable: "versor",
//zoomable: true,
margin: 50,
width: 800,
projection: d3.geoOrthographic().rotate([-20, -25]).clipAngle(90)
});
svg.outline({ fill: viz.effect.radialGradient(svg) });
svg.graticule();
svg.path({
datum: world,
id: "test",
fill: "#317370"
});
svg.circle({
id: "bubbles",
data: world,
r: "pop",
fill: "#c95fa9",
tip: "$NAMEen",
k
});
svg.text({
id: "lab",
data: world,
text: "ISO3",
fill: "white",
fontFamily: "TiltNeon",
fontSize: (d) => scale(d.properties.pop)
});
svg.legend.circles_nested({
id: "legend",
pos: [5, 5],
data: world.features.map((d) => d.properties.pop),
title: "Population",
gap: 10,
values_dx: 3,
frame: true,
frame_stroke: "none",
k
});
return svg.render();
}
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.
