# placement of diagram labels **URL:** \ **Category:** Help\ **Created:** [July 26, 2019, 6:25pm UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207 "2019-07-26T18:25:02Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\ **Post date:** [July 26, 2019, 6:25pm UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/1 "2019-07-26T18:25:02Z")
One of the things holding me back most in making interactive diagrams is labeling points, curves, line segments, filled shapes, etc. (with labels consisting of either words or phrases, letters/symbols in the font used for mathematics in the text, mathematical expressions, etc. depending on context). I’m probably perfectionistically overthinking it and should just try to get the simplest possible thing working and not worry whether it looks right in every possible configuration as a reader drags stuff around. But it would be great to use some kind of automatic label placement tool. I’ve tried looking at the research literature about label placement a few times in the past, but it’s quite extensive and a bit intimidating. I haven’t seen any clear overview anywhere of what the trade-offs are involved with different techniques (e.g. speed, quality, flexibility, …). Does anyone have any recommendation of places to look? Favorite techniques? Existing Javascript implementations? … I’ve noticed that like myself e.g. @mbostock often makes interactive or animated diagrams of geometric algorithms without labels – is that a stylistic preference or is it just the most convenient choice when there’s no drop-in label library? Maybe folks who have worked on cartography have some ideas? * * * If there aren’t good existing Javascript solutions I will probably spend at least a bit of effort on this at some point in the next year, as I need labeled diagrams for many of my projects and ideas. Maybe I’ll just resort to punting on doing anything fancy and just let the labels overlap if users drag labeled elements to an inconvenient configuration, we’ll see. ---
**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\ **Post date:** [July 26, 2019, 7:36pm UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/2 "2019-07-26T19:36:24Z")
Here’s a notebook that does something similar: > **[Directly labelling lines](https://observablehq.com/@harrystevens/directly-labelling-lines)** > > An Observable notebook by Harry Stevens. ---
**Author:** ![yurivish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/yurivish/32/198_2.png) [@yurivish](https://talk.observablehq.com/u/yurivish)\ **Post date:** [July 26, 2019, 8:00pm UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/3 "2019-07-26T20:00:50Z")
It’s a hard problem in general, but there are a few heuristic approaches that sometimes work well in practice. One is using a force layout for decollision with a bounding box constraint, such as the one implemented [here](https://github.com/emeeks/d3-bboxCollide). Another approach is to label some of the points using a [Voronoi diagram](https://observablehq.com/@mbostock/d3-voronoi-labels) like in the notebook in the reply above. [Automatic label placement](https://en.wikipedia.org/wiki/Automatic_label_placement) is a relevant article on Wikipedia. I’d be very curious to learn what other approaches people have used successfully. ---
**Author:** ![rreusser](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rreusser/32/1976_2.png) [@rreusser](https://talk.observablehq.com/u/rreusser)\ **Post date:** [July 27, 2019, 1:10am UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/4 "2019-07-27T01:10:52Z")
My coworker used a greedy approach implemented [here](https://github.com/plotly/plotly.js/blob/2d205e752a0e36da5e1e693c7b6cef3f269b04d7/src/traces/contour/plot.js#L457-L549) for placing labels on a contour plot. I was stuck on how to do it “right”, but he just picked a cost function out of the sky and then did a bit of bisection searching to place labels one after another. It’s not sophisticated but allowed balancing a number of things (proximity to edges, rotation from horizontal, proximity to other labels). The main downside is preventing things from jumping around discontinuously when things are dragged, though if the function actually has a minimum and bisection finds it, maybe this would be manageable. Nevertheless, it seemed like a good example to me of a fairly ugly solution that worked perfectly well in practice. _edit_: oh, also, this was a 1d problem since the labels were along the contours. that’s not so simple in 2d, though maybe a black box 2d minimizer and an arbitrary cost function could still work. the other thing we had going for us is that we didn’t have to place many labels so that the minimization didn’t have to be blazing fast. ---
**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\ **Post date:** [July 27, 2019, 1:38am UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/5 "2019-07-27T01:38:03Z")
I don’t care too much about having things jump around occasionally, as long as they don’t glitch out and jump back and forth repeatedly. At least some kind of real-time result (in response to dragged points) would be good, but if an algorithm starts with an instant guess based on the previous state and takes a little while to converge to its final optimized set of positions after elements are dragged around that’s okay with me. ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [July 27, 2019, 4:19pm UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/6 "2019-07-27T16:19:43Z")
I’ve been experimenting as well on this topic: - [https://observablehq.com/@fil/automated-label-placement-countries](https://observablehq.com/@fil/automated-label-placement-countries) - [https://observablehq.com/@fil/video-contour-labels](https://observablehq.com/@fil/video-contour-labels) - [https://observablehq.com/@fil/contour-labels-canvas](https://observablehq.com/@fil/contour-labels-canvas) - [https://bl.ocks.org/Fil/cf2c19710832bc77804e4ca3ca18ab8b](https://bl.ocks.org/Fil/cf2c19710832bc77804e4ca3ca18ab8b) ---
**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\ **Post date:** [July 27, 2019, 7:11pm UTC](https://talk.observablehq.com/t/placement-of-diagram-labels/2207/7 "2019-07-27T19:11:15Z")
Dead links abound for research from the 90s. Here’s a site with a bunch of hosted relevant papers, [https://web.cs.du.edu/~snarayan/sada/maplabel/classes/ref.shtml](https://web.cs.du.edu/~snarayan/sada/maplabel/classes/ref.shtml) e.g. (a better copy of one of those papers) [http://www.eecs.harvard.edu/shieber/Biblio/Papers/tog-final.pdf](http://www.eecs.harvard.edu/shieber/Biblio/Papers/tog-final.pdf) which found that simulated annealing worked best of the several algorithms they implemented. Another meta-reference [https://i11www.iti.kit.edu/~awolff/map-labeling/bibliography/sites.html](https://i11www.iti.kit.edu/~awolff/map-labeling/bibliography/sites.html) and a long bibliography [https://i11www.iti.kit.edu/~awolff/map-labeling/bibliography/maplab\_date.html](https://i11www.iti.kit.edu/~awolff/map-labeling/bibliography/maplab_date.html) [https://dash.harvard.edu/handle/1/2051370](https://dash.harvard.edu/handle/1/2051370) [http://web.archive.org/web/20110726091656/https://www.ads.tuwien.ac.at/research/labeling/](http://web.archive.org/web/20110726091656/https://www.ads.tuwien.ac.at/research/labeling/) [http://web.archive.org/web/20050308090004/http://wwwisg.cs.uni-magdeburg.de/~hartmann/Projects/labelling.html](http://web.archive.org/web/20050308090004/http://wwwisg.cs.uni-magdeburg.de/~hartmann/Projects/labelling.html) [http://www.dissertations.wsu.edu/Thesis/Fall2007/k\_mote\_111307.pdf](http://www.dissertations.wsu.edu/Thesis/Fall2007/k_mote_111307.pdf) [http://innovis.cpsc.ucalgary.ca/innovis/uploads/Courses/InformationVisualizationDetails2009/Luboschik2008.pdf](http://innovis.cpsc.ucalgary.ca/innovis/uploads/Courses/InformationVisualizationDetails2009/Luboschik2008.pdf) [http://www.in.tum.de/fileadmin/w00bws/cg/Research/Publications/2012/Force\_Labeling/2012\_Vaaraniemi\_Temporally\_Coherent\_Real-Time\_Labeling\_of\_Dynamic\_Scenes.pdf](http://www.in.tum.de/fileadmin/w00bws/cg/Research/Publications/2012/Force_Labeling/2012_Vaaraniemi_Temporally_Coherent_Real-Time_Labeling_of_Dynamic_Scenes.pdf) [http://www.shixialiu.com/publications/Clutter/paper.pdf](http://www.shixialiu.com/publications/Clutter/paper.pdf) [http://www.szoraster.com/Cartography/PracticalExperience.htm](http://www.szoraster.com/Cartography/PracticalExperience.htm) [https://web.cs.du.edu/~wbae/wan/research/maplabel/classes/docs/linear.pdf](https://web.cs.du.edu/~wbae/wan/research/maplabel/classes/docs/linear.pdf)