Legend Practice

100%

Legend Practice

✓ Published0🌍 Public

Last edited Dec 13, 2021

Created on Dec 10, 2021

This example generates a custom legend that maps network node and edge types to specific colors for a COVID-19 contact tracing visualization. It uses D3.js (v5) to append SVG `circle` and `text` elements within an SVG container, iterating over a JavaScript `Map` of record types. The legend lists entries like "COVID-19 Case" and "household__c," with colors defined programmatically. The code also sets the page background to black and loads libraries via UNPKG.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This example generates a static SVG legend that maps relationship categories—such as COVID-19 Case, household__c, and school_name—to distinct colors using a JavaScript Map and D3 v5. The code appends colored circles and text labels to an SVG element via `d3.select` and `svg.append`, iterating over the map entries to position each item vertically. It demonstrates importing D3 functions like `select` and local ES6 modules, while rendering the legend entirely with SVG shapes.

MMichaelBGonzalez

79% match

Loading thumbnail…

Fork of D3 Starter

This example shows a static SVG legend that maps categorical data labels to distinct colors using a JavaScript `Map` object. It renders ten entries, each pairing a colored circle with a text label, to document color assignments for COVID-19 related event types. The code uses D3 v7’s `select` and `append` methods to add circles and text elements to an existing SVG container, positioning them with hardcoded `cx`, `cy`, and `x`, `y` attributes. Styling is applied inline via `.style()` calls, with font size and alignment set for readability.

MMichaelBGonzalez

78% match

Loading thumbnail…

Color Legend Practice

This visualization demonstrates two reusable legend components: a color legend for categorical data and a size legend for quantitative data. The color legend maps fruit names to colored circles, while the size legend uses a square-root scale to represent numeric values through circle radius. Built with d3.js v5, the example shows how SVG groups can be efficiently updated using the `selectAll` and `merge` pattern for incremental rendering. Both legends are created as modular functions that accept a selection and configuration properties, highlighting a flexible approach to legend creation.

Ccpsshan

75% match

Loading thumbnail…

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

SShane Carey

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

74% match

Loading thumbnail…

Legend

This example demonstrates a reusable categorical color legend with colored circles and matching text labels for fruit categories. Using D3 v5, the `colorLegend` function creates a group per domain value, binds circles and text, and positions them with a vertical spacing transform. A `scaleOrdinal` maps the domain to a color range, with the legend called via `selection.call()`. The SVG rendering applies styled ticks and circle strokes from an external stylesheet.

Rrigt

73% match

Loading thumbnail…

Color Legend

This example demonstrates two types of legends for mapping data to visual encodings: a color legend for categorical values and a size legend for quantitative values. The color legend displays circles colored via a d3.scaleOrdinal mapping fruit names to colors, while the size legend uses d3.scaleSqrt to represent numeric ticks as varying circle radii. Both legends are rendered as SVG groups with d3-selection, using join patterns to update circle and text elements. The code is built with React and D3 v6, with the legends generated procedurally from scales rather than external data.

Nnsadath

73% match

Loading thumbnail…

Legend and colors

This example demonstrates how to build reusable legends for mapping data values to visual encodings. A color legend uses an ordinal scale with fruit names and distinct hues, while a size legend applies a square-root scale to represent numeric ticks with circles of varying radii. The code defines `d3.scaleOrdinal()` and `d3.scaleSqrt()` with SVG rendering, and updates legends through enter/merge/exit selections. Both legends are generated as reusable functions called via `.call()`, with circles and text positioned using `spacing` and `textOffset` parameters.

Ppaularl

73% match