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.
scatter_plot_with_image_tooltips = {
let plot = Plot.plot({
marks: [
Plot.dot(favorability, {
fill: "black",
x: "First Inauguration Date",
y: (d) => metric.value(d) / 100,
title: (d, i) => i
})
]
});
d3.select(plot)
.selectAll("circle")
.nodes()
.forEach(function (c) {
let idx = parseInt(d3.select(c).select("title").text());
let p = favorability[idx];
let content = `<div><h2>${p.Name}</h2><img src="${p["Portrait URL"]}"></div>`;
console.log(content);
tippy(c, {
content: content,
theme: "light",
allowHTML: true
});
d3.select(c).select("title").remove();
});
return plot;
}
tippy = require("tippy.js@6")
tippy_style = html`<div style="display: none"><link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light.css`
)}"></div>`
favorability = FileAttachment("us-president-favorability.csv").csv({
typed: true
})
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.
