Graflume · Alpha

Raster image · Basic implementation · Common features

Build an interactive raster from explicit cell coordinates and RGB values stored as rows. Start with only the required data and family encoding. Expand the code to run the same example. Use the tabs to compare header, tooltip, theme, legend, highlight, callout, selection, view controls, and accessibility one feature at a time.

Chart family · Advanced families

Raster image

Build an interactive raster from explicit cell coordinates and RGB values stored as rows.

Quick API: image()
Browser snapshot: graflume/complete
mark: image
Presets: 1

Basic implementation

The smallest runnable chart

Start with only the required data and family encoding. Expand the code to run the same example.

Basic example

Build an interactive raster from explicit cell coordinates and RGB values stored as rows.

StatusLoading

minimal-implementation

Graflume.image() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Basic example · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Build an interactive raster from explicit cell coordinates and RGB values stored as rows.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Common features

Features shared by every chart

Use the tabs to compare header, tooltip, theme, legend, highlight, callout, selection, view controls, and accessibility one feature at a time. Hover over a data mark. On supported charts, move the pointer along the axis to see the nearest value. All exact values are available in the table below.

Header

Add a chart title and supporting description inside the visualization.

StatusLoading

header

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Header · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Add a chart title and supporting description inside the visualization.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "title": {
    "subtitle": "Raster image uses runnable data and options to demonstrate row RGB/RGBA or explicit color pixels; numeric and band coordinates.",
    "text": "Raster image"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "title": {
    "subtitle": "Raster image uses runnable data and options to demonstrate row RGB/RGBA or explicit color pixels; numeric and band coordinates.",
    "text": "Raster image"
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

StatusLoading

tooltip

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Tooltip · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

Browser API · Portable schema

Browser API

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        },
        {
          "field": "red",
          "format": "number",
          "label": "Red"
        },
        {
          "field": "green",
          "format": "number",
          "label": "Green"
        },
        {
          "field": "blue",
          "format": "number",
          "label": "Blue"
        }
      ],
      "title": "Raster image · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

{
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "x",
          "format": "number",
          "label": "X"
        },
        {
          "field": "y",
          "format": "number",
          "label": "Y"
        },
        {
          "field": "red",
          "format": "number",
          "label": "Red"
        },
        {
          "field": "green",
          "format": "number",
          "label": "Green"
        },
        {
          "field": "blue",
          "format": "number",
          "label": "Blue"
        }
      ],
      "title": "Raster image · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Theme

Apply the current built-in theme from the selector and update every active example together.

StatusLoading

theme

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Theme · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Apply the current built-in theme from the selector and update every active example together.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Legend

Explain the visual meaning of layers, categories, or continuous values.

StatusLoading

legend

Legend: legend · explicit · 3 channels

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Legend · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Explain the visual meaning of layers, categories, or continuous values.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "legend": {
    "interactive": false,
    "items": [
      {
        "id": "semantic-0",
        "label": "Red"
      },
      {
        "id": "semantic-1",
        "label": "Green"
      },
      {
        "id": "semantic-2",
        "label": "Blue"
      }
    ],
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Raster image · Legend",
    "visible": true
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "legend": {
    "interactive": false,
    "items": [
      {
        "id": "semantic-0",
        "label": "Red"
      },
      {
        "id": "semantic-1",
        "label": "Green"
      },
      {
        "id": "semantic-2",
        "label": "Blue"
      }
    ],
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Raster image · Legend",
    "visible": true
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Highlight

Emphasize a representative datum or spatial position to guide inspection.

StatusLoading

highlight

Point and range highlights: highlights[] · datum · rowIndex

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Highlight · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Emphasize a representative datum or spatial position to guide inspection.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "rowIndex": 48,
        "type": "datum"
      }
    }
  ],
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "rowIndex": 48,
        "type": "datum"
      }
    }
  ],
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Callout

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

StatusLoading

callout

Custom callouts: annotations[] · datum · rowIndex · callout · placement:auto

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Callout · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "rowIndex": 48,
        "type": "datum"
      },
      "text": "Point and range highlights · 0"
    }
  ],
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      }
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "rowIndex": 48,
        "type": "datum"
      },
      "text": "Point and range highlights · 0"
    }
  ],
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      }
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Selection

Select and toggle data, then clear it from the background or Escape key.

StatusLoading

selection

Interactive selection: selection · multiple · toggle

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Selection · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Select and toggle data, then clear it from the background or Escape key.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

View controls

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

StatusLoading

controls

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

View controls · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Accessibility

Pair ARIA descriptions and keyboard guidance with a semantic data table.

StatusLoading

accessibility

