Colours Page

100%

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Apr 25, 2014

A gallery of SVG color swatches displays every named CSS/SVG color from a local CSV file. Each color is shown as a rounded rectangle with its name overlaid in bold, shadowed text. The d3.csv method loads the data, and d3 selections append one SVG per color with appended rect and text elements, using white strokes for label legibility. All colors render as individual static tiles in the browser.

AI-generated description

This is an example of athe range of available named colours that can be used in d3.js. These are of couse the SVG named colours.

Advice can be found on-line that not all browsers will render them correctly. I have tested with Chrome and Firefox and found them suitably visible.

These are used as references and described in the book D3 Tips and Tricks.

mit Licensed

Similar vizzes

Loading thumbnail…

Colours Page

This example displays a grid of color swatches, each labeled with its corresponding named color value. It uses the d3.csv function to load color names from a CSV file and then creates an SVG for each entry. Each SVG contains a rounded rectangle filled with the color, a text label with a white shadow for readability, and a bold black text overlay showing the color's name.

Dd3noob

92% match

Loading thumbnail…

Colours Page

This gallery page displays a catalog of named CSS colors in D3.js, with similar hues grouped together. Each color name is rendered as a labeled, rounded rectangle using SVG. The code loads color names from `colours2.csv` via `d3.csv`, then uses `container.append("svg")` and `.append("rect")` and `.append("text")` to build each swatch, applying a white text shadow for legibility. The example highlights the range of available web colors and offers a practical reference for selecting fill values.

Dd3noob

91% match

Loading thumbnail…

Colours Page

This example displays a grid of named CSS colors, each rendered as a rounded rectangle with its name printed in bold text. The visualization uses a static CSV file (`colours2.csv`) containing color names, and the D3.js library to create an SVG element for each entry. The code places each color swatch and label sequentially, using D3’s `select`, `append`, and `attr` methods to build the layout. It also applies a text-shadow class to improve label legibility, and the resulting page is a reference guide for color names usable in web contexts.

Dd3noob

90% match

Loading thumbnail…

Colours Page

A gallery of CSS color names rendered as a grid of rounded rectangles, each labeled with its own name. The page reads a CSV file listing color names and displays them grouped by hue families. Using D3 v6 and SVG, the code appends a small `<svg>` per color, fills a rectangle with the named color via the `style` property, and adds a text label with a white shadow for legibility. The layout is a simple vertical list rather than a compact mosaic, and a few colors are omitted from the source data.

Dd3noob

88% match

Loading thumbnail…

Colours

This visualization displays a grid of color swatches sourced from a CSV file of named colors, with each cell rendering a distinct hue in a structured layout. The code uses React hooks (`useState`, `useEffect`) to asynchronously load the color data via `d3.csv`, then passes the parsed dataset to the rendering logic. It leverages React’s component-based architecture to map each color entry to a visual element, while D3’s CSV parser handles the remote data fetching from a GitHub gist. The example demonstrates a clean integration of React for UI state and D3 for data ingestion.

Oo-n-e

79% match

Loading thumbnail…

CSS Colours

This example visualizes the 148 named CSS colours by fetching and parsing a CSV file of colour names and values from a remote gist. It uses `fetch` to retrieve the data and `d3.csvParse` to convert the raw text into structured rows, then logs the file size, row count, and column count to the browser console. The page is a minimal HTML document that loads D3 v7 from a CDN and embeds all logic in a script tag, demonstrating a straightforward data-loading pipeline without any graphical rendering.

EEd Hutchinson

79% match

Loading thumbnail…

CSS Colour List

This example displays a list of all named CSS colours, rendered as a large, centered title on a plain white page. The visualization is minimal, showing only the text “CSS Colours” without any graphical encoding of the colour values themselves. The code fetches a CSV file containing the colour names from a GitHub gist and parses it using `d3.csvParse`, but the parsed data is only logged to the console and not used for any visual output. The page uses D3 v6 for data loading, with the body styled at a font size of 13em to emphasize the title.

PPadoSensei

77% match

Loading thumbnail…

Claude Test

This example shows a minimal color palette display, rendering three labeled swatches for red, green, and indigo from a CSV file. The visualization uses D3’s `d3.csv` to load the data, then binds it to SVG rectangles, with each fill color derived directly from the row values. Text labels appear alongside each swatch using D3’s selection and `text` methods. The code avoids complex interaction, focusing instead on a clean, data-driven mapping from tabular input to a simple grouped chart. The approach demonstrates how D3 can turn a two-column dataset into an immediate, readable visual output.

CCurran Kelleher

77% match