fresh block

100%

✓ Published0🌍 Public

Last edited Mar 26, 2020

Created on Mar 26, 2020

This example demonstrates a pixel-level color manipulation technique using an HTML canvas. It displays a road sign image twice side-by-side: the original on the left and a recolored version on the right. The code loads a PNG file, draws it to the canvas, and then uses the `getImageData` and `putImageData` APIs to modify individual pixels. It shifts the hue of blue pixels toward green, and replaces specific red and light-red colors with custom RGB values. The implementation includes custom `rgbToHsl` and `hslToRgb` conversion functions to perform the hue adjustments in HSL color space.

AI-generated description

Changing a particular color of a png file. If you use external svg instead, see: https://stackoverflow.com/questions/28652648/how-to-use-external-svg-in-html https://stackoverflow.com/questions/28213417/how-to-set-a-external-svg-color-in-html-using-css

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example displays a single vertical red rectangle at a fixed position on a light gray SVG canvas. Built with D3 v4, the visualization appends a 100-by-200 pixel rectangle to the SVG root using the `d3.select` and `append` methods, then fills it with the custom color `#EF4135`. The code sets the canvas size to 960 by 500 pixels and defines unused color variables for blue and white, though only the red shape is rendered. The visualization is generated entirely with the SVG rendering approach, using a hardcoded geometry without any data source or interactivity.

KKerchoo

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

74% match

Loading thumbnail…

fresh block

This example displays a static SVG canvas containing three colored rectangles, arranged horizontally with blue, white, and red fills at varying x-coordinates. The visualization is generated using d3.select to append the SVG element with fixed dimensions, and the color data is stored in a JavaScript array with fill and position properties. Though the code defines the flag array with console.log output, the rectangles are not yet rendered to the screen. The implementation relies on D3 v4’s SVG creation APIs, with the data structure prepared for potential future rendering.

LLaurynKW

72% match

Loading thumbnail…

fresh block

This example demonstrates a simple gradient-filled rectangle drawn in an SVG canvas. It shows a black horizontal bar with a linear gradient that fades from fully opaque on the left to nearly transparent on the right, positioned near the top of the frame. The code uses D3 v4 to select the body, append an SVG element, and construct a linearGradient definition with two stop points via `selectAll` and `data`. A single `rect` is then appended and styled with the gradient, relying on D3's data-binding to set offset and opacity values.

CCoreyBurkhart

71% match

Loading thumbnail…

fresh block

This example shows three circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js version 3.5.5 to bind an array of numbers to circle elements and map each value to screen coordinates. The code selects the SVG container, appends circle elements, and sets their cx and cy attributes directly from the data, while fill colors are assigned conditionally: green for 30, purple for 70, and red for 110. The rendering approach relies on D3’s data join and attribute manipulation, with no axes or scales involved.

BBrandonStroud

70% match

Loading thumbnail…

fresh block

A single large rectangle sits against a plain background, initially drawn in dark red before transitioning to a bright blue over three seconds. The animation uses a D3 transition with a bounce easing, applied to the rectangle’s fill style. The visualization is built with D3.js (version 3.5.5) and rendered as an SVG element that fills the viewport. The code originates from a Blockbuilder.org gist and demonstrates a minimal, animated color change without any data or interactivity.

JJonasHeylen

70% match

Loading thumbnail…

fresh block

This example shows three fixed circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js to bind an array of numbers to circle elements, setting their horizontal and vertical centers from the data and giving them a constant radius. The `style` method applies a fill color through a conditional function that maps the values 30, 70, and 110 to green, purple, and red, respectively. The SVG container is created with a fixed width and height of 200 pixels, and the circles are appended using D3’s data join pattern.

BBrandonStroud

70% match

Loading thumbnail…

fresh block

This example visualizes a small set of six rectangles, each positioned and sized by explicit x/y coordinates and width/height values, with colors assigned individually. It shows the spatial arrangement of these shapes on an SVG canvas, computed by finding the maximum extents of all rectangles to set the canvas size. The code uses D3 v3 to bind the JSON data to `rect` elements, setting position and size attributes, while also appending a canvas element to the body. The data source is inline in the script, and the rendering relies on standard SVG attributes.

IIgathi

70% match