Multivariate binning II

100%

Multivariate binning II

✓ Published0🌍 Public

Last edited Mar 1, 2017

Created on Mar 1, 2017

Four synthetic datasets are aggregated with d3.hexbin and compared across six small multiples, each showing the same spatial bins in a different visual encoding: colored scatter dots, grouped bar charts, pie charts, radial arcs, and two polar variants. Each bin’s composition by class is rendered as proportional wedges or bars using d3.svg.arc and d3.layout.pie. The SVG output uses d3.scale.category10 for class colors and lodash for data manipulation.

AI-generated description

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/32893c305aa87a65129a'>Multivariate binning II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Hexagonal Binning in d3v4

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.

PPhilippe Rivière

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

76% match

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

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

75% match

Loading thumbnail…

Gist 4265880

This example demonstrates hexagonal binning of 2,000 normally distributed random points. The color of each hexagon encodes the number of points within that bin, transitioning from white to steelblue across a linear color scale. Built with the d3.hexbin plugin, the visualization renders as an SVG composed of hexagonal paths. The code constructs the color mapping using d3.scale.linear with Lab interpolation and uses d3.svg.axis to add coordinate axes.

TThanad

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

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

74% match

Loading thumbnail…

2d to 1d binned chart

This interactive visualization lets viewers collapse a two-dimensional scatterplot of nine colored circles into one-dimensional histograms along either the x-axis or y-axis, or retain the full 2D layout. Buttons trigger animated transitions where circles bounce into their respective bins, which are delimited by dashed reference lines. The code uses d3.v4’s SVG rendering, `d3.scaleQuantize` for positioning, and `d3.histogram` to bin data by chosen coordinates. A custom `transition` with `d3.easeBounceOut` and 500–750ms durations animates the morph, while `d3.scaleOrdinal` assigns distinct fill colors to each point.

PPatrick Wojda

73% match