ProControls — Documentation

New here? See the Getting Started page for HTML setup, script tags, a minimal sketch, and the common options table.

Displays VUMeter VUDial LEDMeter ADSRDisplay Markup ConsolePanel TimeGraphPanel StatusPanel ListView GridView HeatMapView

Displays

Read-only meters and animated displays driven by assigning .value each frame, plus interactive data views (ListView, GridView, HeatMapView) for browsing and selecting structured data.

VUMeter Display

Extends AnalogSlider. Overlays a segmented LED column (green → yellow → red) with peak hold on top of the fader track. Drive it each frame by assigning .value from audio analysis.

new VUMeter(opts)

Inherits all AnalogSlider options. Defaults overridden: readout: 'db', showScale: false, min: 0, max: 1.

Additional options

Option	Type	Default	Description
segCount	number	20	Number of LED segments.
meterWidth	number	8	Pixel width of the LED column.
colorLow	string	'#00cc44'	Segment color for the lower 60%.
colorMid	string	'#cccc00'	Segment color for 60–85%.
colorHigh	string	'#cc2200'	Segment color for the top 15%.
showFader	boolean	true	`false` = hide the fader cap entirely for a pure display meter.

Example

editable — changes update the preview

const vu = new VUMeter({
  x: 23, y: 35,
  width: 44, height: 180,
  label: 'L',
  showFader: false,
  segCount: 24, meterWidth: 12,
});
// .value is driven automatically in this preview

VUDial Display

Extends Dial. Replaces the filled arc with a ring of segmented LEDs with peak hold. Use showKnob: false for a pure meter ring, or true to show both the set position and the live level.

new VUDial(opts)

Inherits all Dial options. Defaults overridden: readout: 'db', showScale: false, min: 0, max: 1.

Additional options

Option	Type	Default	Description
segCount	number	24	Number of LED arc segments.
colorLow	string	'#00cc44'	Color for the lower 60%.
colorMid	string	'#cccc00'	Color for 60–85%.
colorHigh	string	'#cc2200'	Color for the top 15%.
showKnob	boolean	true	`false` = pure LED ring with no knob body.

Example

editable — changes update the preview

const vuDial = new VUDial({
  x: 43, y: 35,
  size: 80,
  label: 'VU',
  showKnob: false,
  segCount: 30,
});
// .value is driven automatically in this preview

LEDMeter Display

A 7-segment numeric display. Segments are drawn as beveled hexagons with a canvas glow. Values are right-aligned; if the number is too wide for the digit slots, all segments show -----. Assign .value each frame.

new LEDMeter(opts)

Options

Option	Type	Default	Description
digits	number	5	Number of digit positions (including sign).
readout	string	'raw'	`'raw'`, `'percent'`, or `'db'`. dB clamps at −99 at min.
decimals	number	2	Decimal places. The dot is drawn in the gap between digits — no extra slot needed.
digitW	number	14	Width of each digit character in pixels.
digitH	number	26	Height of each digit. Segment thickness scales with this.
digitGap	number	4	Gap between digits. Decimal point is centered here.
ledColor	string	null	LED color. `null` uses `theme.capIndicator`.

Example

editable — changes update the preview

const display = new LEDMeter({
  x: 20, y: 25,
  min: 0, max: 1,
  readout: 'db', decimals: 1, digits: 5,
  label: 'dB',
  ledColor: '#00ff88',
});
// .value is driven automatically in this preview

Panel width = padding×2 + digits×digitW + (digits−1)×digitGap. With defaults a 5-digit meter is 106 px wide.

ADSRDisplay Display

A display-only ADSR envelope graph inside a beveled panel. The envelope shape updates live whenever any property changes — pair it with dials or sliders to visualise synth parameters in real time.

new ADSRDisplay(opts)

Options

Option	Type	Default	Description
x, y	number	0	Top-left position of the panel.
width	number	220	Panel width in pixels.
height	number	120	Panel height in pixels.
attack	number	0.1	Attack time — any consistent unit (seconds, ms, etc.). Relative to decay and release.
decay	number	0.2	Decay time.
sustain	number	0.7	Sustain amplitude level, 0–1.
release	number	0.3	Release time.
envelopeColor	string	null	Line and fill tint. `null` uses `theme.capIndicator`.
label	string	''	Label drawn below the panel.
theme	object	{}	Partial theme override. See Themes.

