Public
Edited
Dec 5
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.header()
Insert cell
viz.footer()
Insert cell
Insert cell
viz.header({
text: "This is my\npretty title",
background_fill: "#38896F",
fill: "white",
textAnchor: "start",
dx: 20,
margin: 20
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.outline()
Insert cell
viz.graticule({ step: 30, strokeDasharray: 5, stroke: "#38896F" })
Insert cell
Insert cell
Insert cell
viz.rhumbs({ nb: 36, strokeDasharray: 5, stroke: "#38896F", strokeWidth: 2 })
Insert cell
Insert cell
Insert cell
{
let svg = viz.create({
domain: aus,
projection: "mercator",
width: 800,
background: "#c2e6f2",
margin: 20
});
svg.path({ datum: aus, fill: "white", fillOpacity: 0.3 });
svg.scalebar({
distance: 500,
units: "mi",
tickSize: 5,
pos: [20, svg.height - 30]
});
svg.north({ scale: 2, pos: [50, 50] });
return svg.render();
}
Insert cell
Insert cell
Insert cell
viz.tool.addfonts([
{
fontFamily: "Slackey",
url: await FileAttachment("Slackey-Regular.ttf").url()
}
])
Insert cell
Insert cell
{
let svg = viz.create({
domain: aus,
width: 800,
margin: 20,
projection: "mercator",
fontFamily: "Slackey"
});
svg.outline();
svg.path({ datum: aus, fill: "#38896F" });
svg.path({ datum: aus_roads, stroke: "white", strokeOpacity: 0.2 });
svg.scalebar();
svg.north({ pos: [75, 125], scale: 2, fill: "white" });
svg.header({
text: "Hello Australia",
background_fill: "#38896F",
margin: 10,
fill: "white",
fontSize: 50
});
svg.footer({
text: "Made with Geoviz"
});
svg.graticule({ stroke: "white", strokeWidth: 2, strokeDasharray: 10 });
svg.graticule({
stroke: "black",
strokeOpacity: 0.2,
strokeWidth: 2,
strokeDasharray: 10,

transform: "translate(2,2)"
});
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