Support for d3.scaleThreshold

[curran]

I tried making a color legend using a d3.scaleThreshold, and here's what the legend looks like:

Here's the relevant bit of code for setting up the scale and the legend:

var colorScale = d3.scaleThreshold()
  .domain([ 0, 1000, 2500, 5000, 10000 ])
  .range(["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"]);
var legend = d3.legendColor()
  .scale(colorScale);

A nice solution to this would:

• replace "1000.0 to NaN" with "Greater than 1000.0"
• replace "NaN to 0" with "Less than 0"
• provide options for omitting the "Less than 0" or "Greater than 1000.0" legend boxes.

[susielu]

Curran,

Thanks for submitting this. In the latest version 2.13.0 I have added the ability for you to pass a function in with the labels parameter and created a helper function to deal with threshold labels but you could create any custom function you want.

Here is an example: http://d3-legend.susielu.com/#color-threshold Documentation on the new function has been updated on the labels section of each legend type:

labels([string] or function(options)) Passing a string: Sets the legend labels to the array of strings passed to the legend. If the array is not the same length as the array the legend calculates, it merges the values and gives the calculated labels for the remaining items.

Passing a function: This function is called for each generated label and gives you the options:

• i: current index
• genLength: total length of generated labels
• generatedLabels: array of generated labels
• domain: array from input scale
• range: array from input scale

Hope this helps, Susie

[curran]

Wow, this is fantastic! Thank you so much for your work on this.