Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 15, 2023

Created on Oct 15, 2023

This example demonstrates a straightforward color legend using D3's ordinal scale, displaying three categories—blueberries, oranges, and apples—each assigned a color from the `d3.schemeCategory10` palette. The visualization renders swatches and labels via the `Swatches` function, which builds an HTML structure with inline styles for swatch dimensions and text formatting. The code imports `select` from D3 and applies the `swatches` helper to generate the legend, relying on D3 v7 loaded from a CDN. The page itself is minimal, centering the legend with a large font size, showcasing a simple starter template for D3-based data displays.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 D3 Color and Size Legends

This example demonstrates how to build color and size legends for D3 visualizations using modular JavaScript functions. It shows a color legend with circles representing different fruit types, encoded through an ordinal color scale. The code defines a reusable `colorLegend` component that binds data to SVG groups, appending circles and text labels. Using D3 v7’s `scaleOrdinal`, the example maps categorical domains to specific colors, while SVG rendering handles the visual output. The implementation highlights a clean separation between the legend component and the main script’s render logic.

Ccaedcagt76@gmail.com

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

80% match

Loading thumbnail…

Color and size legend

This example demonstrates a custom color legend for ordinal data, showing categories as colored circles with matching labels. The legend displays two fruit categories, apple and lemon, each assigned a distinct color via `d3.scaleOrdinal`. The visualization uses D3 v5 with an SVG rendering approach, where the `colorLegend` function appends circle and text elements to the SVG canvas. Labels are positioned below the circles, and all elements are centered vertically using the SVG height attribute. The code also includes transition handling for updating the legend dynamically.

ZZhengyan Yu

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup by rendering the text “Hello D3 version 7” on an otherwise empty page. The code uses `select` from the D3 module to set the body’s text content. It also includes a color legend built with `d3.scale.quantize`, the `d3.legend.color` plugin, and a color scale ranging from 0 to 0.15, rendered on an SVG group. The legend uses `colorbrewer.YlGn[9]` for its color range, along with custom shape padding, width, height, and label offset.

SSophia Cofone

80% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build a color legend using D3 v5, displaying categories apple, lemon, limes, and orange with distinct colors and circular markers. The visualization uses a custom `colorLegend` function that binds ordinal scale domain values to groups, appending circles and text labels with specified spacing and offsets. The code imports `select` and `scaleOrdinal` from D3, applies the legend to an SVG canvas, and sets explicit styling for text, circles, and background in CSS.

Jjay

79% match

Loading thumbnail…

Color Legends

A color legend maps ordinal categories to hues, displaying two large circular swatches for "apple" and "lemon" against a white background. The `d3.scaleOrdinal` assigns red and yellow, while a custom `colorLegend` function binds the scale's domain to SVG groups. Circles and text labels are appended and updated via enter/merge/exit selections, with transform positions calculated from array index and a fixed height. The example demonstrates reusable D3 v5 code for building legends with dynamic scaling.

AAli Ahmed

79% match

Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates reusable D3.js legend components for ordinal color scales and sequential size scales. The color legend displays four fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend visualizes numeric ticks from 0 to 10 as scaled circles. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with custom legend modules handling circle positioning and text offsets. The SVG rendering includes styled ticks and text, with circles given black stroke outlines for visual separation.

IIsigned

79% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can visually encode data through both color and size. It uses a D3 ordinal color scale to map the categories "apple" and "lemon" to red and yellow swatches, while fixed circle radii and text offsets in the custom `colorLegend` function control the legend’s spatial layout. The SVG-based visualization is rendered using D3 v5, with the legend positioned via an SVG transform and styled through external CSS.

Pprincit

78% match