Dotplot
You can zoom in the graph by dragging the mouse over an area while pressing the left mouse button or by clicking close to the 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 samples by dragging the mouse over the samples you want to see while you pressing the left mouse button and the 'shift' key. 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 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'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['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'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]}},
{graphType: 'Dotplot',
blockContrast: true,
colorScheme: 'basic',
blockSeparationFactor: 2,
smpOverlays: ['Tissue', 'Donor', 'Time'],
overlaysWidth: 20,
autoExtend: true});
var dp = new CanvasXpress('canvas1',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['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'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]}},
{graphType: 'Dotplot',
background: 'rgb(245,245,245)',
blockContrast: true,
legendBackgroundColor: false,
blockSeparationFactor: 2,
autoExtend: true});
dp.groupSamples(['Donor']);
dp.draw();