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.plot({
type: "choro",
data: world,
var: "gdppc",
legend: true
})
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)"
})
{
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();
}
{
// 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();
}
viz.tool.choro(data, { method: "quantile", nb: nb1, precision: 2 }).breaks
viz.tool.choro(data, { method: "q6", precision: 2 }).breaks
viz.tool.choro(data, { method: "jenks", nb: 6 }).breaks
viz.tool.choro(data, { method: "geometric", nb: nb2, precision: 2 }).breaks
viz.tool.choro(data, { method: "arithmetic", nb: nb3, precision: 2 }).breaks
viz.tool.choro(data, { method: "msd", k: k, middle: middle, precision: 2 })
.breaks
viz.tool.choro(data, { method: "headtail", nb: nb4, precision: 2 }).breaks
viewof nb5 = Inputs.range([2, 15], { label: "nb", step: 1, precision: 1 })
viz.tool.choro(data, { method: "pretty", nb: nb5 }).breaks
viz.tool.choro(data, { method: "nestedmeans", nb: nb6 }).breaks
viewof reverse = Inputs.toggle({ label: "reverse", value: false })
cols = viz.tool.choro(data, { nb: nbcols, colors: pal, reverse }).colors
choro = viz.tool.choro(data, { method: "quantile", nb: 6, colors: "Reds" })
viz.legend.choro_vertical({
breaks: choro.breaks,
colors: choro.colors,
title: "GDP per capita"
})
viz.legend.choro_horizontal({
breaks: choro.breaks,
colors: choro.colors,
title: "GDP per capita"
})
viz.legend.choro_horizontal({ ...choro, title: "GDP per capita" })
dicopal = require("dicopal@0.5")
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.