Visual layout

Attack, Decay, and Release are displayed proportionally across 70% of the plot width. The sustain hold occupies the remaining 30% as a fixed visual segment. A, D, S, R labels appear below each segment; dashed dividers mark the phase boundaries.

Example

editable — changes update the preview

const env = new ADSRDisplay({
  x: 20, y: 22,
  width: 220, height: 120,
  attack: 0.1, decay: 0.2,
  sustain: 0.7, release: 0.4,
  label: 'ENV',
});

Markup Display

A scrollable text panel that renders a subset of Wiki Markup syntax — headings, bold, italic, bullet and numbered lists, indented blocks, horizontal rules, and links. Set text at any time to update the content; the panel re-parses and scrolls to the top automatically.

new Markup(opts)

Options

Option	Type	Default	Description
x, y	number	0	Top-left position of the panel.
width	number	280	Panel width in pixels.
height	number	200	Panel height (visible viewport) in pixels.
text	string	''	Wiki Markup source. Can be set at any time.
fontSize	number	12	Base font size in pixels. Headings scale relative to this.
padding	number	10	Inner padding on all sides.
lineSpacing	number	1.5	Line-height multiplier applied to `fontSize`.
onClick	function	null	`onClick(url[, control])` — called on any click. `url` is the link's URL string when a link is clicked, or `null` when clicking non-link text.
theme	object	{}	Partial theme override. See Themes.

Properties

Property	Type	Description
text	string (get/set)	Current markup source. Setting resets scroll to top.
scrollY	number (get/set)	Current vertical scroll offset in pixels. Clamped to valid range automatically.

Wiki Markup syntax

Syntax	Renders as
`= Heading 1 =`	Large heading with underline rule
`== Heading 2 ==`	Medium heading
`=== Heading 3 ===`	Small heading
`'''bold'''`	Bold text
`''italic''`	Italic text
`'''''bold italic'''''`	*Bold italic* text
`[[label]]` or `[[url\|label]]`	Link text (rendered in accent color)
`* item`	Bullet list item
`** item`	Sub-bullet list item
`# item`	Numbered list item
`## item`	Sub-numbered list item
`: text`	Indented block with left bar
`----`	Horizontal rule
(blank line)	Paragraph gap

Scrolling

When content is taller than the panel, a thin scrollbar appears on the right edge. Scroll with the mouse wheel while hovering the panel. Set scrollY programmatically to jump to any position.

Example

editable — changes update the preview

