Skip to main content
SimilarExport ZIP
100%

d3.legend example (d3 v4)

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jul 8, 2018
Created on Jul 8, 2018

This example demonstrates a reusable legend component for D3 v4 charts, built as a drop-in `.call(d3.legend)` on a `g` element. The legend scans the visualization for elements with a `data-legend` attribute, using those titles as unique entries (deduplicated via a set) and deriving colors from each item's fill or stroke (or an explicit `data-legend-color`). Item order is determined by the top of each element’s bounding box, overridable with `data-legend-pos`. The box padding defaults to 5 and adjusts via `data-style-padding`, while sizing uses `em` units based on font size. The example also demonstrates dynamic updates: after one second, the font size is changed and `d3.legend` is called again to show how the legend adapts.

AI-generated description

d3.legend

d3.legend is a quick hack to add a legend to a d3 chart. Simply add a g and .call(d3.legend). Any elements that have a title set in the "data-legend" attribute will be included when d3.legend is called. Each title will appear only once (even when multiple items define the same data-legend) as the process uses a set based on a existing names, not an array of all items.

Color

By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Color can be explicitly defined by attribute "data-legend-color"

Order

The order of items in the legend will be sorted using the top of the bounding box for each included item. The order can be explicitly defined by attribute "data-legend-pos"

Padding

Padding will be determined by attribute "data-style-padding" on the legend element. Defaults to 5.

Size

Size of the box is determined by font size, as items are placed using "em" and the frame around the items is based on the bounding box.

This Example

This example takes an existing Gist and adds a legend by defining data-legend for each series and calling d3.legend on a "g" element. To show the font-adjustment I change font-size after one second and call d3.legend again.

d3.legend

d3.legend is a quick hack to add a legend to a d3.graph. Simply add a g and .call(d3.legend). Any elements that has a title set in the "data-legend" attribute set will be included, when d3.legend is called. Each title will appear only once as the process uses a set based on a existing names, not an array of all items.

Color

By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Color can be explicitly defined by attribute "data-legend-color"

Order

The order of items in the legend will be sorted using the top of the bounding box for each included item. The order can be explicitly defined by attribute "data-legend-pos"

Padding

Padding will be determined by attribute "data-style-padding" on the legend element. Defaults to 5.

Size

Size of the box is determined by font size, as items are placed using "em" and the frame around the items is based on the bounding box.

This Example

This example takes an existing Gist and adds a legend by defining data-legend for each series:

 .attr("data-legend",function(d) { return d.name})

Adding the legend is as simple as:

legend = svg.append("g")
  .attr("class","legend")
  .attr("transform","translate(50,30)")
  .style("font-size","12px")
  .call(d3.legend)

To show the font-adjustment I change font-size after one second and call d3.legend again.

##Comments on the original gist This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/louking/'>louking</a>'s block: <a href='http://bl.ocks.org/louking/6491d18c9cef56011971be76a85cde8e'>d3.legend example (d3 v4)</a>

forked from <a href='http://bl.ocks.org/GerardoFurtado/'>GerardoFurtado</a>'s block: <a href='http://bl.ocks.org/GerardoFurtado/93703aa76f8fe0d33c6149cc1a586d24'>d3.legend example (d3 v4)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3.legend example (d3 v4)

This example demonstrates a reusable legend component for D3 v4, added to a multi-series line chart of daily average temperatures for New York, San Francisco, and Austin. The legend is generated by calling `d3.legend` on a `g` element, automatically collecting items from any marks with a `data-legend` attribute, and matching colors from their fill or stroke. The legend supports explicit control over item order and color via `data-legend-pos` and `data-legend-color`, with padding and size configurable through `data-style-padding` and font-size. The visualization highlights how the legend responds to font-size changes, as the author re-invokes `d3.legend` after one second to demonstrate dynamic re-layout. Rendered in SVG using d3 v4, the example builds on a line chart of daily temperatures for New York, San Francisco, and Austin, loaded from a TSV file, with the legend drawn inside an SVG `<g>` element.

GGerardoFurtado
89% match
Loading thumbnail…

D3 Color and Size Legends

This example demonstrates how to build custom legend components for D3 visualizations using SVG. It shows two distinct legends: a color legend using an ordinal scale with categorical fruit labels, and a size legend using a square root scale with filtered ticks. The reusable legend functions, `colorLegend` and `sizeLegend`, are invoked via the `.call()` method and handle enter/merge/exit selections. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3 v7's selection methods to update and render the legend elements.

Ccaedcagt76@gmail.com
78% match
Loading thumbnail…

Color Legend

This example demonstrates two reusable D3 legend components positioned on a single SVG: a color legend using an ordinal color scale for categorical items like fruits, and a size legend built from a square-root scale that maps numeric values to circle radii. The color legend renders colored circles with labels, while the size legend filters out zero values and reverses tick order. Both use enter/merge/exit selections via `selection.selectAll` and `.data` to update groups, with circle and text elements positioned through transform attributes.

Aanouckstbr@gmail.com
77% match
Loading thumbnail…

d3 | reusable circle legend

This example shows a reusable SVG circle legend that maps numeric values to circle sizes using a square-root scale, with dashed guide lines and text labels for each value. Built with D3 v4, the `circleLegend` function accepts configuration options like domain, range, values, colors, and text padding, then renders circles, lines, and labels centered within a specified width and height. The legend is useful for bubble charts, allowing users to customize the suffix, text color, and circle stroke.

EEndNight95
77% match
Loading thumbnail…

legend

This example displays a four-category ordinal legend for values from “Insignificant” to “High,” rendered as colored squares with adjacent text labels inside an SVG. It uses a custom `d3.legend()` function built with `d3.scaleOrdinal` to map domain values to color ranges, and appends the legend to a blank SVG canvas via a D3 selection. The legend’s position and colors are configurable through `.translate()` and `.colors()`, and a callback logs “Done!” after rendering. The code includes a separate `d3.legend.js` file and relies on D3 v4.

MMTClass
77% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5 and rendered as SVG. A color legend uses `scaleOrdinal` to map fruit categories to distinct circle fills, while a size legend employs `scaleSqrt` with `ticks()` to encode numeric values as varying circle radii. Both legends bind data to grouped `<g>` elements, applying enter/merge/exit selections for dynamic updates. The code defines reusable functions `colorLegend` and `sizeLegend`, called via `.call()`, with text labels positioned using `textOffset`.

AAndreas Loew
77% match
Loading thumbnail…

Legend experimenting

This example demonstrates how to build reusable color and size legends for D3 visualizations. It shows a color legend using d3.scaleOrdinal with fruit categories mapped to distinct colors, alongside a size legend using d3.scaleSqrt. The legends are rendered as SVG groups, with the color legend drawing rectangles and the size legend drawing circles. The code uses D3 v5’s selection.join pattern, custom legend components exported from separate modules, and explicit spacing and offset parameters to control layout within an SVG canvas.

MMaciek Sitkowski
76% match
Loading thumbnail…

Color Legends !

This example presents a reusable color legend component built with D3 v5. The visualization displays four categorical color swatches—apple, lemon, lime, and orange—using circles filled via a `scaleOrdinal` color scale. The `colorLegend` function, exported from `colorLegend.js`, appends grouped circle and text elements to an SVG, with spacing, text offset, and circle radius configured through its props. The legend is transformed into position using a `translate` attribute and rendered with the d3 `select` and `call` methods.

SShareSha
76% match