The avatar for @neocartocnrs
Nicolas Lambert
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
geoviz
Edited
Nov 26
2 stars
1
geoviz
Map projectionsh3-jsSymbolsThe draw() functionsquareProportional symbolsSpike markTypology
Choropleth
Layout marksHandle geometriesSVG filters and clipTile markContainersinsetsPath markText markInteractivityTooltipsLegendsCircle markRidgelines mapWhy it's better not to add scalebars to world mapsNight and dayPan and zoomCharging points for electric vehicles in ParisLet's design a "dot cartogram"Hello geovizWorld Population
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.plot({
type: "choro",
data: world,
var: "gdppc",
legend: true
})
Insert cell
Insert cell
Insert cell
viz.plot({
type: "choro",
colors: "Reds",
method: "geometric",
nb: 4,
data: world,
var: "gdppc",
leg_type: "horizontal",
leg_values_factor: 0.001,
leg_values_round: 1,
leg_pos: [400, 350],
leg_missing: false,
leg_missing_text: "data not available",
leg_title: "GDP per capita",
leg_subtitle: "(in thousands)"
})
Insert cell
Insert cell
{
let svg = viz.create({ projection: d3.geoNaturalEarth1(), width: 700 });
svg.plot({ type: "outline" });
svg.plot({
type: "graticule",
stroke: "white",
step: 20,
strokeDasharray: "none"
});
svg.plot({
type: "choro",
data: world,
missing: "#CCC",
leg_missing_text: "no data",
colors: "Temps",
var: "gdppc",
breaks: [200, 1000, 5000, 10000, 50000, 200000],
leg_values_round: 0,
reverse: true,
strokeWidth: 0.3,
leg_title: "GDP per capita",
tip: true
});
return svg.render();
}
Insert cell
Insert cell
Insert cell
{
// We create a container
const svg = viz.create({ domain: world });

// We choose breaks and colors
const data = world.features.map((d) => d.properties.gdppc);
const choro = viz.tool.choro(data, {
method: "quantile",
nb: 6,
precision: 0,
colors: "PinkYl"
});

// We display countries with colors
svg.path({
data: world,
fill: (d) => choro.colorize(d.properties.gdppc),
tip: "$NAMEen\n$gdppc"
});

// We adda a legend
svg.legend.choro_horizontal({
pos: [400, 380],
...choro,
title: "GDP per Capita"
});

// We render the SVG
return svg.render();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.tool.choro(data, { method: "quantile", nb: nb1, precision: 2 }).breaks
Insert cell
Insert cell
viz.tool.choro(data, { method: "q6", precision: 2 }).breaks
Insert cell
Insert cell
viz.tool.choro(data, { method: "jenks", nb: 6 }).breaks
Insert cell
Insert cell
Insert cell
viz.tool.choro(data, { method: "geometric", nb: nb2, precision: 2 }).breaks
Insert cell
Insert cell
Insert cell
viz.tool.choro(data, { method: "arithmetic", nb: nb3, precision: 2 }).breaks
Insert cell
Insert cell
Insert cell
Insert cell
viz.tool.choro(data, { method: "msd", k: k, middle: middle, precision: 2 })
.breaks
Insert cell
Insert cell
Insert cell
viz.tool.choro(data, { method: "headtail", nb: nb4, precision: 2 }).breaks
Insert cell
Insert cell
viewof nb5 = Inputs.range([2, 15], { label: "nb", step: 1, precision: 1 })
Insert cell
viz.tool.choro(data, { method: "pretty", nb: nb5 }).breaks
Insert cell
Insert cell
Insert cell
viz.tool.choro(data, { method: "nestedmeans", nb: nb6 }).breaks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof reverse = Inputs.toggle({ label: "reverse", value: false })
Insert cell
cols = viz.tool.choro(data, { nb: nbcols, colors: pal, reverse }).colors
Insert cell
Insert cell
Insert cell
Insert cell
choro = viz.tool.choro(data, { method: "quantile", nb: 6, colors: "Reds" })
Insert cell
viz.legend.choro_vertical({
breaks: choro.breaks,
colors: choro.colors,
title: "GDP per capita"
})
Insert cell
viz.legend.choro_horizontal({
breaks: choro.breaks,
colors: choro.colors,
title: "GDP per capita"
})
Insert cell
Insert cell
viz.legend.choro_horizontal({ ...choro, title: "GDP per capita" })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dicopal = require("dicopal@0.5")
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more