Hexagonal Binning in d3v4

100%

Hexagonal Binning in d3v4

✓ Published0🌍 Public

Last edited Jul 2, 2016

Created on Jun 29, 2016

Hexagonal binning visualizes 2,000 normally distributed random points by grouping them into uniform hexagons. The color of each hexagon encodes the count of points falling within it, transitioning from white to steel blue through a linear color scale. The visualization uses the d3.hexbin plugin to compute bin positions and the hexagon path, while d3.scaleLinear with interpolateLab drives the color mapping. Axes are generated with d3.axisBottom and d3.axisLeft on an SVG canvas.

AI-generated description

This example shows how to use the d3.hexbin plugin for hexagonal binning. 2,000 random points with a normal distribution are binned into hexagons; color encodes the number of points that fall into each bin. You can also use area encoding. Inspired by earlier work by Zachary Forest Johnson.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4248145'>Hexagonal Binning</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Hexagonal Binning (Color)

This visualization uses hexagonal binning to show the distribution of 2,000 randomly generated points with a normal distribution. The d3-hexbin plugin aggregates points into hexagons, and a sequential color scale from white to steelblue encodes the number of points within each bin, with denser areas appearing darker. The SVG rendering includes clipped hexagon shapes and axes generated with d3.axisLeft and d3.axisBottom. The code draws on d3.randomNormal for data generation and d3.scaleSequential for color mapping.

Mmbostock

93% match

Loading thumbnail…

Hexagonal Binning (Area) d3v4

A hexagonal binning visualization renders 2,000 randomly generated points from a normal distribution into hexagons of varying size. The area of each hexagon encodes the number of points falling within it, using a square-root scale to map bin counts to hexagon radii. The example uses the d3.hexbin plugin to group points, with SVG paths drawn for each hexagon and clipped to the plot area. Axes are generated using d3.axisBottom and d3.axisLeft, while the random point distribution relies on d3.randomNormal.

PPhilippe Rivière

92% match

Loading thumbnail…

Hexagonal Binning

This example demonstrates hexagonal binning, aggregating 10,000 randomly generated points from `d3.randomNormal` into a grid of hexagons using the `d3-hexbin` plugin for D3 4.0. Each hexagon’s fill color reflects the local point density via a sequential `d3.scaleSequential` with the `d3.interpolateMagma` color scheme. The SVG rendering includes white hexagon strokes for visual separation, plus top and left axes built with `d3.axisTop` and `d3.axisLeft` on identity scales.

Mmbostock

88% match

Loading thumbnail…

Hexagonal Binning (Area)

Two thousand normally distributed random points are aggregated into hexagonal bins, where the area of each hexagon encodes the number of points it contains. The visualization uses the `d3-hexbin` plugin’s `d3.hexbin()` to bin the data and `hexbin.hexagon()` to generate the SVG path for each bin, with `d3.scaleSqrt` mapping bin counts to radius. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the rendering is clipped to the plotting area via an SVG `clipPath`.

Mmbostock

87% match

Loading thumbnail…

Dynamic Hexbin

Two thousand points sampled from a normal distribution drift in a circular path as the distribution’s center moves over time. A dynamic hexbin grid aggregates the points, with each hexagon’s fill color mapped sequentially from white to steelblue based on the number of points it contains. Built with D3 v4 and the d3-hexbin plugin, the animation uses d3.randomNormal to regenerate twenty points per frame and d3.timer to update the SVG paths continuously.

Mmbostock

84% match

Loading thumbnail…

Untitled

This example demonstrates hexagonal binning for aggregated scatterplot data, using color intensity to encode point density within each hexagon. It loads a CSV from GitHub and maps two numeric fields (F3 and F4) to linear x and y scales. The visualization uses the d3.hexbin plugin to compute bin geometry, with an axis and clip path drawn via d3.svg. A linear color scale transitions from transparent to teal based on bin count, and each hexagon is rendered as an SVG path with a thin black stroke.

HHariprashanth75

84% match

Loading thumbnail…

hexbinchart

This example visualizes a label matrix from an orthographic image as a hexbin chart, using color to distinguish between eight different categorical labels. The code loads data from a CSV file, maps each cell’s label to a color using `d3.scaleOrdinal`, and partitions the points with the `d3.hexbin` API. The SVG output renders hexagonal bins clipped to the chart area, with each bin’s fill determined by the dominant label value, producing a gridded heatmap-like representation of the underlying image data.

Sscheenmi@gmail.com

80% match

Loading thumbnail…

hex-circle

The visualization shows six identical steelblue circles arranged symmetrically around the center of a square SVG canvas, each rotated 60 degrees apart from its neighbor. The code uses D3 v3 to append a group element for each of the six points, applying a rotation transform based on the index and a fixed translation of 100 pixels outward. Each group then contains a single circle with a radius of 10 pixels. The rendering relies on SVG’s `rotate` and `translate` transforms to position the circles in a hexagonal pattern, with no data beyond the integer range 0–5.

11wheel

74% match