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 🖥️
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
let svg = viz.create({ domain: aus, width: 600, margin: 20 });
// Filter definition
svg.effect.blur({ id: "blur", stdDeviation: stdDeviation });
// Layer display with filter
svg.path({ datum: aus, fill: "#38896F", filter: "url(#blur)" });
// Or directly
// svg.path({ datum: aus, fill: "#38896F", filter: svg.defs.blur({ stdDeviation: stdDeviation }) });
return svg.render();
}
{
let svg = viz.create({ domain: aus, width: 600, margin: 20 });
// Shadow Effect
svg.path({
datum: aus,
fill: "black",
fillOpacity: 0.6,
filter: svg.effect.shadow({
stdDeviation: stdDeviation2,
fill: "black",
fillOpacity: 0.7,
dx: dx,
dy: dy
})
});
// Australia
svg.path({ datum: aus, fill: "#38896F" });
return svg.render();
}
{
let svg = viz.create({ domain: aus, width: 600, margin: 20 });
svg.path({
datum: aus,
fill: svg.effect.radialGradient({
color1,
color2,
offset1,
offset2,
fx,
fy
})
});
return svg.render();
}
{
let svg = viz.create({
domain: aus,
width: 600,
margin: 20,
projection: "mercator"
});
// clip definition
const ausclip = svg.effect.clipPath({ datum: aus });
// Clipped tiles
svg.tile({ url: "worldStreet", clipPath: ausclip });
// Outline of australia
svg.path({ data: aus, fill: "none", stroke: "#38896F", strokeWidth: 1 });
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.
