Skip to main content
100%

bookmarklet for enabling the color picker

✓ Published0🌍 Public
Aalanmclean
Last edited Oct 30, 2013
Created on Oct 30, 2013

This example presents a bookmarklet that adds a color-picker interface to Strava’s Run training page, allowing users to change the color of individual data points directly in the training log. The bookmarklet works by injecting a JavaScript-based picker into the page, which is invoked through a simple `javascript:` URL link saved to the bookmarks bar. The code relies on the page’s existing DOM and styling, using standard browser APIs to locate and modify the plotted points, and is configured specifically for the Run page, though the author notes it can be adapted for other pages. The data rendered are the user’s own training-log entries, and no external visualization libraries are used.

AI-generated description

Similar vizzes

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
59% 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
59% 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
57% 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
57% match
Loading thumbnail…

D3 Bookmarklet

This example demonstrates a bookmarklet that injects D3.js into any webpage by appending a dynamically created script element to the document head. The code specifically loads D3 version 3 from the d3js.org CDN using the `document.createElement` and `document.head.appendChild` APIs. It shows how to enable D3 functionality on pages that do not already have it, making the library available for future interactions. The bookmarklet relies solely on this script injection mechanism, with no additional data or visualization logic included.

Mmbostock
57% match
Loading thumbnail…

RGB Color Picker

This interactive RGB color picker displays three horizontal channel strips (red, green, blue) as Canvas gradients, each with a draggable marker. The current color is composed from the selected values in all three channels, shown as a white/black marker line. The visualization uses D3 v3 with `d3.scale.linear`, `d3.interpolateRound`, `d3.svg.axis`, and the `d3.behavior.drag` interaction. Each strip is rendered with `createImageData` and `putImageData` on the Canvas, while SVG axes provide tick labels.

Mmbostock
56% match
Loading thumbnail…

Lab Color Picker

This interactive tool visualizes the CIELAB color space by displaying three horizontal gradient strips, one for each of the L, a, and b channels. Dragging a marker along a strip adjusts that channel’s value, and all three strips update to show the resulting color as a vertical slice through the space. The example uses d3.v3 for scales, axes, and drag behavior, with the gradients rendered to Canvas via `createImageData` and `putImageData`, converting between Lab and RGB using `d3.lab` and `d3.rgb`.

Mmbostock
56% 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
56% match