Graflume.image() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Accessibility · Row data
`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

Pair ARIA descriptions and keyboard guidance with a semantic data table.

Browser API · Portable schema

Browser API

Graflume.image()

const data = [
  {
    "blue": 224,
    "green": 52,
    "red": 32,
    "x": 0,
    "y": 0
  },
  {
    "blue": 216,
    "green": 52,
    "red": 49,
    "x": 1,
    "y": 0
  },
  {
    "blue": 207,
    "green": 52,
    "red": 66,
    "x": 2,
    "y": 0
  },
  {
    "blue": 199,
    "green": 52,
    "red": 82,
    "x": 3,
    "y": 0
  },
  {
    "blue": 190,
    "green": 52,
    "red": 99,
    "x": 4,
    "y": 0
  },
  {
    "blue": 182,
    "green": 52,
    "red": 116,
    "x": 5,
    "y": 0
  },
  {
    "blue": 174,
    "green": 52,
    "red": 133,
    "x": 6,
    "y": 0
  },
  {
    "blue": 165,
    "green": 52,
    "red": 150,
    "x": 7,
    "y": 0
  },
  {
    "blue": 157,
    "green": 52,
    "red": 166,
    "x": 8,
    "y": 0
  },
  {
    "blue": 148,
    "green": 52,
    "red": 183,
    "x": 9,
    "y": 0
  },
  {
    "blue": 140,
    "green": 52,
    "red": 200,
    "x": 10,
    "y": 0
  },
  {
    "blue": 132,
    "green": 52,
    "red": 217,
    "x": 11,
    "y": 0
  },
  {
    "blue": 216,
    "green": 77,
    "red": 32,
    "x": 0,
    "y": 1
  },
  {
    "blue": 207,
    "green": 77,
    "red": 49,
    "x": 1,
    "y": 1
  },
  {
    "blue": 199,
    "green": 77,
    "red": 66,
    "x": 2,
    "y": 1
  },
  {
    "blue": 190,
    "green": 77,
    "red": 82,
    "x": 3,
    "y": 1
  },
  {
    "blue": 182,
    "green": 77,
    "red": 99,
    "x": 4,
    "y": 1
  },
  {
    "blue": 174,
    "green": 77,
    "red": 116,
    "x": 5,
    "y": 1
  },
  {
    "blue": 165,
    "green": 77,
    "red": 133,
    "x": 6,
    "y": 1
  },
  {
    "blue": 157,
    "green": 77,
    "red": 150,
    "x": 7,
    "y": 1
  },
  {
    "blue": 148,
    "green": 77,
    "red": 166,
    "x": 8,
    "y": 1
  },
  {
    "blue": 140,
    "green": 77,
    "red": 183,
    "x": 9,
    "y": 1
  },
  {
    "blue": 132,
    "green": 77,
    "red": 200,
    "x": 10,
    "y": 1
  },
  {
    "blue": 123,
    "green": 77,
    "red": 217,
    "x": 11,
    "y": 1
  },
  {
    "blue": 207,
    "green": 101,
    "red": 32,
    "x": 0,
    "y": 2
  },
  {
    "blue": 199,
    "green": 101,
    "red": 49,
    "x": 1,
    "y": 2
  },
  {
    "blue": 190,
    "green": 101,
    "red": 66,
    "x": 2,
    "y": 2
  },
  {
    "blue": 182,
    "green": 101,
    "red": 82,
    "x": 3,
    "y": 2
  },
  {
    "blue": 174,
    "green": 101,
    "red": 99,
    "x": 4,
    "y": 2
  },
  {
    "blue": 165,
    "green": 101,
    "red": 116,
    "x": 5,
    "y": 2
  },
  {
    "blue": 157,
    "green": 101,
    "red": 133,
    "x": 6,
    "y": 2
  },
  {
    "blue": 148,
    "green": 101,
    "red": 150,
    "x": 7,
    "y": 2
  },
  {
    "blue": 140,
    "green": 101,
    "red": 166,
    "x": 8,
    "y": 2
  },
  {
    "blue": 132,
    "green": 101,
    "red": 183,
    "x": 9,
    "y": 2
  },
  {
    "blue": 123,
    "green": 101,
    "red": 200,
    "x": 10,
    "y": 2
  },
  {
    "blue": 115,
    "green": 101,
    "red": 217,
    "x": 11,
    "y": 2
  },
  {
    "blue": 199,
    "green": 126,
    "red": 32,
    "x": 0,
    "y": 3
  },
  {
    "blue": 190,
    "green": 126,
    "red": 49,
    "x": 1,
    "y": 3
  },
  {
    "blue": 182,
    "green": 126,
    "red": 66,
    "x": 2,
    "y": 3
  },
  {
    "blue": 174,
    "green": 126,
    "red": 82,
    "x": 3,
    "y": 3
  },
  {
    "blue": 165,
    "green": 126,
    "red": 99,
    "x": 4,
    "y": 3
  },
  {
    "blue": 157,
    "green": 126,
    "red": 116,
    "x": 5,
    "y": 3
  },
  {
    "blue": 148,
    "green": 126,
    "red": 133,
    "x": 6,
    "y": 3
  },
  {
    "blue": 140,
    "green": 126,
    "red": 150,
    "x": 7,
    "y": 3
  },
  {
    "blue": 132,
    "green": 126,
    "red": 166,
    "x": 8,
    "y": 3
  },
  {
    "blue": 123,
    "green": 126,
    "red": 183,
    "x": 9,
    "y": 3
  },
  {
    "blue": 115,
    "green": 126,
    "red": 200,
    "x": 10,
    "y": 3
  },
  {
    "blue": 106,
    "green": 126,
    "red": 217,
    "x": 11,
    "y": 3
  },
  {
    "blue": 190,
    "green": 150,
    "red": 32,
    "x": 0,
    "y": 4
  },
  {
    "blue": 182,
    "green": 150,
    "red": 49,
    "x": 1,
    "y": 4
  },
  {
    "blue": 174,
    "green": 150,
    "red": 66,
    "x": 2,
    "y": 4
  },
  {
    "blue": 165,
    "green": 150,
    "red": 82,
    "x": 3,
    "y": 4
  },
  {
    "blue": 157,
    "green": 150,
    "red": 99,
    "x": 4,
    "y": 4
  },
  {
    "blue": 148,
    "green": 150,
    "red": 116,
    "x": 5,
    "y": 4
  },
  {
    "blue": 140,
    "green": 150,
    "red": 133,
    "x": 6,
    "y": 4
  },
  {
    "blue": 132,
    "green": 150,
    "red": 150,
    "x": 7,
    "y": 4
  },
  {
    "blue": 123,
    "green": 150,
    "red": 166,
    "x": 8,
    "y": 4
  },
  {
    "blue": 115,
    "green": 150,
    "red": 183,
    "x": 9,
    "y": 4
  },
  {
    "blue": 106,
    "green": 150,
    "red": 200,
    "x": 10,
    "y": 4
  },
  {
    "blue": 98,
    "green": 150,
    "red": 217,
    "x": 11,
    "y": 4
  },
  {
    "blue": 182,
    "green": 175,
    "red": 32,
    "x": 0,
    "y": 5
  },
  {
    "blue": 174,
    "green": 175,
    "red": 49,
    "x": 1,
    "y": 5
  },
  {
    "blue": 165,
    "green": 175,
    "red": 66,
    "x": 2,
    "y": 5
  },
  {
    "blue": 157,
    "green": 175,
    "red": 82,
    "x": 3,
    "y": 5
  },
  {
    "blue": 148,
    "green": 175,
    "red": 99,
    "x": 4,
    "y": 5
  },
  {
    "blue": 140,
    "green": 175,
    "red": 116,
    "x": 5,
    "y": 5
  },
  {
    "blue": 132,
    "green": 175,
    "red": 133,
    "x": 6,
    "y": 5
  },
  {
    "blue": 123,
    "green": 175,
    "red": 150,
    "x": 7,
    "y": 5
  },
  {
    "blue": 115,
    "green": 175,
    "red": 166,
    "x": 8,
    "y": 5
  },
  {
    "blue": 106,
    "green": 175,
    "red": 183,
    "x": 9,
    "y": 5
  },
  {
    "blue": 98,
    "green": 175,
    "red": 200,
    "x": 10,
    "y": 5
  },
  {
    "blue": 90,
    "green": 175,
    "red": 217,
    "x": 11,
    "y": 5
  },
  {
    "blue": 174,
    "green": 199,
    "red": 32,
    "x": 0,
    "y": 6
  },
  {
    "blue": 165,
    "green": 199,
    "red": 49,
    "x": 1,
    "y": 6
  },
  {
    "blue": 157,
    "green": 199,
    "red": 66,
    "x": 2,
    "y": 6
  },
  {
    "blue": 148,
    "green": 199,
    "red": 82,
    "x": 3,
    "y": 6
  },
  {
    "blue": 140,
    "green": 199,
    "red": 99,
    "x": 4,
    "y": 6
  },
  {
    "blue": 132,
    "green": 199,
    "red": 116,
    "x": 5,
    "y": 6
  },
  {
    "blue": 123,
    "green": 199,
    "red": 133,
    "x": 6,
    "y": 6
  },
  {
    "blue": 115,
    "green": 199,
    "red": 150,
    "x": 7,
    "y": 6
  },
  {
    "blue": 106,
    "green": 199,
    "red": 166,
    "x": 8,
    "y": 6
  },
  {
    "blue": 98,
    "green": 199,
    "red": 183,
    "x": 9,
    "y": 6
  },
  {
    "blue": 90,
    "green": 199,
    "red": 200,
    "x": 10,
    "y": 6
  },
  {
    "blue": 81,
    "green": 199,
    "red": 217,
    "x": 11,
    "y": 6
  },
  {
    "blue": 165,
    "green": 224,
    "red": 32,
    "x": 0,
    "y": 7
  },
  {
    "blue": 157,
    "green": 224,
    "red": 49,
    "x": 1,
    "y": 7
  },
  {
    "blue": 148,
    "green": 224,
    "red": 66,
    "x": 2,
    "y": 7
  },
  {
    "blue": 140,
    "green": 224,
    "red": 82,
    "x": 3,
    "y": 7
  },
  {
    "blue": 132,
    "green": 224,
    "red": 99,
    "x": 4,
    "y": 7
  },
  {
    "blue": 123,
    "green": 224,
    "red": 116,
    "x": 5,
    "y": 7
  },
  {
    "blue": 115,
    "green": 224,
    "red": 133,
    "x": 6,
    "y": 7
  },
  {
    "blue": 106,
    "green": 224,
    "red": 150,
    "x": 7,
    "y": 7
  },
  {
    "blue": 98,
    "green": 224,
    "red": 166,
    "x": 8,
    "y": 7
  },
  {
    "blue": 90,
    "green": 224,
    "red": 183,
    "x": 9,
    "y": 7
  },
  {
    "blue": 81,
    "green": 224,
    "red": 200,
    "x": 10,
    "y": 7
  },
  {
    "blue": 73,
    "green": 224,
    "red": 217,
    "x": 11,
    "y": 7
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Raster image · Accessibility example"
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
};

Graflume.image('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Raster image · Accessibility example"
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "blue": "blue",
      "green": "green",
      "red": "red"
    }
  },
  "width": "container",
  "x": {
    "field": "x",
    "title": "Column",
    "type": "quantitative"
  },
  "y": {
    "field": "y",
    "title": "Row",
    "type": "quantitative"
  }
}

Chart catalog

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73

`x`quantitative	`y`quantitative	`red`quantitative	`green`quantitative	`blue`quantitative
0	0	32	52	224
1	0	49	52	216
2	0	66	52	207
3	0	82	52	199
4	0	99	52	190
5	0	116	52	182
6	0	133	52	174
7	0	150	52	165
8	0	166	52	157
9	0	183	52	148
10	0	200	52	140
11	0	217	52	132
0	1	32	77	216
1	1	49	77	207
2	1	66	77	199
3	1	82	77	190
4	1	99	77	182
5	1	116	77	174
6	1	133	77	165
7	1	150	77	157
8	1	166	77	148
9	1	183	77	140
10	1	200	77	132
11	1	217	77	123
0	2	32	101	207
1	2	49	101	199
2	2	66	101	190
3	2	82	101	182
4	2	99	101	174
5	2	116	101	165
6	2	133	101	157
7	2	150	101	148
8	2	166	101	140
9	2	183	101	132
10	2	200	101	123
11	2	217	101	115
0	3	32	126	199
1	3	49	126	190
2	3	66	126	182
3	3	82	126	174
4	3	99	126	165
5	3	116	126	157
6	3	133	126	148
7	3	150	126	140
8	3	166	126	132
9	3	183	126	123
10	3	200	126	115
11	3	217	126	106
0	4	32	150	190
1	4	49	150	182
2	4	66	150	174
3	4	82	150	165
4	4	99	150	157
5	4	116	150	148
6	4	133	150	140
7	4	150	150	132
8	4	166	150	123
9	4	183	150	115
10	4	200	150	106
11	4	217	150	98
0	5	32	175	182
1	5	49	175	174
2	5	66	175	165
3	5	82	175	157
4	5	99	175	148
5	5	116	175	140
6	5	133	175	132
7	5	150	175	123
8	5	166	175	115
9	5	183	175	106
10	5	200	175	98
11	5	217	175	90
0	6	32	199	174
1	6	49	199	165
2	6	66	199	157
3	6	82	199	148
4	6	99	199	140
5	6	116	199	132
6	6	133	199	123
7	6	150	199	115
8	6	166	199	106
9	6	183	199	98
10	6	200	199	90
11	6	217	199	81
0	7	32	224	165
1	7	49	224	157
2	7	66	224	148
3	7	82	224	140
4	7	99	224	132
5	7	116	224	123
6	7	133	224	115
7	7	150	224	106
8	7	166	224	98
9	7	183	224	90
10	7	200	224	81
11	7	217	224	73