Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Dec 10, 2021

Created on Dec 10, 2021

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.

AI-generated description

A demonstration of how to start using D3 version 6.

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

86% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG legend with two colored circles labeled “variable A” and “variable B,” positioned at fixed coordinates. The visualization is built with D3 v7, where `d3.select` targets the SVG element with the `legend` id and appends circle and text elements. It uses static attributes like `cx`, `cy`, `r`, and `style` to define the legend’s appearance. The page also includes commented-out bar chart code using `d3.selectAll` and `.data`, but only the legend renders.

MMichaelBGonzalez

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3.js v7 setup with an SVG canvas, showing two outlined columns: a left column with a static blue circle and text label, and a right column that maps an array of seven numeric values to green circles of varying radii. It uses `d3.select` and the standard append/attr chain to construct the SVG structure, then applies `d3.scaleLinear` to map data domain [100,700] to a range of [1,10] for circle sizing. The right column’s circles are positioned linearly by index, while a text element is transformed and anchored. The code runs in a simple HTML file with D3 loaded via unpkg.

PPedram

80% match

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

80% match

Loading thumbnail…

Fork of D3 Starter

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.

謝謝惠喻

80% match

Loading thumbnail…

Fork of D3 Starter

This fork of D3 Starter demonstrates a minimal D3 version 7 setup, rendering a static grid of colored rectangles in an SVG canvas. The visualization shows a simple categorical heatmap-like pattern with varied blue, green, and yellow hues. The code imports the `select` function from D3 and uses it to update the page body text, while the SVG layout is hand-coded in HTML. No data loading or interactive behavior is included, focusing solely on the basic wiring of a D3 project.

Dd-schwabe

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

79% match

Loading thumbnail…

Legend Practice

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.

MMichaelBGonzalez

78% match