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.legend
viz.legend.box()
viz.plot({ type: "leg_box" })
viz.legend.box({
rect_fill: "#38896F",
rect_width: 30,
rect_height: 30,
rect_strokeWidth: 2,
label: "Hello Geoviz",
label_fill: "#38896F",
label_fontSize: 20
})
viz.legend.box({
gap: 10,
rect_fill: "#38896F",
rect_width: 30,
rect_height: 30,
rect_strokeWidth: 2,
label: "Hello Geoviz",
label_fill: "#38896F",
label_fontSize: 13,
title: "Title",
title_textDecoration: "underline",
subtitle: "Subtitle",
note: "Made with geoviz",
note_fill: "#38896F"
})
viz.legend.box({
text_fill: "#38896F",
text_fontSize: 12,
rect_fill: "#38896F",
rect_width: 30,
rect_height: 30,
rect_strokeWidth: 2,
label: "Hello Geoviz",
label_fontSize: 13,
title: "Title",
subtitle: "Subtitle",
note: "Made with geoviz"
})
{
let svg = viz.create({ width: 800, domain: world });
svg.path({ datum: world, fill: "#38896F" });
svg.legend.box({
pos: [60, 220],
rect_fill: "#38896F",
rect_width: 30,
rect_height: 30,
label: "Hello Geoviz",
label_fontSize: 13,
title: "Title",
subtitle: "Subtitle",
note: "Made with geoviz",
frame: true,
frame_fill: "#38896F",
frame_fillOpacity: 0.2,
frame_margin: 10
});
return svg.render();
}
viz.legend.choro_horizontal()
viz.plot({ type: "leg_choro_horizontal" })
viz.legend.choro_vertical({})
choro = viz.tool.choro(
world.features.map((d) => d.properties.gdppc),
{ method: "q6", palette: "BluGrn", nb: 6 }
)
viz.legend.choro_horizontal({ breaks: choro.breaks, colors: choro.colors })
viz.legend.choro_horizontal({
title: "GDP per capita",
subtitle: "(in thousands)",
breaks: choro.breaks,
colors: choro.colors,
values_fill: "#38896F",
values_factor: 0.001, // to convert into thousands
values_round: 1,
rect_height: 20,
rect_spacing: 2,
missing: false
})
viz.legend.typo_horizontal()
viz.legend.typo_vertical()
typo = viz.tool.typo(
world.features.map((d) => d.properties.region),
{ palette: "Bold" }
)
viz.legend.typo_horizontal({ types: typo.types, colors: typo.colors })
viz.legend.typo_horizontal(typo)
viz.legend.typo_horizontal({
...typo,
title: "The 6 continents",
subtitle: "(Even if continents are a geographical nonsense...)",
rect_transform: "translate(0,20)",
alphabetical: false,
rect_width: 20,
rect_spacing: 30,
values_dy: -27
})
viz.legend.circles()
viz.legend.circles_nested()
viz.legend.circles_nested({
data: world.features.map((d) => d.properties.pop),
k: 40
})
radius = viz.tool.radius(
world.features.map((d) => d.properties.pop),
{ k: 50 }
)
viz.legend.circles_nested(radius)
viz.legend.circles_nested({
...radius,
nb: 6,
gap: 25,
title: "Population in inh.",
circle_fill: "#38896F",
circle_fillOpacity: 0.5,
circle_stroke: "white",
line_stroke: "#38896F",
line_width: 50,
line_length: 80,
values_dy: -5,
values_textAnchor: "end",
values_fill: "#38896F",
note: "Made with Geoviz",
note_dy: -15
})
viz.legend.spikes()
viz.legend.spikes({
data: world.features.map((d) => d.properties.pop / 1000000),
spike_stroke: "#38896F",
spike_width: 30,
spike_fill: "#38896F",
spike_fillOpacity: 0.3,
nb: 8,
k: 100,
spike_straight,
values_round: 0,
title: "Population",
subtitle: "(in million inh.)",
note: "Made with Geoviz"
})
viewof circle_cornerRadius = Inputs.range([0, 10], {
label: "circle_cornerRadius",
step: 1,
value: 5
})
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({
title: "Population and Wealth",
// TOP
top_title: "Population",
top_data: world.features.map((d) => d.properties.pop / 1000000),
// BOTTOM
bottom_title: "GDP",
bottom_data: world.features.map((d) => d.properties.gdp / 1000000000)
})
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.)"
})
viz.legend.symbol_horizontal()
viz.legend.symbol_vertical()
viz.tool.symbols()
viz.legend.symbol_horizontal({
title: "A legend with symbols",
subtitle: "subtitle",
note: "source",
types: ["pin", "hospital", "flower", "cloud", "human", "tent"],
symbols: ["pin", "hospital", "flower", "cloud", "human", "tent"],
symbol_fill: "#38896F",
symbol_stroke: "none"
})
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.
