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.tool.addfonts([
{
fontFamily: "Varela Round",
url: await FileAttachment("VarelaRound-Regular.ttf").url()
}
]);
let svg = viz.create({
projection: d3.geoMercator(),
domain: paris,
margin: [55, 20, 25, 20],
fontFamily: "Varela Round"
});
viz.tile(svg, {
url: (x, y, z) =>
`https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${z}/${y}/${x}.png`,
opacity: 0.5,
increasetilesize: 0.3
});
viz.path(svg, {
datum: paris,
fill: "black",
fillOpacity: 0.7,
stroke: "none",
filter: svg.effect.blur({ stdDeviation: 3 }),
transform: "translate(4,4)"
});
viz.effect.clipPath(svg, { datum: paris, id: "clipparis" });
viz.tile(svg, {
url: (x, y, z) =>
`https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${z}/${y}/${x}.png`,
clipPath: svg.effect.clipPath({ datum: paris })
});
let dots = viz.tool.dodge(ChargingPoints, {
projection: svg.projection,
r: 2,
gap: 1
});
viz.circle(svg, {
coords: "svg",
data: dots,
r: 2,
fill: "yellow",
stroke: "none",
strokeWidth: 0
});
viz.scalebar(svg, { pos: [20, svg.height - 40] });
viz.header(svg, {
text: "Charging points for electric vehicles in Paris"
});
viz.footer(svg, {
text: "Nicolas LAMBERT, 2023 - Sources: arcgisonline.com, 2023 & Paris Data, 2023",
textAnchor: "end"
});
return svg.render();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
