Dragging labels/annotation

Community Help
1

Here is a simple notebook playing around with manual placement of labels/annotations:


This seems a little clunky, especially the copy and pasting (though d3-svg-annotation requires the same, as I recall). I welcome feedback or pointers to other notebooks trying to do the same thing. I often need to label/annotate charts and maps, and would love to avoid having to export and open in Illustrator just to move some labels around.

By the ways, thanks @Fil for this notebook and many others:

-Evan

2 Likes
2

With regards to other notebooks, this one comes to mind though perhaps you’ve already seen it:

I’m not sure if I understood precisely what workflow you’re after, but here’s a fork with a button that updates the Map object with the current coordinates when you click it:

You can drag and then edit the svg cell without resetting the coordinates in the Map and then drag again, etc. (just don’t rerun the Map cell or refresh the page until you’ve done the copy+paste thing)

Edit: in fact, if you want to have the Map update automatically without having to click the button, you can just put this function into its own cell:

    draggedLocations.forEach(
      (val, key) => draggedLocations.set(key, chart.find(([chartKey, chartVal]) => chartKey === key)[1])
    );
1 Like