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 🖥️
Public
Edited
Mar 19, 2024
viz.halfcircle({ r: 40, fill: "#38896F" })
viz.plot({ type: "halfcircle", r: 40, fill: "#38896F" })
viz.halfcircle({ r: 40, fill: "#38896F", angle, cornerRadius, innerRadius })
position = [300, 100]
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Half-circle
svg.halfcircle({
pos: position,
dx: 0,
dy: 0,
fill: "#38896F"
});
// Render
return svg.render();
}
yaounde = [3.92, 11.63]
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Half-circle
svg.halfcircle({
coords: "geo",
pos: yaounde,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
svg.halfcircle({
data: world,
tip: true,
r: 10,
fill: "#38896F",
fillOpacity: 0.4,
stroke: "#38896F"
});
// Render
return svg.render();
}
viewof angle2 = Inputs.range([-180, 180], { label: "rotate", step: 1 })
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Half-circles
svg.halfcircle({
data: world,
r: "pop",
k: 40,
angle: angle2,
descending: true,
fill: "#38896F",
fillOpacity: 0.4,
stroke: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// TOP
svg.halfcircle({
data: world,
r: "gdp",
k: 30,
dy: -dy,
descending: true,
fill: "#F13C47",
fillOpacity: 0.7,
stroke: "white",
tip: (d) => `${d.properties.name}
${Math.round(d.properties.gdp / 1000000000)} billions USD`
});
// BOTTOM
svg.halfcircle({
data: world,
r: "pop",
k: 30,
dy: dy,
angle: 180,
descending: true,
fill: "#319ABF",
fillOpacity: 0.7,
stroke: "white",
tip: (d) => `${d.properties.name}
${Math.round(d.properties.pop / 1000000)} million inh.`
});
// Render
return svg.render();
}
viz.legend.circles_half({
title: "World population",
subtitle: "(in thousands inh.)",
data: world.features.map((d) => d.properties.pop / 1000),
circle_cornerRadius,
circle_fill: "#38896F",
circle_fillOpacity: 0.7
})
viz.legend.mushrooms()
viz.legend.mushrooms({
title: "Population and Wealth",
subtitle: "(in 2020)",
gap: 5,
// TOP
top_title: "GDP (in bilions USD)",
top_title_fill: "#F13C47",
top_circle_fill: "#F13C47",
top_data: world.features.map((d) => d.properties.gdp / 1000000000),
// BOTTOM
bottom_title: "Population (in million inh.)",
bottom_title_fill: "#319ABF",
bottom_circle_fill: "#319ABF",
bottom_data: world.features.map((d) => d.properties.pop / 1000000),
note: "Source: world bank, 2022"
})
viz.legend.mushrooms({
title: "Population in two world regions",
// TOP
top_title: "Population (african countries)",
top_data: africapop,
top_fixmax: 1402,
top_nb: 3,
top_k: 80,
// BOTTOM
bottom_title: "Population (asian countries)",
bottom_data: asiapop,
bottom_fixmax: 1402,
bottom_k: 80,
frame: true
})
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.
