Histogram2D

Category: Charts

Live preview

Height against weight

155–160

160–165

165–170

170–175

175–180

180–185

185–190

90–95

85–90

80–85

75–80

70–75

65–70

60–65

55–60

50–55

Row	155–160	160–165	165–170	170–175	175–180	180–185	185–190
90–95	0	0	0	0	0	0	1
85–90	0	0	0	0	0	0	1
80–85	0	0	0	0	0	2	0
75–80	0	0	0	0	1	2	0
70–75	0	0	0	1	4	0	0
65–70	0	0	0	4	1	0	0
60–65	0	0	3	1	0	0	0
55–60	0	1	2	0	0	0	0
50–55	1	1	0	0	0	0	0

Columns bin x (Height (cm)), rows bin y (Weight (kg)), highest y at the top. 26 points in 9 rows by 7 columns; the busiest cell holds 4.

Counts of x,y points in a grid of 2-D bins (the Plotly histogram2d trace), drawn as a heatmap: d3 bin() is run once on x and once on y, the cell count is the number of points that fall in both bins, and the grid is handed to the heatmap atom, so it has the heatmap colour bar, the cell counts printed inside the cells and a hidden data table. The highest y bin is the top row. Use nbinsx and nbinsy for the number of bins (the real count is the nearest round step, as in d3), or leave them out for the Sturges default. At most 20,000 points are used and at most 40 bins per axis, each with a note.

Surfaces

webgoogle-apps-script-webmcp-appsandroid

Degraded on

Surface	Note
pdf	Prints the finished picture; no motion

Fields

Field	Type	Required
x	array (required, numbers, at least 2 usable pairs with y; up to 20,000 used).	required
y	array (required, numbers, same length as x).	required
nbinsx	integer (optional, 3 to 40, the bin count asked of d3 for x; default Sturges).	optional
nbinsy	integer (optional, 3 to 40, the bin count asked of d3 for y; default Sturges).	optional
title	string (optional, max 80).	optional
x_label	string (optional, max 40, named in the note under the grid).	optional
y_label	string (optional, max 40, named in the note under the grid).	optional
scale	string (optional, a heatmap colour scale name such as Blues, Viridis or YlOrRd; default YlGnBu, light for few points and dark for many).	optional
show_values	boolean (optional, default true, prints each count in its cell).	optional
show_colorbar	boolean (optional, default true).	optional
version	integer (optional, default 1; a higher number draws as version 1 with a muted note).	optional

Example payload

{
  "type": "histogram2d",
  "x": 1,
  "y": 1
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:histogram2d",
  "displayName": "Histogram2D",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/histogram2d/",
  "capabilities": [
    "web",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "Counts of x,y points in a grid of 2-D bins (the Plotly histogram2d trace), drawn as a heatmap: d3 bin() is run once on x and once on y, the cell count is the number of points that fall in both bins, and the grid is handed to the heatmap atom, so it has the heatmap colour bar, the cell counts printed inside the cells and a hidden data table. The highest y bin is the top row. Use nbinsx and nbinsy for the number of bins (the real count is the nearest round step, as in d3), or leave them out for the Sturges default. At most 20,000 points are used and at most 40 bins per axis, each with a note.",
  "representativeQueries": [
    "show a histogram2d: x,y points counted into a 2-D bin grid, drawn as a heatmap",
    "counts of x,y points in a grid of 2-d bins (the plotly histogram2d trace), drawn as a heatmap: d3 bi",
    "render a histogram2d"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy

Full deploy guide →