Scatter[Bubble]2d
You can zoom in the graph by dragging the mouse over an area while pressing the left mouse button or by clicking close to any axis after the axis resizer appears. You can adjust the maximum and minimum value and / or drag an interval across the range. You can select data points by dragging the mouse over the items you want to select while you pressing the left mouse button and the 'shift' key. You can also select data points by simultaneously pressing the 'ctrl' key and clicking with the left mouse button on the individual item. Once selected, you can press the 'delete' key to hide them or the 'insert' key to show them again. To reset the plot to its original possition press the 'esc' key. If you click in a data point then you can see all the information for that data point. The click event can be customized (please see the event section).
You can specify properties for the data points based on their annotation. For example you can specify, color, shape and size. What is cool is that if the annotation is made up of a continuous variable then an indicator for the property will be displayed rather than a legend so you can effectively display five dimensions. Isn't it cool? Take a look at this first example.
You can iterate over data series by using the arrow or page keys. Take a look at the second example ('ScatterBubble2D') where there are many series in the xAxis, yAxis and zAxis. Press the left or right arrow key a few times. If you press the 'ctrl' key and one of these keys it continuously iterate over all the data series. You can stop it by pressing the 'esc' key.
You can resize the image using the handle that appears when you mouse over the south and east sides of the canvas. You maybe wondering why sometimes it resizes to where you released the mouse button and sometimes it does not. The reason is because of the 'autoExtend' property which is a feature (not a bug). If you set the autoExtent to 'false', then it resizes to where you release your mouse button.
new CanvasXpress('canvas',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2', 'D3', 'D3', 'D3', 'D3', 'D4', 'D4', 'D4', 'D4'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8', 'Smp9', 'Smp10', 'Smp11', 'Smp12', 'Smp13', 'Smp14', 'Smp15', 'Smp16'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43, 32, 44, 5, 3, 35, 25, 28, 11, 23, 24],
[12, 4, 60, 5, 24, 14, 32, 13, 45, 26, 34, 52, 12, 67, 3, 15],
[7, 12, 20, 13, 49, 52, 42, 92, 46, 24, 26, 12, 2, 34, 7, 56],
[21, 10, 30, 8, 65, 166, 47, 58, 93, 26, 8, 35, 23, 3, 25, 2],
[15, 14, 100, 5, 34, 30, 82, 51, 46, 16, 28, 83, 4, 9, 35, 8],
[100, 82, 73, 4, 3, 4, 5, 7, 4, 67, 23, 12, 34, 25, 6, 25]]}},
{graphType: 'Scatter2D',
xAxis: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
yAxis: ['Smp9', 'Smp10', 'Smp11', 'Smp12', 'Smp13', 'Smp14', 'Smp15', 'Smp16'],
xAxisTitle: 'Concentration (mg/L)',
yAxisTitle: 'Concentration (ug/L)',
sizeBy: 'Smp5',
colorBy: 'Smp7',
shapeBy: 'variable',
legendPosition: 'right',
autoExtend: true});
new CanvasXpress('canvas2',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2', 'D3', 'D3', 'D3', 'D3', 'D4', 'D4', 'D4', 'D4'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8', 'Smp9', 'Smp10', 'Smp11', 'Smp12', 'Smp13', 'Smp14', 'Smp15', 'Smp16'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43, 32, 44, 25, 1, 35, 25, 28, 1, 23, 24],
[12, 4, 60, 5, 24, 14, 32, 13, 45, 26, 34, 52, 12, 67, 3, 15],
[7, 12, 20, 13, 49, 52, 42, 92, 46, 24, 26, 12, 2, 34, 7, 56],
[21, 10, 30, 8, 65, 166, 47, 58, 93, 26, 8, 35, 23, 3, 25, 2],
[15, 14, 100, 5, 34, 30, 82, 51, 46, 16, 28, 83, 4, 9, 35, 8],
[100, 82, 73, 4, 3, 4, 5, 2, 4, 67, 23, 12, 34, 25, 6, 25, 6]]}},
{graphType: 'ScatterBubble2D',
xAxis: ['Smp1', 'Smp4', 'Smp7', 'Smp10', 'Smp13', 'Smp16', 'Smp13', 'Smp10', 'Smp9', 'Smp6', 'Smp3'],
yAxis: ['Smp2', 'Smp5', 'Smp8', 'Smp11', 'Smp14', 'Smp15', 'Smp12', 'Smp11', 'Smp8', 'Smp5', 'Smp2'],
zAxis: ['Smp3', 'Smp6', 'Smp9', 'Smp12', 'Smp15', 'Smp14', 'Smp11', 'Smp12', 'Smp7', 'Smp4', 'Smp1'],
legendPosition: 'right',
indicatorsPosition: 'right',
colorBy: 'Smp5',
xAxisExact: true,
yAxisExact: false,
autoExtend: true,
indicatorWidth: 2});
var cx = new CanvasXpress('canvas1',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2', 'D3', 'D3', 'D3', 'D3', 'D4', 'D4', 'D4', 'D4'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8', 'Smp9', 'Smp10', 'Smp11', 'Smp12', 'Smp13', 'Smp14', 'Smp15', 'Smp16'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43, 32, 44, 25, 1, 35, 25, 28, 1, 23, 24],
[12, 4, 60, 5, 24, 14, 32, 13, 45, 26, 34, 52, 12, 67, 3, 15],
[7, 12, 20, 13, 49, 52, 42, 92, 46, 24, 26, 12, 2, 34, 7, 56],
[21, 10, 30, 8, 65, 166, 47, 58, 93, 26, 8, 35, 23, 3, 25, 2],
[15, 14, 100, 5, 34, 30, 82, 51, 46, 16, 28, 83, 4, 9, 35, 8],
[100, 82, 73, 4, 3, 4, 5, 2, 4, 67, 23, 12, 34, 25, 6, 25, 6]]}},
{graphType: 'Scatter2D',
xAxis: ['Smp1', 'Smp3', 'Smp5'],
yAxis: ['Smp2', 'Smp4', 'Smp6'],
background: 'rgb(245,245,245)',
autoExtend: true});
cx.addRegressionLine();
cx.draw();
var cx = new CanvasXpress('canvas3',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2', 'D3', 'D3', 'D3', 'D3', 'D4', 'D4', 'D4', 'D4'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8', 'Smp9', 'Smp10', 'Smp11', 'Smp12', 'Smp13', 'Smp14', 'Smp15', 'Smp16'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43, 32, 44, 25, 1, 35, 25, 28, 1, 23, 24],
[12, 4, 60, 5, 24, 14, 32, 13, 45, 26, 34, 52, 12, 67, 3, 15],
[7, 12, 20, 13, 49, 52, 42, 92, 46, 24, 26, 12, 2, 34, 7, 56],
[21, 10, 30, 8, 65, 166, 47, 58, 93, 26, 8, 35, 23, 3, 25, 2],
[15, 14, 100, 5, 34, 30, 82, 51, 46, 16, 28, 83, 4, 9, 35, 8],
[100, 82, 73, 4, 3, 4, 5, 2, 4, 67, 23, 12, 34, 25, 6, 25, 6]]}},
{graphType: 'Scatter2D',
xAxis: ['Smp1', 'Smp3', 'Smp5'],
yAxis: ['Smp2', 'Smp4', 'Smp6'],
background: 'rgb(210,210,210)',
backgroundType: 'window',
autoExtend: true});
cx.addNormalDistributionLine();
cx.draw();