Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
data = [
{ name: "a", value: 10, link: "https://google.com" },
{ name: "b", value: 1, link: "https://google.com" }
]
addLinks(
Plot.plot({
marks: [Plot.barX(data, { x: "value", y: "name", title: "link" })]
})
)
// Add hyperlinks to visual elements that have the title in the <a> tag
addLinks = (chart) => {
// Workaround if it's in a figure
const type = d3.select(chart).node().tagName;
let wrapper =
type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart);
// Workaround if there's a legend....
const svgs = d3.select(chart).selectAll("svg");
if (svgs.size() > 1) wrapper = d3.select([...svgs].pop());
wrapper.selectAll("title").each(function () {
// Get the text out of the title, set it as an attribute on the parent, and remove it
const title = d3.select(this); // title element that we want to remove
const parent = d3.select(this.parentNode); // visual mark on the screen
const grandParent = d3.select(this.parentNode.parentNode);
const a = grandParent
.append("a")
.attr("href", title.text())
.attr("target", "_blank");
var removed = parent.remove();
a.append(function () {
return removed.node();
});
});
return chart;
}
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.
