Skip to main content
SimilarExport ZIP
100%

Mona Lisa Histogram

✓ Published0🌍 Public
Mmbostock
Last edited Aug 9, 2019
Created on Jun 2, 2016

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Monochrome Mona Lisa

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.

Mmbostock
76% match
Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9
68% match
Loading thumbnail…

Robot Painter

This visualization demonstrates a histogram that undergoes iterative smoothing, transforming raw random data into a progressively blurred density curve. A canvas trail of rainbow-colored strokes reveals the histogram’s evolution over time, starting at blue and fading as new frames are drawn. The code uses D3 v4 APIs including `d3.range`, `d3.randomNormal`, `d3.histogram`, and `d3.area`, with rendering performed on two Canvas contexts via `getContext("2d")`. A `d3.timer` drives the animation, repeatedly applying a blur function that averages each bin’s density with its predecessor.

CCurran Kelleher
65% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock
64% match
Loading thumbnail…

Histogram Smoothing

A histogram of 300 random normal samples, drawn as a smooth area chart on a Canvas, is repeatedly smoothed by a three-point moving average. Each animation frame applies one blur pass to the bin densities, causing the distribution to progressively flatten and widen toward a normal curve. The code uses d3.histogram to bin the data, d3.area with a Canvas context for rendering, and d3.timer to drive the animation, with colors cycling through hues via d3.hsl. The rainbow-like trail of strokes shows the smoothing progression over time.

CCurran Kelleher
63% match
Loading thumbnail…

Click-to-Recenter Brush II

A scatterplot of 800 points uses a horizontal brush to highlight selections in red. Clicking the background recenters the brush around the cursor, using `d3.brushX` with a fixed width, while a `brushended` handler snaps the brush extent to integer values on the x-axis via `Math.round` and `brush.move`. The SVG rendering uses `d3.scaleLinear` for axes and a transition animation on brush movement.

Mmbostock
63% match
Loading thumbnail…

Gist 6568151

A histogram displays a randomly generated Irwin–Hall distribution of 50 values, showing the count of scores binned into twenty uniform intervals. The chart uses D3’s histogram layout and linear scales to position bars, with axis ticks placed between bars to clarify bin boundaries. Bar counts are labeled above each rectangle, and mouseover events log the original data objects and associated names filtered from the source array. Rendered as SVG using d3.v2, the example demonstrates binning and interactive data binding.

11wheel
63% match
Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9
63% match