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, 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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

d3.legend example (d3 v4)

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.

GGerardoFurtado
89% match
Loading thumbnail…

// source http://jsbin.com/sivozey

This example demonstrates a time-series chart with an accompanying legend, built using D3.js v4 and rendered as SVG. It sets up a time-scaled x-axis, a linear y-axis, and an ordinal color scale using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The code attaches a legend group to the SVG, positioning it with a translation and calling a `d3.legend` function, though the underlying data and full legend implementation are not visible. The chart uses margins and a nested group to structure the plot area.

MMTClass
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
76% 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
76% 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
75% 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
75% match
Loading thumbnail…

leaflet and d3.legend

This example combines Leaflet and d3.legend to place three distinct legends on an interactive map, each corresponding to a separate dataset rendered as SVG circles. It shows how to map numerical, quantized, and categorical values to circle sizes and colors, with data embedded in HTML aside elements. The code uses Leaflet for map tiles and layers, D3 v5 for data parsing and scale construction, and the d3-legend plugin to generate the legends. Three datasets are processed, each with its own scale type (threshold, quantize, and ordinal), and their circles are added to layer groups while legends are positioned in a separate container.

EEE2dev
75% match
Loading thumbnail…

D3 Legend Example

This example demonstrates how to create a color legend using the d3-legend library in conjunction with ColorBrewer color scales. The visualization renders an SVG-based legend with a series of colored swatches, each paired with a text label. The color palette is drawn from ColorBrewer's sequential schemes, providing visually distinct and perceptually uniform colors. The example highlights how to integrate a third-party legend library with D3's SVG rendering to efficiently produce clean, customizable legends for data visualizations.

CCurran Kelleher
75% match