Untitled

100%

✓ Published1🌍 Public

Last edited May 25, 2020

Created on Mar 29, 2020

A static legend template renders five color-coded grade categories—A, B, C, D, and F—as labeled rectangles inside a bordered box. Built with d3.v4, the code appends SVG rectangles and text elements using chained `attr` calls, with fixed coordinates and fill colors (green, steelblue, dark blue, light blue, and red). The example includes two buttons that reference undefined update functions, indicating an intended but unimplemented interactivity; currently, the visualization displays only the legend without any data-driven elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a hand-coded categorical legend made of colored circles and text labels arranged in columns. It lists product categories like Widgets, Hosting, and Analytics, alongside technology categories and generic variable names. The visualization is built with D3.js v4, using basic SVG selection and append methods to manually position each legend item. A second version includes a JavaScript button that serializes the SVG to XML and triggers a download of the rendered chart as an SVG file.

SStefan Apostol

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

76% match

Loading thumbnail…

Untitled

Four colored bars represent categorical values A through D, with heights corresponding to data attributes of 10, 20, 60, and 100. Using static CSS classes and inline `data-val` attributes, the HTML structure defines each bar’s color and relative height. D3 version 6 is loaded but not actively utilized in the visible code, with styling handled entirely through CSS selectors and the `nth-of-type` pseudo-class.

CChaeHyun-Kim

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…

Untitled

This example shows a simple bar chart rendered as static SVG rectangles with value labels. The chart displays three bars with heights proportional to the data values 5, 10, and 12, using inline SVG elements styled with orange fills and white text. The code uses D3 version 6 only for loading the library, while the visualization itself is hand-coded in HTML with hardcoded `rect` and `text` elements, not generated through D3 data joins or scales. A separate `index.js` file imports `select` from D3 to append a text message to the page body.

DDebaliena

75% match

Loading thumbnail…

Untitled

This example demonstrates how to build a legend for bubble charts using SVG circles, dashed connector lines, and text labels. It shows three reference sizes (10, 50, and 100) positioned on a static canvas, with each label displaying placeholder text. The code uses d3.scaleSqrt() to map data values to pixel radii, then appends the legend elements via d3.selectAll().enter().append() in d3.v4. All rendering is done in a React-compatible HTML page, with the SVG object placed directly in the DOM.

SStefan Apostol

75% match

Loading thumbnail…

Untitled

This example shows a static bar chart with three orange rectangles representing the values 5, 10, and 12, each labeled with white text. The chart is rendered as an SVG using d3.v4, though the bars are manually placed in groups rather than generated dynamically. The page also includes commented-out code demonstrating a CSS transition that changes a div’s background from magenta to red over ten seconds, alongside a basic README referencing a React starter template.

Ssalemprakash

75% match

Loading thumbnail…

Untitled

This visualization presents three labeled horizontal bars (A, B, C) as a chart, with the bars rendered as gray rectangles of decreasing lengths. The first bar is overridden to red via a CSS class named `.first`. The SVG is drawn directly in the markup, using the Share Tech webfont for large 80px text labels. The code uses no external JavaScript or charting libraries; it relies on static SVG elements and inline CSS styling.

CCosmosDude1

74% match