Fabio Crameri’s Colormaps

100%

Fabio Crameri’s Colormaps

✓ Published0🌍 Public

Last edited May 30, 2018

Created on May 29, 2018

This example displays Fabio Crameri’s scientific color maps, including Berlin and Bilbao, as full-width sequential swatches. Clicking a named button transitions the entire visualization to a different colormap. The code loads the color arrays from a local JavaScript file and renders them as SVG rectangles using D3 v5’s `d3.scaleSequential` and `d3.interpolate*` functions. Animated transitions between palettes are achieved with D3’s `transition` method, allowing users to compare the perceptual qualities of each map.

AI-generated description

Fabio Crameri’s Colormaps, based on http://www.fabiocrameri.ch/colourmaps.php

See https://beta.observablehq.com/@fil/colormaps

License: CCBY 4.0

forked from <a href='http://bl.ocks.org/pstuffa/'>pstuffa</a>'s block: <a href='http://bl.ocks.org/pstuffa/d5934843ee3a7d2cc8406de64e6e4ea5'>4.0 Color Scales - Sequential</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive heatmap visualizes a 2D histogram of date and value data, with cell colors encoding counts. A dropdown menu and auto-cycling animation let users switch among sequential color interpolators from D3 4.0’s `d3.scaleSequential` and the `d3-scale-chromatic` library, including Viridis, Inferno, and ColorBrewer schemes. Built with D3 4.0, it renders SVG rects and axes, loading data from a CSV file.

CCurran Kelleher

65% match

Loading thumbnail…

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

SSubhendu Karmakar

65% match

Loading thumbnail…

TODO

This interactive tool visualizes color scales by plotting Bézier curves through multiple color spaces, including RGB, HSL, HCL, Lab, and Cubehelix. Users can edit input colors, adjust the number of output stops, and click to switch between basis and linear curve interpolation across each space’s channels. The page renders using SVG and includes animated draggable points on channel charts, with the current state shared via the URL. Forked from d3-based code by 1wheel, it addresses issues in Gregor Aisch’s Color Palette Helper for diverging scales.

11wheel

65% match

Loading thumbnail…

D3 color experiments

This example showcases color scales by displaying a series of color swatches as text labels, each filled with a distinct color derived from a linear scale spanning green, purple, and teal. It also renders the minimum temperature from a San Francisco weekly temperature CSV dataset. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for color mapping, `d3.csv` for data loading, and SVG text elements to render the colors against a black background.

JJames Rhodes

64% match

Loading thumbnail…

D3.js in action - Section 1 - Ch 3

This example visualizes World Cup team statistics across multiple metrics, with each team represented as a circle positioned along a horizontal axis. Clicking a button adjusts the circle radii and fill colors to reflect the selected attribute, while hovering highlights teams from the same confederation. The visualization uses D3.js v6 with SVG transitions to animate changes, and employs scales such as `d3.scaleQuantize` and `d3.scaleLinear` to map data values to colors and sizes, with color interpolation via `d3.interpolateHsl`. Data comes from a CSV file containing team performance records.

AAlbert

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

64% match

Loading thumbnail…

Bruck Vis V1

This visualization demonstrates the Bruck algorithm’s data redistribution steps using an interactive step selector. A 10×10 grid of colored circles, rendered as SVG via D3 v6 and React, displays initial colors, a data rotation phase, and a communication phase. The dropdown menu controls which step’s color array is applied to the dots. The code explicitly builds position and color arrays, mapping them to circle attributes with D3 selections.

Hhenryspradlin

64% match

Loading thumbnail…

Voroni & Chromatic Scale

This visualization displays a Voronoi tessellation of 2,000 random points, with each polygon’s fill color mapped through a chromatic scale. The example uses D3 v4.0 with the `d3.voronoi` layout, `d3-scale-chromatic`’s `d3.interpolateRdYlBu` for continuous ColorBrewer coloring, and SVG paths for rendering. On mouseover, all polygon fills recolor based on the Euclidean distance from the hovered point’s coordinates, creating an interactive distance-based heatmap effect.

FFrissAnalytics

64% match