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 🖥️
{
let svg = viz.create({ domain: world }); // we create a container
svg.path({ datum: world, fill: "#38896F" }); // we do stuffs
return svg.render(); // we render the container
}
{
let svg = viz.create({ projection: d3.geoNaturalEarth1() }); // we create a container
svg.path({ datum: world, fill: "#38896F" }); // we do stuffs
return svg.render(); // we render the container
}
svg = {
let svg = viz.create({ projection: d3.geoAlbers() });
svg.path({ datum: world, fill: "#38896F" });
return svg;
}
svg.projection
svg.height
svg.bbox
{
let svg = viz.create({ domain: world });
svg.path({ datum: world, fill: "#38896F", fillOpacity: 0.5 });
svg
.append("circle")
.attr("cx", svg.width / 2) // Centered in x
.attr("cy", svg.height / 2) // Centerd in y
.attr("r", 10)
.attr("fill", "none")
.attr("stroke", "#38896F")
.attr("stroke-width", 5);
return svg.render();
}
{
let svg = viz.create({ domain: world, zoomable: [0.5, 2] });
svg.path({ datum: world, fill: "#38896F" });
return svg.render();
}
{
let svg = viz.create({
margin: 40, // Or [40,40,40,40]
background: "#d9fcff",
width: 400,
domain: world
});
svg.path({ datum: world, fill: "#38896F" });
return svg.render();
}
{
let svg = viz.create({
domain: chn,
margin: 10,
width: 400
});
svg.path({ datum: world, fill: "#38896F", fillOpacity: 0.3 });
svg.path({ datum: chn, fill: "#38896F" });
return svg.render();
}
{
let svg = viz.create({
domain: [aus, chn],
margin: 10,
width: 400
});
svg.path({ datum: world, fill: "#38896F", fillOpacity: 0.3 });
svg.path({ datum: aus, fill: "#38896F" });
svg.path({ datum: chn, fill: "#38896F" });
return svg.render();
}
{
let svg = viz.create({
domain: [
[-12, 20],
[43, 65]
],
width: 400
});
svg.path({ datum: world, fill: "#38896F" });
return svg.render();
}
viz.tool.addfonts([
{
fontFamily: "Courgette",
url: await FileAttachment("Courgette-Regular.ttf").url()
}
])
{
let svg = viz.create({ fontFamily: "Courgette", domain: world });
svg.path({ datum: world, fill: "#38896F", fillOpacity: 0.2 });
svg.text({ data: world, text: "Courgette", fill: "#38896F" });
svg.header({ text: "Courgette" });
svg.footer({ text: "Courgette" });
return svg.render();
}
d3 = require("d3", "d3-geo-projection@2", "d3-geo-polygon")
{
let svg = viz.create({
projection: d3.geoNaturalEarth1().rotate([longitude, latitude]),
width: 700
});
svg.outline();
svg.graticule({ stroke: "white" });
svg.path({ datum: world, fill: "#38896F" });
return svg.render();
}
container = viz.create({
projection: d3.geoNaturalEarth1(),
width: 700
})
countries = container.path({ datum: world, fill: "#38896F" })
outline = container.outline({ id: "outline" })
graticule = container.graticule({ id: "toto", stroke: "white" })
container.render({ order: [outline, graticule, countries] })
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.
