Public
Edited
Mar 21, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.tile()
Insert cell
Insert cell
viz.plot({ type: "tile" })
Insert cell
Insert cell
{
let svg = viz.create({
projection: "mercator",
domain: aus,
zoomable: true,
margin: 30
});

svg.tile();
svg.path({ data: aus_roads, stroke: "#38896F", strokeWidth: 1.5 });
svg.path({ data: aus_ports, stroke: "#38896F", fill: "white" });
return svg.render();
}
Insert cell
Insert cell
Insert cell
(x, y, z) => `https://something/\${z}/\${x}/\${y}.png`
Insert cell
Insert cell
Insert cell
{
let svg = viz.create({
projection: d3.geoMercator(),
domain: aus,
margin: 30,
zoomable: true
});

svg.tile({ url: "worldimagery" });
return svg.render();
}
Insert cell
Insert cell
Insert cell
{
let svg = viz.create({
projection: d3.geoMercator(),
domain: aus,
zoomable: true
});

svg.tile({
url: "worldimagery",
zoomDelta: 1,
clipPath: svg.effect.clipPath({ datum: aus })
});
return svg.render();
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more