I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Aug 1, 2023
4 forks
26 stars
map = {
let map = Plot.plot({
color: "#ddd",
width: 600,
height: 400,
projection: d3.geoMercator().fitExtent(
[
[0, 0],
[600, 400]
],
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;
}
// 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>
`;
}
tippy_style = html`<div style="display: hidden">
<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}"></div>`
tippy = require("tippy.js@6")
italy = {
let italy = await FileAttachment("italy.json").json();
return topojson.feature(italy, italy.objects.Italy);
}
cities = FileAttachment("it.csv").csv()
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.
