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.circle({ r: 40, fill: "#38896F" })
viz.plot({ type: "circle", r: 40, fill: "#38896F" })
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Circle
svg.circle({
pos: position,
fill: "#38896F"
});
// Render
return svg.render();
}
mumbai = [72.88, 19.07]
Type HTML, then Shift-Enter. Arrow ↑/↓ to switch modes.
{
// Container
let svg = viz.create({
domain: world,
width: 500,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Circle
svg.circle({
coords: "geo",
pos: mumbai,
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.circle({
data: world,
r: 4,
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.circle({
data: world,
r: "pop",
k: 30,
sort: "pop",
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.circle({
data: world,
r: (d) => Math.sqrt(d.properties.pop / 2000000),
sort: (a, b) =>
d3.descending(Math.abs(+a.properties.pop), Math.abs(+b.properties.pop)),
fill: "#38896F"
});
// Render
return svg.render();
}
radius = viz.tool.radius(
world.features.map((d) => d.properties.pop),
{ k: 40, fixmax: undefined }
)
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Circles
svg.circle({
data: world,
r: (d) => radius.r(d.properties.pop),
sort: "pop",
fill: "#38896F"
});
// Render
return svg.render();
}
viz.legend.circles({ circle_fill: "#38896F" })
{
// Container
let svg = viz.create({
width: 1000,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Circles
svg.circle({
data: world,
r: (d) => radius.r(d.properties.pop),
sort: "pop",
fill: "#38896F"
});
// Legend
svg.legend.circles_nested({
pos: [70, 260],
gap: 10,
title: "Number of inh.",
data: radius.data,
k: radius.k
});
// Render
return svg.render();
}
viz.circle({
data: world,
r: 8,
dodge: true,
fill: "#38896F"
})
viz.circle({
data: world,
r: "pop",
dodge: true,
fill: "#38896F"
})
{
// Container
let svg = viz.create({
width: 500,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Circle
svg.circle({
r: 20,
fillOpacity: 0.5,
pos: position,
fill: "#38896F"
});
// Translated circle
svg.circle({
r: 20,
pos: position,
fill: "#38896F",
transform: "translate(40,0)"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 800,
domain: africa,
zoomable: true,
background: "#b7e9f7",
margin: 30
});
svg.path({ datum: world, fill: "white", fillOpacity: 0.4 });
svg.path({ datum: africa, fill: "#F5DA7E", stroke: "white" });
svg.header({ text: "Population and wealth in Africa" });
// Circles (population)
svg.circle({
data: africa,
r: (d) => popradius.r(d.properties.poppct),
sort: "poppct",
fill: "#38896F",
stroke: "white"
});
// Nested circles (GDP)
svg.circle({
data: africa,
r: (d) => gdpradius.r(d.properties.gdppct),
transform: (d) =>
`translate(0, ${
popradius.r(d.properties.poppct) - gdpradius.r(d.properties.gdppct)
})`,
sort: "gdppct",
fill: "#893852",
stroke: "none"
});
// Legend
svg.legend.box({
pos: [100, 400],
rect_fill: "#38896F",
label: "Share of world\npopulation in this\ncountry"
});
svg.legend.box({
pos: [100, 440],
rect_fill: "#893852",
label: "Share of world\nGDP in this\ncountry"
});
// Legend
// Render
return svg.render();
}
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.
