Public
Edited
Jul 24, 2023
Insert cell
Insert cell
map = {
let map = Plot.plot({
color: "#ddd",
width: 900,
height: 600,
projection: d3.geoMercator().fitExtent(
[
[0, 0],
[900, 600]
],
italy
),
marks: [
Plot.geo(italy, {
fill: "#eee",
stroke: "black"
}),
Plot.dot(cities, {
x: "lng",
y: "lat",
r: 5,
fill: "#cd212a",
stroke: "black",
// We're going to use the title channel to pass the name
// of each city to our tip generator.
title: "city"
})
]
});

// Convert the native tooltips generated by "title" to
// groovy Tippy tooltips.
let dots = d3.select(map).selectAll("circle");
dots
.each(function () {
// Grab the title generated by Plot
let t = d3.select(this).select("title").text();
// Apply tippy to the DOM element to attach groovy tooltips
tippy(this, {
content: tip(t),
theme: "light-border",
allowHTML: true,
interactive: true,
appendTo: () => document.body
});
})
// Remove the native tooltip generated by Plot.
.selectAll("title")
.remove();

return map;
}
Insert cell
// This function accepts a city name and generates the tooltip.
// It should return raw HTML code.
function tip(city) {
let d = cities.filter((c) => c.city == city)[0];
return `<h4>${city}</h4>
<ul>
<li>Population: ${d.population}</li>
<li><a href="https://en.wikipedia.org/wiki/${city}" target="_blank">Wiki Link</a></li>
</ul>
`;
}
Insert cell
Insert cell
tippy_style = html`<div style="display: hidden">
<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}"></div>`
Insert cell
tippy = require("tippy.js@6")
Insert cell
italy = {
let italy = await FileAttachment("italy.json").json();
return topojson.feature(italy, italy.objects.Italy);
}
Insert cell
cities = FileAttachment("it.csv").csv()
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more