Automatic labeling v1

Please, open in the new window to view the full example

This is the first version of a d3 plugin for automatic labeling. I called it labeling.

Each overlapped label rotates until no more overlaps. If one label reach the last position there is three options:

• scale( factor ): the label scales factor times and run again the algorithm. scale can be called multiple times with different parameters.
• legend(): transforms the label into a number and builds an internally legend which can be returned with the getLegend() function.
• remove(): the label is removed.

The basic functioning is shown here:

d3.labeling()
  .select('.label')
  .align()

select can be a d3’s valid string selector or a function which returns a d3 selection:

d3.labeling()
  .select(function() { 
     return d3.selectAll('.place-label')
       .sort(function(a,b) { 
           return d3.geo.area(b.geometry) - d3.geo.area(a.geometry); 
       })
  })
  .align();

In the example we have:

d3.labeling()
  .select('.place-label')        // className of the labels
  .legend()                // builds a legend
  .scale(.8)            // if no fit, scales down 0.8 times the label (or number)
  .scale(.5)            // idem but scales 0.5 times    
  .remove()                // else removes
  .align();                  // start