Circles Legend

100%

Circles Legend

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

This example demonstrates a legend for circle-marked data, using the same linear scale as the main visualization to encode values. It shows three reference circles sized for data values of 50, 150, and the maximum value, with dotted leader lines and numeric labels indicating the encoded quantity. The implementation uses D3 v4’s `d3.scaleLinear` for the mapping, SVG circles, lines, and text elements, and reads sample data from an inline array. A distinct visual pattern links each circle’s radius to a numeric value through the shared scale.

AI-generated description

When you encode data with a circle, create a legend using the same scale.

forked from <a href='http://bl.ocks.org/HarryStevens/'>HarryStevens</a>'s block: <a href='http://bl.ocks.org/HarryStevens/b779b431075d1a2c5710e9b826736650'>Circles Legend</a>

forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/eb3a1c411153dcabf18a7f8b0b0063ac'>Circles Legend</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3 | reusable circle legend

This example shows a reusable circle legend for bubble charts, displaying three concentric circles sized by a square-root scale to represent data values like 8%, 34%, and 89%. Each circle is paired with a dashed tick line and a text label, making the mapping from numeric value to area immediately readable. The code defines a `circleLegend` function that builds SVG elements via `d3.scaleSqrt`, `selection.append`, and chained data joins. Users configure the legend through methods like `.domain()`, `.range()`, and `.values()`, then call `.render()` to draw it, with all defaults adjustable for colors, padding, and suffixes.

EEndNight95

82% 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

82% match

Loading thumbnail…

Circles and lines

Two categorical legends, each repeating the same orange, green, yellow, and red color scale, display colored circles beside black lines. A separate size legend shows circles whose radii correspond to numeric tick values. The example demonstrates reusable legend components built with d3.scaleOrdinal, d3.scaleSqrt, and custom SVG rendering in d3.v5.

OOleg

81% match

Loading thumbnail…

d3 | reusable circle legend

This example demonstrates a reusable circle legend for bubble charts, using nested concentric circles to represent proportional values such as 8%, 34%, and 89%. The legend renders in SVG via d3 v4, with `d3.scaleSqrt()` mapping the domain to circle radii, and includes dashed guide lines and text labels for each value. The code exposes a configurable API for setting domain, range, values, dimensions, colors, and suffixes, making the legend adaptable to different datasets.

EEndNight95

81% match

Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca

77% match

Loading thumbnail…

Untitled

The chart demonstrates why mapping values linearly to circle radii distorts data, using four strategies in a horizontal dot plot. Groups with 10, 30, 50, and 100 show that linear radius scaling makes larger values appear disproportionately small, while a square-root-adjusted radius or linear area scaling preserves proportional perception. The visualization uses D3 v5 with `d3.scaleLinear`, `d3.scalePoint`, and `d3.axisTop` to compare encodings, highlighting area as the correct perceptual channel for bubbles.

YYuichi Yazaki

77% match

Loading thumbnail…

Legends

This example demonstrates two distinct legend styles: a color legend using an ordinal scale for categorical data and a size legend using a square-root scale for quantitative data. The color legend maps fruit names to distinct colors via `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to translate numeric ticks into varying circle radii. Both legends are rendered as SVG groups using D3's selection and merging API, with circles and text positioned via the `attr('transform', ...)` method. The page integrates custom gradients defined in the SVG defs, though they are not actively applied to the legend marks.

SSharvariPhadke

76% match

Loading thumbnail…

Fork of Circles with D3

This example shows a simple scatterplot of circles arranged on a 2D plane, with each circle’s position and size determined by explicit data values. It demonstrates D3’s data join and method chaining to bind an array of circle objects to SVG `<circle>` elements, setting `cx`, `cy`, `r`, and `fill` attributes. The visualization uses D3 v7 with the `select` function and the `.data().join()` pattern for efficient rendering, while the canvas background and opacity styling enhance the overlap effect. Data is embedded directly in the code as a static array, serving as a foundation for later loading external data sources.

RRohithNaiduDevareddy@my.unt.edu

76% match