const doc = new Markup({
  x: 20, y: 15,
  width: 240, height: 190,
  fontSize: 11,
  text: `= ProControls =
A hardware-inspired UI library for [[https://p5js.org|p5.js]].

== Features ==
* '''Real-time''' audio controls
* '''8 built-in''' themes
** black, stainless, white, brushed
** red, blue, yellow, dimpled

== Usage ==
# Add the script tag
# Call ''new AnalogSlider()''
# Wire up '''onChange'''

----
: '''''Scroll for more'''''
This panel supports '''bold''', ''italic'', and '''''bold italic''''' text inline with normal paragraphs. Long lines wrap automatically within the panel width.\`,
  onClick: (href) => {
    if (href) window.open(href, '_blank');
  },
});

ConsolePanel Display

A floating, scrollable log panel that intercepts console.log, console.warn, console.error, and console.info calls as well as uncaught runtime errors and unhandled promise rejections. Messages are color-coded by type, timestamped, and always auto-scroll so the most recently added line is visible at the bottom. Consecutive identical messages (same type and text) are collapsed into a single entry showing the repeat count and the most recent timestamp — e.g. [12:04:31 ×5] redraw tick. A CLR button clears the log; a −/+ toggle minimizes the panel to just its title bar. The panel is movable, resizable, and minimizable by default.

new ConsolePanel(opts)

Options

Option	Type	Default	Description
x, y	number	20, 20	Canvas position of the panel's top-left corner.
width	number	400	Panel width in pixels.
height	number	200	Panel height in pixels.
label	string	'Console'	Text shown in the title bar.
movable	boolean	true	When `false` the panel cannot be repositioned by dragging.
resizable	boolean	true	A resize grip appears in the bottom-right corner; drag it to resize the panel at runtime.
minimizable	boolean	true	A −/+ toggle button appears in the title bar; clicking it collapses the panel to just the title bar.
minimized	boolean	false	Initial minimized state.
maxMessages	number	100	Maximum number of messages retained. Oldest messages are dropped when the buffer is full.
timestamps	boolean	true	Prefix each message with a `[HH:MM:SS]` timestamp. Set to `false` to suppress.
intercept	string[]	`['log','warn','error','info']`	The `console` methods to intercept. Pass a subset to limit capture, e.g. `['error','warn']`.
theme	object	{}	Partial theme override. See Themes.

Properties & methods

Name	Description
`.clear()`	Clears all messages and resets scroll. Same as clicking the CLR button.
`.messages`	Read-only getter. Returns a shallow copy of the message array. Each entry is `{ type, text, time, count }`; `count` is ≥ 1 when consecutive identical messages have been collapsed.
`.remove()`	Removes the panel and restores all intercepted `console` methods to their originals.
`.minimized`	Get/set. When `true` the panel collapses to just the title bar.
`.label`	Read/write. Text shown in the title bar.
`.resizable`	Read/write. Enables or disables the resize grip at runtime.
`.minimizable`	Read/write. Shows or hides the minimize toggle button.
`.movable`	Read/write. Enables or disables title-bar dragging at runtime.

Global helpers

For quick use, two standalone functions manage a single shared ConsolePanel without you needing to hold a reference to it. The panel is created the first time openConsolePanel() is called and reused on every subsequent call — the log history is preserved across open/close cycles.

Function	Description
`openConsolePanel(opts?)`	Creates the global ConsolePanel on the first call, passing any ConsolePanel options you like (`label`, `width`, `resizable`, etc.). On every subsequent call it simply makes the panel visible again — `opts` is ignored after the panel already exists. Returns the ConsolePanel instance.
`closeConsolePanel()`	Hides the panel (`visible = false`). The object and all its log data are preserved — calling `openConsolePanel()` again brings it back exactly as it was.

editable — changes update the preview

// Open (or show) the shared panel
openConsolePanel();

console.log('Panel created once');
console.warn('Reused on every open call');

// Later — hide without losing data:
// closeConsolePanel();
// openConsolePanel(); // brings it back

Message colors

Source	Color
`console.log`	Theme label color (default text)
`console.info`	Theme accent / indicator color
`console.warn`	Amber `#cc8800`
`console.error` / uncaught errors	Red `#dd3333`

Interaction

Gesture	Effect
Drag title bar	Repositions the panel (when `movable` is `true`).
Click −/+ button	Minimizes or restores the panel (when `minimizable` is `true`).
Scroll wheel	Scrolls the message log. The next incoming message will always snap back to the bottom.
Drag scrollbar	Scrolls by dragging the thin scrollbar on the right edge (visible when content overflows).
Click CLR button	Clears all messages.
Drag resize grip	Resizes the panel from the bottom-right corner (when `resizable` is `true`).

Console passthrough: intercepted methods still call the original browser console functions, so DevTools output is unaffected. Call .remove() to fully restore the originals.

Example

editable — changes update the preview

openConsolePanel();

// Any console.log / warn / error appears in the panel:
console.log('Sketch started');
console.warn('Low memory');
console.error('Something went wrong');
// Repeated identical calls are collapsed:
for (let i = 0; i < 5; i++) console.log('redraw tick');

TimeGraphPanel Display

A scrolling time-series line graph panel. Push data points each frame to plot them against time — the oldest point scrolls off the left edge as new ones arrive on the right. Pass a plain number to plot a single variable, or an object ({key: value, …}) to plot multiple named variables simultaneously, each drawn in its own color with a legend. Y-axis range is auto-scaled to the data with 8% padding, or fixed by setting min and max. The panel is movable, resizable, and minimizable by default.

new TimeGraphPanel(opts)

Options

Option	Type	Default	Description
x, y	number	20, 20	Canvas position of the panel's top-left corner.
width	number	360	Panel width in pixels.
height	number	200	Panel height in pixels.
label	string	'Time Graph'	Text shown in the title bar.
maxSamples	number	200	Maximum number of data points retained. Oldest points are discarded when the buffer is full.
autoAdjustY	boolean	true	Automatically fit the Y axis to the min/max of the data currently in the buffer. Set to `false` to use fixed `min`/`max` bounds instead.
min	number	0	Fixed Y-axis minimum. Only used when `autoAdjustY` is `false`.
max	number	1	Fixed Y-axis maximum. Only used when `autoAdjustY` is `false`.
lineWidth	number	1.5	Stroke weight for data lines in pixels.
grid	boolean	true	Show horizontal grid lines at 25%, 50%, and 75% of the Y range.
legend	boolean	true	Show a color legend in the top-right corner of the plot (only visible when graphing multiple variables).
movable	boolean	true	Allow repositioning by dragging the title bar.
resizable	boolean	true	Show a resize grip in the bottom-right corner.
minimizable	boolean	true	Show a −/+ toggle button to collapse the panel to just the title bar.
minimized	boolean	false	Initial minimized state.
theme	object	{}	Partial theme override. See Themes.

Properties & methods

Name	Description
`.push(value)`	Add a data point. Pass a `number` for single-variable mode, or a plain object (`{key: value, …}`) for multi-variable mode. To supply a custom timestamp, include a `time` field (in seconds): `push({time: 5.2, value: 42})` for single-variable or `push({time: 5.2, key1: 42, key2: 99})` for multi-variable. Without a `time` field the current wall-clock time is used. Switching between modes resets the data buffer.
`.clear()`	Remove all data points and reset variable tracking.
`.autoAdjustY`	Get or set whether the Y axis auto-fits to the data range (`true`) or uses fixed bounds (`false`).
`.data`	Read-only getter. Returns a shallow copy of the current data array.
`.minimized`	Get/set. Collapses the panel to just the title bar when `true`.
`.visible`	Get/set. Hides the panel and suppresses events when `false`.

Example — single variable

const g = new TimeGraphPanel({
  x: 20, y: 18,
  width: 280, height: 160,
  label: 'Amplitude',
  min: -1, max: 1,
});

// Call g.push() inside draw() to feed live data:
// g.push(sin(frameCount * 0.05));

Example — multiple variables

const g = new TimeGraphPanel({
  x: 20, y: 18,
  width: 280, height: 160,
  label: 'Sensors',
});

// Pass an object to plot named variables together:
// g.push({ rpm: 3400, temp: 85, load: 0.72 });

Example — custom timestamps

const g = new TimeGraphPanel({
  x: 20, y: 18,
  width: 280, height: 160,
  label: 'Custom timestamps',
  min: -1, max: 1,
});

// Add a 'time' field (seconds) to place each point at an exact X position.
// Useful for replaying logged data or graphing sporadic events:
// g.push({ time: 2.5, value: 0.8 });
// g.push({ time: 5.0, key1: 0.4, key2: -0.3 }); // multi-variable

StatusPanel Display

A compact real-time metrics display showing frame rate, frame time, control count, and JavaScript heap memory usage. Designed for performance monitoring during development and debugging. By default anchors to the bottom of the canvas; provide x and y to position it manually. Visible only when you explicitly create it — useful for identifying bottlenecks or checking that control interactions aren't dragging down frame rate.

new StatusPanel(opts)

Options

Option	Type	Default	Description
x, y	number	auto	Canvas position. When both are omitted, the panel anchors to the bottom-left of the canvas and resizes with it. Provide both to position manually.
width	number	auto	Panel width in pixels. When using auto-positioning, defaults to canvas width.
height	number	24	Panel height in pixels. A minimal bar showing all metrics.
visible	boolean	true	Initial visibility. Set to `false` to hide the panel; toggle with `panel.visible = true/false`.

Properties & methods

Name	Description
`.visible`	Get/set panel visibility. When `false` the panel and all its metrics stop updating.
`.width`	Panel width in pixels. Auto-updated when auto-positioning is active and canvas is resized.
`.height`	Panel height in pixels — read-only in this version.

Displayed metrics

FPS — Current frames per second (rounded to one decimal place).
Δt — Average frame time in milliseconds. Turns red when exceeding ~16.67ms (60 FPS baseline). Useful for spotting frame drops.
Controls — Total count of all ProControls in the sketch, including children nested inside Panels.
Heap — JavaScript heap memory usage in MB (only shown on browsers that support performance.memory).

Example — default position (bottom of canvas)

// Auto-positioned at the bottom — will resize with canvas
const status = new StatusPanel({
  // x, y omitted — anchors to bottom-left
});

// Create some controls to see the count increment
new Dial({ x: 50, y: 50, size: 50, label: 'Freq' });
new AnalogSlider({ x: 150, y: 50, width: 40, height: 150, label: 'Gain' });

Example — manual position

// Position manually
const status = new StatusPanel({
  x: 20, y: 20,
  width: 200, height: 24,
});

// Can hide/show at runtime
// status.visible = false;

Tips

StatusPanel does not participate in event handling — it's purely informational.
Frame time (Δt) varies slightly frame-to-frame. A sustained red warning means your draw() loop or event handlers are doing heavy work.
Disable the panel during performance testing to avoid the overhead of rendering its own text — set status.visible = false.
Heap memory grows as you create more controls; it resets when you reload the page.

ListView Display

Scrollable list of strings with row selection. Click to select rows; use the mouse wheel or scrollbar to navigate long lists.

new ListView(opts)

Options

Option	Type	Default	Description
x, y	number	0, 0	Canvas position of the panel's top-left corner.
width	number	280	Panel width in pixels.
height	number	200	Panel height in pixels.
fontSize	number	12	Text size in pixels. Row height is computed as `fontSize × 1.6`.
padding	number	8	Padding from the panel edges in pixels.
items	array	[]	Array of strings to display. Trigger re-render by reassigning (e.g., `lv.items = newList`).
onSelect	function	null	`onSelect({item, index}[, control])` — called when a row is clicked.
onRelease	function	null	`onRelease({item, index}[, control])` — called on mouse/touch release after a row click.

Properties

Property	Description
`.items`	Get/set the array of strings. Resets scroll and selection when assigned.
`.selectedIdx`	Get/set the index of the selected row (−1 = none). Clamped to valid range and scrolls into view.
`.scrollY`	Get/set the vertical scroll offset in pixels. Automatically clamped to the valid range.

Interaction

Gesture	Effect
Click	Select the row under the mouse. Fires `onSelect` callback.
Hover	Highlight the row under the mouse with a subtle tint.
Mouse wheel	Scroll vertically. Scrollbar appears when content overflows the panel height.
Scrollbar drag	Drag the scrollbar thumb to navigate quickly.

Example

const lv = new ListView({
  x: 20, y: 15,
  width: 240, height: 160,
  items: ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta', 'Theta'],
  onSelect: ({item, index}) => console.log('selected:', index, item),
});

GridView Display

Scrollable table with column headers and auto-sized columns. Row selection on click; vertical scroll with the mouse wheel; horizontal scroll via the bottom scrollbar when content is wider than the panel.

new GridView(opts)

Options

Option	Type	Default	Description
x, y	number	0, 0	Canvas position of the panel's top-left corner.
width	number	400	Panel width in pixels.
height	number	220	Panel height in pixels.
fontSize	number	12	Text size in pixels. Header height is `fontSize × 1.8`; row height is `fontSize × 1.6`.
padding	number	8	Padding from the panel edges and between cells in pixels.
items	array	[]	Array of objects. All items must have the same keys. Column names and widths are derived from the first object. Assign to trigger re-render.
onSelect	function	null	`onSelect({item, index}[, control])` — called when a row is clicked. `item` is the row object.
onRelease	function	null	`onRelease({item, index}[, control])` — called on mouse/touch release after a row click.

Features

Auto-sized columns: Each column width is computed from the header text and all cell values, with padding applied.
Static header: The header row stays pinned at the top and does not scroll vertically with the data.
Horizontal scrolling: When the total width of all columns exceeds the panel width, a horizontal scrollbar appears at the bottom.
Row selection: Click a row to select it (highlighted with a tinted background). The onSelect callback fires with the item and index.

Properties

Property	Description
`.items`	Get/set the array of objects. Resets scroll and selection when assigned. Column widths are recomputed on first draw.
`.selectedIdx`	Get/set the index of the selected row (−1 = none). Clamped to valid range and scrolls into view.
`.scrollY`	Get/set the vertical scroll offset in pixels. Automatically clamped to the valid range.
`.scrollX`	Get/set the horizontal scroll offset in pixels. Automatically clamped to the valid range.

Interaction

Gesture	Effect
Click	Select the row under the mouse. Fires `onSelect` callback.
Hover	Highlight the row under the mouse with a subtle tint.
Mouse wheel	Scroll vertically (main data rows). The header stays fixed.
Vertical scrollbar	Drag to scroll rows up/down. Appears on the right when data overflows vertically.
Horizontal scrollbar	Drag to scroll columns left/right. Appears at the bottom when data overflows horizontally. The header scrolls in sync.

Example

const gv = new GridView({
  x: 10, y: 10,
  width: 380, height: 200,
  items: [
    { name: 'Alpha',   type: 'sine',   freq: 440 },
    { name: 'Beta',    type: 'square', freq: 220 },
    { name: 'Gamma',   type: 'saw',    freq: 880 },
    { name: 'Delta',   type: 'noise',  freq: 110 },
  ],
  onSelect: ({item, index}) => console.log('selected row', index, item.name),
});

HeatMapView Display

Multidimensional treemap with drill-down navigation. Visualize hierarchical data by grouping and summing a numeric field across dimension levels. Cell size is driven by areaMetric. An optional colorMetric maps a second field to a color gradient (e.g. red → gray → green for negative / flat / positive change). Click cells to explore deeper levels; use breadcrumbs or right-click to navigate back.

new HeatMapView(opts)

Options

Option	Type	Default	Description
x, y	number	0, 0	Canvas position of the panel's top-left corner.
width	number	400	Panel width in pixels.
height	number	280	Panel height in pixels.
fontSize	number	12	Text size in pixels. Breadcrumb height is `fontSize × 1.8`.
padding	number	8	Padding from the panel edges in pixels.
fields	array	[]	Array of field names defining the drill-down hierarchy. E.g., `['product', 'brand', 'trim']`.
areaMetric	string	null	Field to sum for cell sizing. E.g., `'quantity'` or `'revenue'`. (`valueField` is accepted as an alias for backwards compatibility.)
colorMetric	string	null	Optional field to sum for cell color. Values are mapped across `colorRange` — useful for showing change or performance alongside size.
colorRange	string[]	null	Color stops for the `colorMetric` gradient. Any number of CSS color strings, lerped between stops. E.g., `['red','gray','green']` maps min → red, midpoint → gray, max → green.
items	array	[]	Array of objects with keys matching `fields`, `areaMetric`, and optionally `colorMetric`. Trigger re-render by reassigning (e.g., `hm.items = newData`).
onSelect	function	null	`onSelect({path, value, items}[, control])` — called when clicking a leaf-level cell. `path` is an array of values drilled to, `value` is the sum, `items` are matching raw rows.

Properties

Property	Description
`.items`	Get/set the array of data objects. Resets drill path and all state when assigned.

Interaction

Gesture	Effect
Click cell	If not at the deepest level, drill down to show sub-groups. If at deepest level, select the cell and fire `onSelect` callback.
Right-click	Pop back one drill level. Disabled at root level.
Click breadcrumb	Jump directly to any drill depth (e.g., click "cars" in "All › cars › ford" to jump back to the product level).
Hover	Cell borders highlight with `theme.hoverGlow`. Selected cells show `theme.capIndicator` border.

Example

const portfolio = [
  {sector:'Technology', stock:'AAPL', value:3000, change:  5},
  {sector:'Technology', stock:'MSFT', value:2800, change: -2},
  {sector:'Technology', stock:'NVDA', value:1500, change: 18},
  {sector:'Energy',     stock:'XOM',  value: 450, change: -9},
  {sector:'Energy',     stock:'CVX',  value: 300, change:-14},
  {sector:'Energy',     stock:'COP',  value: 150, change: -6},
  {sector:'Healthcare', stock:'JNJ',  value: 500, change:  2},
  {sector:'Healthcare', stock:'PFE',  value: 350, change: -7},
  {sector:'Finance',    stock:'JPM',  value: 600, change:  5},
  {sector:'Finance',    stock:'GS',   value: 280, change:  8},
];

const hm = new HeatMapView({
  x: 20, y: 15,
  width: 360, height: 260,
  fields: ['sector', 'stock'],
  areaMetric:  'value',
  colorMetric: 'change',
  colorRange:  ['red', 'gray', 'green'],
  items: portfolio,
  label: 'Portfolio by Sector',
  onSelect: ({path, value}) => console.log(path.join(' > '), value),
});

Dow Jones Market Cap Example

Explore market data organized by industry sector and company:

const dowJonesData = [
  { industry: 'Technology', company: 'NVIDIA', quantity: 5472364760000 },
  { industry: 'Technology', company: 'Apple', quantity: 4510682158630 },
  { industry: 'Technology', company: 'Microsoft', quantity: 3428571400000 },
  { industry: 'Consumer Discretionary', company: 'Amazon', quantity: 2840941240000 },
  { industry: 'Consumer Staples', company: 'Walmart', quantity: 916685400000 },
  { industry: 'Financials', company: 'JPMorgan Chase', quantity: 820814808000 },
  { industry: 'Financials', company: 'Visa', quantity: 661678500000 },
  { industry: 'Healthcare', company: 'Johnson & Johnson', quantity: 546526652000 },
  { industry: 'Technology', company: 'Cisco', quantity: 483136060000 },
  { industry: 'Industrials', company: 'Caterpillar', quantity: 403084688000 },
  { industry: 'Energy', company: 'Chevron', quantity: 369039797000 },
  { industry: 'Healthcare', company: 'UnitedHealth Group', quantity: 345672600000 },
  { industry: 'Consumer Staples', company: 'Coca-Cola', quantity: 339252960000 },
  { industry: 'Consumer Staples', company: 'Procter & Gamble', quantity: 326655864634 },
  { industry: 'Financials', company: 'Goldman Sachs', quantity: 322962640000 },
  { industry: 'Consumer Discretionary', company: 'Home Depot', quantity: 309447240000 },
  { industry: 'Technology', company: 'IBM', quantity: 305081833284 },
  { industry: 'Healthcare', company: 'Merck', quantity: 284449677876 },
  { industry: 'Financials', company: 'American Express', quantity: 215088440000 },
  { industry: 'Communication Services', company: 'Verizon', quantity: 200943300000 },
  { industry: 'Consumer Discretionary', company: "McDonald's", quantity: 197004485000 },
  { industry: 'Technology', company: 'Salesforce', quantity: 182561600000 },
  { industry: 'Communication Services', company: 'Walt Disney', quantity: 182250200000 },
  { industry: 'Healthcare', company: 'Amgen', quantity: 179046720000 },
  { industry: 'Industrials', company: 'Boeing', quantity: 176816212843 },
  { industry: 'Industrials', company: 'Honeywell', quantity: 149884308768 },
  { industry: 'Industrials', company: '3M', quantity: 79857063000 },
  { industry: 'Materials', company: 'Sherwin-Williams', quantity: 73154766000 },
  { industry: 'Consumer Discretionary', company: 'Nike', quantity: 68049888000 },
  { industry: 'Financials', company: 'Travelers', quantity: 63102312000 }
];

const hm = new HeatMapView({
  x: 20, y: 15,
  width: 360, height: 260,
  fields: ['industry', 'company'],
  areaMetric: 'quantity',
  items: dowJonesData,
  label: 'Market Cap by Sector',
  onSelect: ({path, value, items}) => console.log(path.join(' > '), '$' + (value / 1e12).toFixed(1) + 'T'),
});