Public
Edited
Jun 1, 2023
1 fork
vanillaSVG = svg`<svg width="400" height="400"><svg>`
plotSVG = Plot.plot({
height: 400,
width: 400
})
fixSvg = Plot.plot({
height: 400,
width: 400,
margin: 0
})
{
doAnnotations(vanillaSVG);
doAnnotations(plotSVG);
doAnnotations(fixSvg);
}
function doAnnotations(targetSVG) {
const annotations = [
{
note: {
label: "Longer text to show text wrapping",
title: "Annotations are fun to watch and see and learn :)"
},
x: 50,
y: 50,
dy: 150,
dx: 150
}
];
const makeAnnotations = d3_annotation.annotation().annotations(annotations);
const svg = d3.select(targetSVG).append("svg");
svg.attr("style", "font: initial;text-anchor: initial;");
svg.call(makeAnnotations);
}
d3_annotation = require("https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.0/d3-annotation.min.js")
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.
