D3.UNCONF Submission

100%

D3.UNCONF Submission

✓ Published0🌍 Public

Last edited Aug 24, 2017

Created on Aug 22, 2017

This interactive tool visualizes how Hue, Saturation, and Brightness determine color contrast between a button background and its text, enforcing a minimum AA contrast ratio of 4.5. Users adjust numeric inputs for both colors, with the main canvas and SVG displaying a saturation-brightness space while a separate hue channel canvas shows the hue gradient. The code uses d3.v4 for SVG rendering, Canvas 2D for the color spaces, and math.js for color calculations, updating the contrast value and warning in real time.

AI-generated description

Learn about the relationship between Hue, Saturation, Brightness, and Color Contrast. Minimum contrast level is set to 4.5 (AA).

Similar vizzes

Loading thumbnail…

Compare Colors

This tool lets users compare two colors side-by-side in both small, separated rectangles and large, adjacent areas, with a grayscale filter below to isolate luminance. The D3.js visualization (version 4) renders SVG rectangles, while jQuery MiniColors provides the color pickers. Each picker’s change event updates all matching rectangles via a `change` function, and the initial values are set from the inputs’ HTML attributes.

CCurran Kelleher

70% match

Loading thumbnail…

Gist ac01c91d8c9c9dd4b825

This example uses D3.js and the HTML5 Canvas API to render an interactive color picker that visualizes the HCL (Hue-Chroma-Lightness) color space. It shows a 500×500 pixel grid where the horizontal axis maps hue from 360 to 0 degrees, the vertical axis maps lightness from 0 to 100, and chroma is fixed at 35. The code uses `d3.scale.linear` to map pixel coordinates to color values, converts HCL to RGB via `d3.hcl().rgb()`, and writes the results directly to image data with `createImageData` and `putImageData`. Moving the mouse over the canvas triggers `getImageData` to read the pixel color and display its hex value in a label, demonstrating direct pixel manipulation without SVG or DOM elements.

CCaged

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

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

68% match

Loading thumbnail…

Cubehelix Color Picker

This example presents an interactive Cubehelix color picker with three horizontal channel strips for hue, saturation, and lightness. Each strip renders a gradient swatch on a canvas element with an SVG axis below it, using d3.svg.axis to label the value ranges. The code relies on d3-color’s `cubehelix` and `hsl` functions to convert channel values into displayable colors, drawing the gradient bars programmatically via canvas `getImageData`. The interface allows direct manipulation of each channel to explore the three-dimensional color space.

Mmbostock

68% match

Loading thumbnail…

color palette generator

This example presents a simple color palette generator using D3.js (v7) within an HTML page. It displays a circle and a series of five rectangles, each filled with a color interpolated along a linear scale from orange to black, using a gamma-corrected RGB interpolation with a value of 1.5. The visualization is rendered as SVG, with shapes positioned and colored based on the numeric scale values, demonstrating D3's `scaleLinear` and `interpolateRgb` APIs.

Ssukumardunn

67% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates basic D3.js (v4) concepts for creating and animating SVG elements through a simple interactive button. It shows how to manually add a yellow rectangle, then uses D3 to append a green rectangle that transitions to a random position. The code also binds an array of color data to newly created rectangles, moving them and updating their fill colors through chained transitions. Key APIs include `d3.select`, `append`, `data`, `enter`, `merge`, and `transition` with `.duration` and `.attr` for animated property changes, all rendered as SVG in the browser.

DDeveloperJeffb

67% match

Loading thumbnail…

UX

Three purple circles on an SVG canvas form the centerpiece of this playful D3.js v5 example. Hovering over each circle changes its fill color to a different hue, while hovering over the third circle also randomly repositions all three along the x-axis using `d3.randomUniform`. A button and a large text message provide additional visual elements. The page loads population data from a CSV file via `d3.csv`, though the data is only logged to the console and used to render non-visible rectangles.

SSeegson

67% match