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 🖥️
china = viz.tool.featurecollection(
world.features.filter((d) => d.properties.ISO3 == "CHN")
)
{
let svg = viz.create({ domain: china, margin: 30 });
svg.path({ datum: world, fill: "#CCC" });
svg.path({ datum: china, fill: "#38896F" });
let inset = viz.container.create({
parent: svg,
pos: [795, 395],
width: 200,
projection: d3.geoOrthographic().rotate([-100, -30])
});
inset.path({ datum: world, fill: "#CCC" });
inset.path({ datum: china, fill: "#38896F" });
inset.outline({ fill: "none", stroke: "#38896F", strokeWidth: 3 });
return svg.render();
}
{
const prj = d3.geoConicConformal().center([2.454071, 46.279229]);
let svg = viz.create({
domain: france,
projection: prj,
margin: [100, 100, 0, 0]
});
svg.path({ datum: france, fill: "#CCC" });
svg.circle({
data: france,
r: "pop",
fill: "#38896F",
k: 40,
tip: "$pop"
});
let inset = viz.container.create({
parent: svg,
pos: [520, 10],
width: 300,
projection: prj,
domain: idf
//projection: d3.geoOrthographic().rotate([-100, -30])
});
inset.path({ data: idf, fill: "#CCC", stroke: "white" });
inset.circle({
data: idf,
r: "pop",
fill: "#38896F",
k: 40,
tip: "$pop"
});
return svg.render();
}
idf = viz.tool.featurecollection(
france.features.filter((d) =>
["75", "77", "78", "91", "92", "93", "94", "95"].includes(d.properties.id)
)
)
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.
