Monochrome Mona Lisa

100%

Monochrome Mona Lisa

✓ Published0🌍 Public

Last edited Nov 15, 2016

Created on Oct 20, 2016

A monochrome version of the Mona Lisa is displayed with a colored region revealed through a resizable brush selection. The example uses an SVG image with a monochrome filter created via `feColorMatrix`, and a second copy of the image is clipped using a `clipPath` derived from the brush selection. Built with D3 v4, it demonstrates `d3.brush` to define the visible color area over a grayscale portrait.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Mona Lisa Histogram

Clicking and dragging a brush across the Mona Lisa on a canvas redraws the RGB histogram beneath it. The histogram uses stacked, semi-transparent red, green, and blue area charts, with black step lines, to show color channel distributions for the selected region. The code uses d3.brush with d3.event.selection and Canvas getImageData to sample pixel values, computing histogram counts and scaling them with d3.scaleLinear before updating d3.area and d3.line paths in SVG.

Mmbostock

76% match

Loading thumbnail…

d3-brush example

A minimal interactive brush demonstration renders a 400 by 400 SVG rectangle, where the user drags to select a rectangular region. The example uses the d3-brush API from D3 version 4 to track selection coordinates, logging the starting and ending positions to the browser console during brushing and reporting the absence of a selection when the brush is cleared. The code defines the brush extent to match the full drawing area and attaches start, brush, and end event handlers.

FFrissAnalytics

67% match

Loading thumbnail…

Basic brush practice

This example demonstrates interactive brushing on a 400×400 SVG canvas, where a single circle changes color based on whether it falls within the user’s brush selection. The brush updates the circle’s fill to blue when selected and red otherwise, using animated transitions. Built with React and D3 v5, the code leverages `d3.brush`, `d3.select`, and `d3.event.selection` to detect the brushed region and compare its coordinates against the circle’s position. The brush extent is fixed to the full canvas, and the color change triggers on both brush start and end events.

JJunyanL

65% match

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates d3-brush with custom resize handles in D3 v4, highlighting the brush selection over a scatterplot of 800 random points. It shows how brushed points become highlighted with a red stroke, while custom path-based handles render on the left and right edges of the selection. The implementation uses d3.brushX, d3.scaleLinear, and d3.axisBottom, with the handle path defined via a custom function resembling the crossfilter approach. The brush’s start and brush events trigger the brushmoved function, which updates point activity and handle positioning based on the current selection.

PPhilippe Rivière

64% match

Loading thumbnail…

svg & canvas & brush

This example overlays a canvas-rendered scatterplot of 1,000 randomly generated points with an SVG layer containing axes and a d3.brush selection rectangle. The canvas continuously redraws each frame using `requestAnimationFrame`, highlighting points under the mouse cursor via `ctx.isPointInPath` and filling those inside the brush area. The SVG brush, configured with `d3.brush()`, updates the selection bounds, demonstrating a hybrid approach that combines canvas performance with SVG’s interactive brush capabilities.

11Cr18Ni9

63% match

Loading thumbnail…

Brushing Circles with D3-Brush

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

CCurran Kelleher

63% match

Loading thumbnail…

Brushing Circles with D3

This example demonstrates interactive brushing on a set of five colored circles. Users can drag a rectangular selection region, and any circle whose center falls within that area is highlighted with a thick black stroke. The visualization updates its state through D3's `brush` API, using the `on('brush')` and `on('end')` events to track the selection. The circles are rendered as SVG elements with hardcoded coordinates and colors, and the highlighted set is managed via a `Set` stored in the component’s state.

DDonald Bagwell

63% match

Loading thumbnail…

Brush I

A brushable scatterplot displays 300 randomly generated points. A horizontal brush initially selects a range, highlighting points within it in red with a brown stroke. The example uses d3.brushX to define the brush and handles the brush event to update the selection state. Clicking re-centers the brush using a fixed width, demonstrating interactive selection on an SVG rendered with d3.scaleLinear and d3.axisBottom.

MMorganhaoyu

63% match