Hello Topologica.js!

100%

Hello Topologica.js!

✓ Published0🌍 Public

Last edited Nov 9, 2018

Created on Sep 7, 2018

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.

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…

Topologica.js Color Picker Example

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.

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

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

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

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

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Ggotyou007

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

67% match

Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft

66% match