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 🖥️
viz.text({
fill: "#38896F",
text: "cogito ergo sum",
fontSize: 20,
textDecoration: "underline",
letterSpacing: 10,
wordSpacing: 30
})
viz.text({
fill: "#38896F",
text: "Ideas are the source\nof all things (Platon)",
fontSize: 20,
fontStyle: "italic",
lineSpacing: 10
})
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Text
svg.text({
pos: [200, 50],
text: "Hello geoviz",
fontSize: 30,
fill: "#38896F"
});
// Render
return svg.render();
}
abuja = [7.396, 9.076]
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Text
svg.text({
pos: abuja,
coords: "geo",
text: "Abuja",
fontSize: 30,
fill: "#38896F"
});
// Render
return svg.render();
}
viz.text({ data: world, text: "ISO3", fill: "#38896F", svg_zoomable: true })
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Here we create points at the centroid of the countries in the map coordinates.
const centroids_latlon = viz.tool.centroid(world);
const centroids_xy = viz.tool.project(centroids_latlon, {
projection: svg.projection
});
// Text
svg.text({
coords: "svg",
data: centroids_xy,
text: "ISO3",
fill: "#38896F"
});
// Render
return svg.render();
}
font = viz.tool.addfonts([
{
fontFamily: "Orbitron",
url: await FileAttachment("Orbitron-VariableFont_wght.ttf").url()
}
])
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Only countries with more than 100 million inh.
const bigcountries = viz.tool.featurecollection(
world.features.filter((d) => d.properties.pop >= 100000000)
);
// Text
svg.text({
data: bigcountries,
text: "name",
fontSize: 20,
fontFamily: "Orbitron",
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Position marker
const pos = [250, 120];
svg
.append("circle")
.attr("cx", pos[0])
.attr("cy", pos[1])
.attr("r", 5)
.attr("fill", "#616161")
.attr("stroke", "none");
// Text
svg.text({
pos: pos,
text: `"In that Empire, the Art of Cartography
attained such Perfection that the map
of a single Province occupied the entirety
of a City, and the map of the Empire, the
entirety of a Province"
(Jorge Luis Borges)`,
fontSize: 13,
fill: "#38896F",
dominantBaseline: dominantBaseline,
textAnchor: textAnchor,
dx: dx,
dy: dy
});
// Render
return svg.render();
}
import { style, world, disclaimer, viz } from "@neocartocnrs/geoviz-appendix"
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.
