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 🖥️
d3 = require("d3", "d3-geo-projection", "d3-geo-polygon")
{
let svg = viz.create({
projection: d3.geoInterruptedHomolosine(),
width: 600
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 60, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({ projection: viz.proj.geoDodecahedral(), width: 600 });
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 60, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({
projection: viz.proj.geoNaturalEarth1().rotate([longitude, 0]),
width: 600
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 60, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({
projection: viz.proj.geoGingery().lobes(lobes),
width: 600
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 60, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({
projection: viz.proj.geoOrthographic().rotate([30, -30]),
zoomable: "versor",
width: 400
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 30, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({
projection: "bertin1953",
width: 400
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 60, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({
projection: "Orthographic.rotate([0, 90])",
width: 400
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "graticule", step: 60, stroke: "white" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
return svg.render();
}
{
let svg = viz.create({
projection: "mercator",
zoomable: true,
width: 500,
margin: [-50, 0, -150, 0]
});
svg.tile({ type: "outline" });
svg.plot({ type: "prop", data: world, var: "pop", fill: "#38896F", k: 25 });
return svg.render();
}
viz.draw({
params: { zoomable: true, width: 500, margin: [-50, 0, -150, 0] },
layers: [
{ type: "tile" },
{ type: "prop", data: world, var: "pop", fill: "#38896F", k: 25 }
]
})
If you don't define a projection, layers are displayed as they are. In this case, you must specify the display <mark>domain</mark> and you can't use the outline and graticule layers.
{
let svg = viz.create({
width: 600,
domain: world
});
svg.plot({ type: "path", data: world, fill: "#38896F" });
return svg.render();
}
viz.draw({
params: { width: 600 },
layers: [{ type: "path", data: world, fill: "#38896F" }]
})
lambert93 = viz.tool.proj4d3(
await require("proj4"),
`+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`
)
{
let svg = viz.create({
projection: lambert93,
domain: france,
width: 500
});
svg.plot({ type: "path", data: france, fill: "#38896F" });
svg.plot({ type: "header", text: "LAMBERT-93", fill: "#38896F" });
return svg.render();
}
{
let svg = viz.create({
projection: viz.proj.geoNaturalEarth1().rotate([longitude, 0]),
width: 600
});
svg.plot({ type: "outline", fill: "#38896F" });
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
svg.plot({
type: "tissot",
fill: "#38896F",
step: 25
});
return svg.render();
}
worldNaturalEarth1 = viz.tool.project(world, {
projection: d3.geoNaturalEarth1(),
width: 100
})
Inputs.table(worldNaturalEarth1.features.map((d) => d.geometry))
viz.plot({
type: "path",
coords: "svg",
data: worldNaturalEarth1,
fill: "#38896F"
})
world2 = viz.tool.unproject(worldNaturalEarth1, {
projection: d3.geoNaturalEarth1()
})
viz.plot({
type: "path",
coords: "geo",
data: world2,
fill: "#38896F"
})
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.
