2c:null 2d:["$","title",null,{"children":"Hexbin Transform / Observable Plot | Observable | Observable"}] 32:T417,Each binned output channel (the keys of the object passed as the first argument to the hexbin transform) has an associated reducer which controls how the summary value for each group is derived. A variety of built-in reducers are provided: * *count* - the number of observations in each group * *sum* - the sum of values * *proportion* - like *sum*, but divided by the total * *proportion-facet* - like *sum*, but divided by the facet’s total * *min* - the minimum value * *max* - the maximum value * *mean* - the mean (average) value * *median* - the median value * *variance* - an unbiased estimator of [population variance](https://github.com/d3/d3-array/blob/master/README.md#variance) * *deviation* - the [standard deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation) * *first* - the first value (in input order) * *last* - the last value (in input order) You can also implement a custom reducer: this function is repeatedly passed the array of data for each group and should return the corresponding summary value.33:[] 30:{"id":"7b7710dcb513db88","slug":"plot-hexbin","title":"Hexbin Transform / Observable Plot","thumbnail":"1fe95f593aa40f969b2be9b86aa4c5c2cd7e6435ac895ffc09fd885ee4f7e8bf","access_level":"public","create_time":"$D2022-05-27T09:59:20.513Z","update_time":"$D2023-02-07T17:54:36.609Z","view_time":null,"first_public_time":"$D2022-06-08T16:46:42.271Z","has_unpublished_edits":null,"fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports."},"version":782,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"21983a318eb4d0f4","reply_to_id":null,"content":"I think this example looks better with the additional option stroke: \"lightgrey\"","create_time":"$D2022-06-08T19:09:02.423Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Hexbin Transform / Observable Plot","cells":[{"id":0,"value":"

Hexbin Transform / Observable Plot

Observable Plot › Transforms › Hexbin · API

\n\n# Plot: Hexbin\n\nThe **hexbin** transform aggregates two-dimensional points (in *x* and *y*) into discrete hexagonal bins. Like the [bin transform](/@observablehq/plot-bin), you can then compute summary statistics for each bin, such as a count, sum, or proportion. The hexbin transform is most often used to make heatmaps; it is an alternative to dense scatterplots that may suffer from occlusion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"The hexbin transform produces *x* and *y* channels representing the centers of the hexagonal bins. The hexbin transform operates in “screen space” (_i.e._, in pixel coordinates) after the *x* and *y* scales have been applied to the input data. Only hexagons with at least one constituent point are generated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"The hexbin transform is typically paired with the hexagon mark, which is simply the dot mark with the **symbol** option set to _hexagon_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"Plot.plot({\n color: {\n scheme: \"ylgnbu\"\n },\n marks: [\n Plot.hexagon(\n cars,\n Plot.hexbin(\n { fill: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\" }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Above, the _fill_ output channel encodes the number (*count*) of points in each hexagonal bin as a sequential color. The _r_ output channel can be used instead for an areal encoding. When an _r_ output channel is used, the default range of the _r_ scale is set such that the hexagons cannot overlap.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"Plot.plot({\n marks: [\n Plot.hexagon(\n cars,\n Plot.hexbin(\n { r: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\" }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"A redundant encoding can be generated with both _fill_ and _r_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"Plot.plot({\n color: {\n scheme: \"ylgnbu\"\n },\n marks: [\n Plot.hexagon(\n cars,\n Plot.hexbin(\n { r: \"count\", fill: \"count\" },\n {\n x: \"displacement (cc)\",\n y: \"economy (mpg)\",\n stroke: \"black\",\n strokeWidth: 1\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"Alternatively, the _fill_ and _r_ channels can encode independent (or “bivariate”) dimensions of data. Below, the _r_ channel encodes density (the number of cars in each hexagonal bin), while the _fill_ channel encodes the average weight of cars in each bin. As you might expect, weight is positively correlated with engine displacement and inversely correlated with fuel economy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.hexagon(\n cars,\n Plot.hexbin(\n {r: \"count\", fill: \"mean\"},\n {x: \"displacement (cc)\", y: \"economy (mpg)\", fill: \"weight (lb)\"}\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"Given a *z* input channel, the hexbin transform can generate coincident hexagons for separate series. If the *z* channel is not specified, it defaults to the *fill* input channel (if there is no *fill* output channel), or the *stroke* input channel (if there is no *stroke* output channel). Below, cars are categorized by number of cylinders. A few hexagons are coincident, representing cars with similar fuel economy and displacement but a different number of cylinders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"Plot.plot({\n color: {\n type: \"ordinal\",\n scheme: \"spectral\",\n legend: true\n },\n marks: [\n Plot.hexagon(\n cars,\n Plot.hexbin(\n { r: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\", stroke: \"cylinders\" }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"If you pair the hexbin transform with Plot.dot instead of Plot.hexagon, you can set the **symbol** option to something other than _hexagon_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"viewof symbol = Inputs.select([\"circle\", \"hexagon\", \"square\", \"wye\", \"cross\"], {label: \"Symbol\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"Plot.plot({\n marks: [\n Plot.dot(\n cars,\n Plot.hexbin(\n { r: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\", symbol }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"The **binWidth** option specifies the width of the pointy-topped hexagonal bins in pixels—defaults to 20. If an _r_ output channel is not generated, the hexbin transform will product a default **r** option of half the bin width such that hexagons (or circles) are contiguous.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"viewof binWidth = Inputs.range([1, 40], {label: \"Bin width\", step: 1, value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"Plot.plot({\n marks: [\n Plot.dot(\n cars,\n Plot.hexbin(\n { r: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\", binWidth }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"The hexbin layout can be paired with any mark that supports _x_ and _y_ channels. The Plot.text mark is useful for labelling.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"Plot.plot({\n inset: 10,\n color: { scheme: \"ylgnbu\" },\n marks: [\n Plot.hexagon(\n cars,\n Plot.hexbin(\n { fill: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\" }\n )\n ),\n Plot.text(\n cars,\n Plot.hexbin(\n { text: \"count\" },\n {\n x: \"displacement (cc)\",\n y: \"economy (mpg)\",\n fill: \"black\",\n stroke: \"white\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"The Plot.hexgrid decoration mark is the similar to the axis **grid** option: it draws the base hexagonal grid as a mesh. Use the common options (_e.g._, **stroke**) to style it. For consistency, pass the same **binWidth** option to all the marks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"Plot.plot({\n color: { scheme: \"ylgnbu\" },\n marks: [\n Plot.dot(\n cars,\n Plot.hexbin(\n { fill: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\" }\n )\n ),\n Plot.hexgrid()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"Hexbins work best when there is an interesting density of dots in the center of the chart, but sometimes hexagons near the extrema of the _x_ and _y_ domains will appear to “bleed” and cover the axes. To mitigate this, you can use the **inset** option to recenter the data or set the **clip** option to true.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"Plot.plot({\n inset: 10,\n color: { scheme: \"ylgnbu\" },\n marks: [\n Plot.dot(\n cars,\n Plot.hexbin(\n { fill: \"count\" },\n {\n x: \"displacement (cc)\",\n y: \"economy (mpg)\",\n stroke: \"lightgray\",\n strokeWidth: 1\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"Plot.plot({\n color: { scheme: \"ylgnbu\" },\n marks: [\n Plot.dot(\n cars,\n Plot.hexbin(\n { fill: \"count\" },\n { x: \"displacement (cc)\", y: \"economy (mpg)\", clip: true }\n )\n ),\n Plot.hexgrid()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"Since Plot version 0.6.3, you can also draw the axes on top of hexagons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":773,"value":"Plot.plot({\n color: { scheme: \"ylgnbu\" },\n marks: [\n Plot.dot(\n cars,\n Plot.hexbin(\n { fill: \"count\" },\n {\n x: \"displacement (cc)\",\n y: \"economy (mpg)\",\n stroke: \"lightgray\",\n strokeWidth: 1\n }\n )\n ),\n Plot.axisY()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"