Andrew Mollica armollica

Decomposing an image's color information. Click an image to see it decomposed.

Pixels have been grouped by hue, saturation and lightness into discrete bins. Lightness is plotted on the x-axis, saturation on the y-axis and hue is displayed directly in the cells formed by the intersection of the other two. Each cell's size is determined by the frequency of pixels in that intersection. Treemaps are used to show the relative frequency of the various hues within each cell.

See this block for an alternative design using circle packing instead of treemaps.

Images source: National Gallery of Art's Highlights

Decomposing an image's color information. Click an image to see it decomposed.

Alternative design to this block using circle packing instead of treemaps.

Images source: National Gallery of Art's Highlights

Display labels for points close to the mouse cursor. Could be used to display multiple tooltips, etc.

Uses k-nearest-neighbors algorithm from this block by llb4ll. Check the box to see the underlying quadtree (red points are the nearest points, orange are those that were searched but found to be not among the nearest).

Scatterplot using axes that I saw in one of Edward Tufte's books. I can't remember which (maybe this one).

The axes are pretty pared down but provide basic distributional information of the data. The 1st and 4th quartiles are indicated by the outer lines and the 2nd and 3rd by the inner lines. The gap is the median.

Hovering allows you to see the actual value of a given point. Uses an invisible Voronoi tessellation to make point selection nicer (inspired by this block).

In-browser GIS buffer via turf.js