Awesome
d3plus-legend
An easy to use javascript chart legend.
Installing
If using npm, npm install d3plus-legend. Otherwise, you can download the latest release from GitHub or load from a CDN.
import modules from "d3plus-legend";
d3plus-legend can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:
<script src="https://cdn.jsdelivr.net/npm/d3plus-legend@1"></script>
<script>
console.log(d3plus);
</script>
Examples
Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. :beers:
API Reference
<a name="ColorScale"></a>
ColorScale <>
This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.
- ColorScale ⇐ <code>BaseClass</code>
- new ColorScale()
- .render([callback]) ↩︎
- .axisConfig([value]) ↩︎
- .align([value]) ↩︎
- .buckets([value]) ↩︎
- .bucketAxis([value]) ↩︎
- .bucketFormat([value]) ↩︎
- .bucketJoiner([value]) ↩︎
- .centered([value]) ↩︎
- .color([value]) ↩︎
- .colorMax([value]) ↩︎
- .colorMid([value]) ↩︎
- .colorMin([value]) ↩︎
- .data([data]) ↩︎
- .domain([value]) ↩︎
- .duration([value]) ↩︎
- .height([value]) ↩︎
- .labelConfig([value]) ↩︎
- .labelMin([value]) ↩︎
- .labelMax([value]) ↩︎
- .legendConfig([value]) ↩︎
- .midpoint([value]) ↩︎
- .orient([value]) ↩︎
- .outerBounds()
- .padding([value]) ↩︎
- .rectConfig([value]) ↩︎
- .scale([value]) ↩︎
- .select([selector]) ↩︎
- .size([value]) ↩︎
- .value([value]) ↩︎
- .width([value]) ↩︎
<a name="new_ColorScale_new" href="#new_ColorScale_new">#</a> new ColorScale()
Creates an SVG scale based on an array of data. If data is specified, immediately draws based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.
<a name="ColorScale.render" href="#ColorScale.render">#</a> ColorScale.render([callback]) <>
Renders the current ColorScale to the page. If a callback is specified, it will be called once the ColorScale is done drawing.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.axisConfig" href="#ColorScale.axisConfig">#</a> ColorScale.axisConfig([value]) <>
The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Axis. An example usage of this method can be seen here.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.align" href="#ColorScale.align">#</a> ColorScale.align([value]) <>
If value is specified, sets the horizontal alignment to the specified value and returns the current class instance. If value is not specified, returns the current horizontal alignment.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.buckets" href="#ColorScale.buckets">#</a> ColorScale.buckets([value]) <>
The number of discrete buckets to create in a bucketed color scale. Will be overridden by any custom Array of colors passed to the color method. Optionally, users can supply an Array of values used to separate buckets, such as [0, 10, 25, 50, 90] for a percentage scale. This value would create 4 buckets, with each value representing the break point between each bucket (so 5 values makes 4 buckets).
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.bucketAxis" href="#ColorScale.bucketAxis">#</a> ColorScale.bucketAxis([value]) <>
Determines whether or not to use an Axis to display bucket scales (both "buckets" and "jenks"). When set to false, bucketed scales will use the Legend class to display squares for each range of data. When set to true, bucketed scales will be displayed on an Axis, similar to "linear" scales.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.bucketFormat" href="#ColorScale.bucketFormat">#</a> ColorScale.bucketFormat([value]) <>
A function for formatting the labels associated to each bucket in a bucket-type scale ("jenks", "quantile", etc). The function is passed four arguments: the start value of the current bucket, it's index in the full Array of buckets, the full Array of buckets, and an Array of every value present in the data used to construct the buckets. Keep in mind that the end value for the bucket is not actually the next bucket in the list, but includes every value up until that next bucket value (less than, but not equal to). By default, d3plus will make the end value slightly less than it's current value, so that it does not overlap with the start label for the next bucket.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.bucketJoiner" href="#ColorScale.bucketJoiner">#</a> ColorScale.bucketJoiner([value]) <>
A function that receives the minimum and maximum values of a bucket, and is expected to return the full label.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.centered" href="#ColorScale.centered">#</a> ColorScale.centered([value]) <>
Determines whether or not to display a midpoint centered Axis. Does not apply to quantile scales.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.color" href="#ColorScale.color">#</a> ColorScale.color([value]) <>
Overrides the default internal logic of colorMin, colorMid, and colorMax to only use just this specified color. If a single color is given as a String, then the scale is interpolated by lightening that color. Otherwise, the function expects an Array of color values to be used in order for the scale.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.colorMax" href="#ColorScale.colorMax">#</a> ColorScale.colorMax([value]) <>
Defines the color to be used for numbers greater than the value of the midpoint on the scale (defaults to 0). Colors in between this value and the value of colorMid will be interpolated, unless a custom Array of colors has been specified using the color method.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.colorMid" href="#ColorScale.colorMid">#</a> ColorScale.colorMid([value]) <>
Defines the color to be used for the midpoint of a diverging scale, based on the current value of the midpoint method (defaults to 0). Colors in between this value and the values of colorMin and colorMax will be interpolated, unless a custom Array of colors has been specified using the color method.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.colorMin" href="#ColorScale.colorMin">#</a> ColorScale.colorMin([value]) <>
Defines the color to be used for numbers less than the value of the midpoint on the scale (defaults to 0). Colors in between this value and the value of colorMid will be interpolated, unless a custom Array of colors has been specified using the color method.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.data" href="#ColorScale.data">#</a> ColorScale.data([data]) <>
If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape key will be drawn for each object in the array.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.domain" href="#ColorScale.domain">#</a> ColorScale.domain([value]) <>
In a linear scale, this Array of 2 values defines the min and max values used in the color scale. Any values outside of this range will be mapped to the nearest color value.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.duration" href="#ColorScale.duration">#</a> ColorScale.duration([value]) <>
If value is specified, sets the transition duration of the ColorScale and returns the current class instance. If value is not specified, returns the current duration.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.height" href="#ColorScale.height">#</a> ColorScale.height([value]) <>
If value is specified, sets the overall height of the ColorScale and returns the current class instance. If value is not specified, returns the current height value.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.labelConfig" href="#ColorScale.labelConfig">#</a> ColorScale.labelConfig([value]) <>
A pass-through for the TextBox class used to style the labelMin and labelMax text.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.labelMin" href="#ColorScale.labelMin">#</a> ColorScale.labelMin([value]) <>
Defines a text label to be displayed off of the end of the minimum point in the scale (currently only available in horizontal orientation).
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.labelMax" href="#ColorScale.labelMax">#</a> ColorScale.labelMax([value]) <>
Defines a text label to be displayed off of the end of the maximum point in the scale (currently only available in horizontal orientation).
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.legendConfig" href="#ColorScale.legendConfig">#</a> ColorScale.legendConfig([value]) <>
The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Axis. An example usage of this method can be seen here.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.midpoint" href="#ColorScale.midpoint">#</a> ColorScale.midpoint([value]) <>
The number value to be used as the anchor for colorMid, and defines the center point of the diverging color scale.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.orient" href="#ColorScale.orient">#</a> ColorScale.orient([value]) <>
Sets the flow of the items inside the ColorScale. If no value is passed, the current flow will be returned.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.outerBounds" href="#ColorScale.outerBounds">#</a> ColorScale.outerBounds() <>
If called after the elements have been drawn to DOM, will returns the outer bounds of the ColorScale content.
This is a static method of <code>ColorScale</code>.
{"width": 180, "height": 24, "x": 10, "y": 20}
<a name="ColorScale.padding" href="#ColorScale.padding">#</a> ColorScale.padding([value]) <>
If value is specified, sets the padding between each key to the specified number and returns the current class instance. If value is not specified, returns the current padding value.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.rectConfig" href="#ColorScale.rectConfig">#</a> ColorScale.rectConfig([value]) <>
The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Rect. An example usage of this method can be seen here.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.scale" href="#ColorScale.scale">#</a> ColorScale.scale([value]) <>
If value is specified, sets the scale of the ColorScale and returns the current class instance. If value is not specified, returns the current scale value.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.select" href="#ColorScale.select">#</a> ColorScale.select([selector]) <>
If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.size" href="#ColorScale.size">#</a> ColorScale.size([value]) <>
The height of horizontal color scales, and width when positioned vertical.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="ColorScale.value" href="#ColorScale.value">#</a> ColorScale.value([value]) <>
If value is specified, sets the value accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current value accessor.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
function value(d) {
return d.value;
}
<a name="ColorScale.width" href="#ColorScale.width">#</a> ColorScale.width([value]) <>
If value is specified, sets the overall width of the ColorScale and returns the current class instance. If value is not specified, returns the current width value.
This is a static method of <code>ColorScale</code>, and is chainable with other methods of this Class.
<a name="Legend"></a>
Legend <>
This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.
- Legend ⇐ <code>BaseClass</code>
- new Legend()
- .render([callback]) ↩︎
- .active([value]) ↩︎
- .align([value]) ↩︎
- .data([data]) ↩︎
- .direction([value]) ↩︎
- .duration([value]) ↩︎
- .height([value]) ↩︎
- .hover([value]) ↩︎
- .id([value]) ↩︎
- .label([value]) ↩︎
- .outerBounds()
- .padding([value]) ↩︎
- .select([selector]) ↩︎
- .shape([value]) ↩︎
- .shapeConfig([config]) ↩︎
- .title([value]) ↩︎
- .titleConfig([value]) ↩︎
- .verticalAlign([value]) ↩︎
- .width([value]) ↩︎
<a name="new_Legend_new" href="#new_Legend_new">#</a> new Legend()
Creates an SVG scale based on an array of data. If data is specified, immediately draws based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.
<a name="Legend.render" href="#Legend.render">#</a> Legend.render([callback]) <>
Renders the current Legend to the page. If a callback is specified, it will be called once the legend is done drawing.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.active" href="#Legend.active">#</a> Legend.active([value]) <>
If value is specified, sets the active method for all shapes to the specified function and returns the current class instance. If value is not specified, returns the current active method.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.align" href="#Legend.align">#</a> Legend.align([value]) <>
If value is specified, sets the horizontal alignment to the specified value and returns the current class instance. If value is not specified, returns the current horizontal alignment.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.data" href="#Legend.data">#</a> Legend.data([data]) <>
If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape key will be drawn for each object in the array.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.direction" href="#Legend.direction">#</a> Legend.direction([value]) <>
Sets the flow of the items inside the legend. If no value is passed, the current flow will be returned.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.duration" href="#Legend.duration">#</a> Legend.duration([value]) <>
If value is specified, sets the transition duration of the legend and returns the current class instance. If value is not specified, returns the current duration.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.height" href="#Legend.height">#</a> Legend.height([value]) <>
If value is specified, sets the overall height of the legend and returns the current class instance. If value is not specified, returns the current height value.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.hover" href="#Legend.hover">#</a> Legend.hover([value]) <>
If value is specified, sets the hover method for all shapes to the specified function and returns the current class instance. If value is not specified, returns the current hover method.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.id" href="#Legend.id">#</a> Legend.id([value]) <>
If value is specified, sets the id accessor to the specified function and returns the current class instance. If value is not specified, returns the current id accessor.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
function value(d) {
return d.id;
}
<a name="Legend.label" href="#Legend.label">#</a> Legend.label([value]) <>
If value is specified, sets the label accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current label accessor, which is the id accessor by default.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.outerBounds" href="#Legend.outerBounds">#</a> Legend.outerBounds() <>
If called after the elements have been drawn to DOM, will returns the outer bounds of the legend content.
This is a static method of <code>Legend</code>.
{"width": 180, "height": 24, "x": 10, "y": 20}
<a name="Legend.padding" href="#Legend.padding">#</a> Legend.padding([value]) <>
If value is specified, sets the padding between each key to the specified number and returns the current class instance. If value is not specified, returns the current padding value.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.select" href="#Legend.select">#</a> Legend.select([selector]) <>
If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.shape" href="#Legend.shape">#</a> Legend.shape([value]) <>
If value is specified, sets the shape accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current shape accessor.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.shapeConfig" href="#Legend.shapeConfig">#</a> Legend.shapeConfig([config]) <>
If config is specified, sets the methods that correspond to the key/value pairs for each shape and returns the current class instance. If config is not specified, returns the current shape configuration.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.title" href="#Legend.title">#</a> Legend.title([value]) <>
If value is specified, sets the title of the legend and returns the current class instance. If value is not specified, returns the current title.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.titleConfig" href="#Legend.titleConfig">#</a> Legend.titleConfig([value]) <>
If value is specified, sets the title configuration of the legend and returns the current class instance. If value is not specified, returns the current title configuration.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.verticalAlign" href="#Legend.verticalAlign">#</a> Legend.verticalAlign([value]) <>
If value is specified, sets the vertical alignment to the specified value and returns the current class instance. If value is not specified, returns the current vertical alignment.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.
<a name="Legend.width" href="#Legend.width">#</a> Legend.width([value]) <>
If value is specified, sets the overall width of the legend and returns the current class instance. If value is not specified, returns the current width value.
This is a static method of <code>Legend</code>, and is chainable with other methods of this Class.