Colours Page

100%

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

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.

AI-generated description

This is an example of the range of available named colours that can be used in d3.js. In this example I have used colour groupings that keep similar colours together. These are not quite all the available colours, but there's only a few missing.

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 v7.

mit Licensed

Similar vizzes

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

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

92% match

Loading thumbnail…

Colours Page

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.

Dd3noob

91% match

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

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

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

83% match

Loading thumbnail…

colors2

This visualization displays all named CSS colors as large text elements, one per color, with each word rendered in its corresponding hue. The page uses a simple centered layout with an oversized font size to showcase the color names. The code fetches a CSV file of CSS color names and their RGB values from a GitHub gist, then parses it using D3’s `csv` method. The D3 library is loaded via a CDN, and the fetch API retrieves the data asynchronously before rendering the results on the page.

Bbdfee

82% match

Loading thumbnail…

CSS Colours

This example visualizes the named colors of the CSS color specification as a scatterplot-like display. It uses D3 v3 to fetch a CSV file of color names and their corresponding RGB values, then renders each color as a distinct visual element based on its hue and lightness. The code employs D3’s asynchronous data loading and text parsing to process the external dataset. The result is a compact survey of the standard CSS color palette, organized to reveal relationships and distribution across the color space.

Kknmalinski

81% match