Topologica.js Color Picker Example

100%

Topologica.js Color Picker Example

✓ Published1🌍 Public

Last edited Jun 24, 2019

Created on Jun 24, 2019

Forked from Moon Calendar 2024

Three range sliders control the red, green, and blue components of a color, which updates the page’s background in real time. Built with D3 v5 for DOM selection and event handling, it uses Topologica.js to define a reactive data flow graph where the color string and background style are computed from slider values. Each slider input triggers a state update, demonstrating how Topologica manages dependencies between data and visual output.

AI-generated description

Pick a color with 3 sliders.

This is a small introductory example demonstrating use of Topologica.js.

Inspired by Observable: Multi-Value Inputs.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello Topologica.js!

Three range sliders for red, green, and blue each send their current value into a Topologica.js state graph, which recomputes a CSS color string and applies it as the page background. The example relies on D3 v5's `select` and `selectAll` to bind slider input events to state updates, demonstrating Topologica’s dependency-driven propagation for reactive data visualization without a chart.

CCurran Kelleher

93% match

Loading thumbnail…

Perceptual Color Picker Prototype

This interactive prototype demonstrates picking colors in the HCL color space, where hue, chroma, and luminance sliders adjust a background color while a text field displays the current RGB hex value. Built with D3.js v5 and Topologica for reactive data flow, the visualization uses `d3.hcl` to convert slider inputs into color strings and updates the page background and form fields in real time. Users can also paste a hex color into the text field to sync the sliders, enabling perceptual adjustments like changing hue while preserving luminance. The sliders are bound via the `input` event, and Topologica manages the dependencies between color components, slider positions, and output display.

CCurran Kelleher

80% match

Loading thumbnail…

Color Range slider

This example demonstrates an interactive color range slider that dynamically adjusts the displayed hue. Users manipulate the slider to select a specific color value, which updates the visualization in real time. The implementation uses React for component state and rendering, while D3.js (d3.v5) manages the slider’s input handling and color scale transitions. The project references the React Starter template and uses a minimal HTML page with embedded D3 and custom CSS for styling. The color transitions are driven via D3’s interpolation methods, though the exact rendering target is not specified beyond the slider interaction.

SShweta-tech

74% match

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

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

69% match

Loading thumbnail…

Topologica Layers Experiment

This example demonstrates a scatter plot with 10,000 circles, where hovering over a circle highlights it in the foreground with a fading white overlay. It uses D3 v5 for SVG rendering and animation via `transition.attr`, while Topologica.js manages a layered dataflow graph to selectively re-render only dependent components. The code uses `selection.enter`, `merge`, and `exit` in the `circles.js` module, with explicit dependency declarations like `backCircles.dependencies` to optimize updates, avoiding full re-renders on hover state changes.

CCurran Kelleher

69% match

Loading thumbnail…

HCL Color Picker

This example presents an interactive HCL color picker with three horizontal channel strips for hue, chroma, and lightness. Each strip displays a gradient of colors, and the user can drag a marker along any channel to adjust that component, with the current color shown as a white pixel and its predecessor as black. The visualization uses D3 v3 with SVG axes for channel scales and Canvas `createImageData` and `putImageData` to render the per-pixel gradients. The HCL color is converted to RGB via `d3.rgb`, and dragging is handled with `d3.behavior.drag`.

Mmbostock

69% match

Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen

69% match