list d3 color schemes

100%

list d3 color schemes

✓ Published0🌍 Public

Last edited Jun 5, 2016

Created on Jun 5, 2016

This example displays a list of color scheme names from the d3-scale-chromatic library, each with an accompanying note about the range of color counts it supports. The page uses `d3.select` to append an `h4` heading and a `div` for each scheme, dynamically reading the `range()` function from each generated scheme to display valid values. The schemes are defined directly in a bundled JavaScript file as hex strings, and the code relies on d3.v4’s selection and append methods for DOM manipulation.

AI-generated description

Proposal for an API to get the list of color schemes and ranges of acceptable color numbers.

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Automatic Color Schemes

This visualization demonstrates how color schemes can be automatically generated from configurable parameters for hue, saturation, and luminance. Nine distinct schemes are displayed, each containing seven colors that transition from dark to light via cubic interpolation in Cubehelix color space using D3’s `interpolateCubehelix`. The rendered output shows both circles and rectangles filled with the generated colors, with the `d3.cubehelix` function constructing endpoint colors based on the specified hue, saturation, and luminance bounds. The code selects numeric parameters from a CSV file, specifying the active scheme index.

CCurran Kelleher

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

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

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

71% match

Loading thumbnail…

Fork of Automatic Color Schemes

This example shows how color schemes can be automatically generated from configurations of hue, saturation, and luminance, displayed as vertical gradient bars across the screen. The code uses `d3.cubehelix` to define dark and light endpoints for each hue, then `d3.interpolateCubehelix` and `d3.range` to create seven-step gradients from those endpoints. It renders the resulting colors as adjacent SVG rectangles, with each rect slightly overlapping to produce seamless transitions. A CSV file provides a selected index, though the current code only reads it without affecting the visible output.

HHaili0109

71% match

Loading thumbnail…

D3 Css Colors

This example visualizes the named colors defined in CSS by loading a CSV file of color names and values. It uses D3 v7’s `d3.csv` method to fetch and parse the data from a GitHub gist, logging the parsed array to the browser console. The page is a minimal HTML document that includes the D3 library via a CDN link, with placeholder CSS in a `<style>` block and an empty body element. No graphical rendering occurs; the demonstration focuses solely on data loading and parsing.

MMuhammad Talha

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

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

69% match