Public
Edited
Dec 11
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.path({
data: world,
fill: "#38896F",
tip: "Hello tooltip"
})
Insert cell
Insert cell
viz.path({
data: world,
fill: "#38896F",
tip: "$name"
})
Insert cell
Insert cell
viz.path({
data: world,
fill: "#38896F",
tip: true
})
Insert cell
Insert cell
viz.path({
data: world,
fill: "#38896F",
tip: `This country is $name
It is located in $region
Its population is $pop`
})
Insert cell
Insert cell
viz.path({
data: world,
fill: "#38896F",
tip: (d) =>
`There are ${Math.round(
d.properties.pop / 1000000
)} million inhabitants in ${d.properties.name}`
})
Insert cell
Insert cell
Insert cell
viz.path({
data: world,
fill: "#CCC",
tip: `$name ($ISO3)`,
tipstyle: {
fontSize: 20,
fill: "white",
background: "#38896F",
stroke: "#4a4d4b",
strokeWidth: 3,
fontFamily: "Pacifico",
fontWeight: "normal",
fontStyle: "italic",
textDecoration: "none",
overOpacity: null,
overFillOpacity: 0.4,
overFill: "#38896F",
overStroke: "#38896F",
overStrokeOpacity: 1,
overStrokeWidth: 1.5,
raise: true
}
})
Insert cell
Insert cell
viz.tool.addfonts([
{
fontFamily: "Pacifico",
url: await FileAttachment("Pacifico-Regular.ttf").url()
}
])
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