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.square({ fill: "#38896F", side: 50 })
viz.plot({ type: "square", side: 50, fill: "#38896F", angle: 45 })
position = [300, 100]
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Square
svg.square({
pos: position,
angle: 45,
fill: "#38896F"
});
// Render
return svg.render();
}
abuja = [7.54, 9.19]
{
// Container
let svg = viz.create({
domain: world,
width: 500,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Square
svg.square({
coords: "geo",
angle: 45,
pos: abuja,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Squares
svg.square({
data: world,
side: 10,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: "true",
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Squares
svg.square({
data: world,
k: 20,
side: "pop",
angle,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Circles
svg.square({
data: world,
side: (d) => gradsizes(d.properties.pop),
sort: (a, b) =>
d3.descending(Math.abs(+a.properties.pop), Math.abs(+b.properties.pop)),
fill: (d) => gradcol(d.properties.pop)
});
// Render
return svg.render();
}
viz.legend.squares({
data: world.features.map((d) => d.properties.pop),
values_factor: 1 / 1000000,
values_round: 0,
title: "Population",
subtitle: "(in million inh.)"
})
viz.legend.squares_nested({
data: world.features.map((d) => d.properties.pop),
values_factor: 1 / 1000000,
values_round: 0,
title: "Population",
subtitle: "(in million inh.)"
})
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.
