Scatter3d
You can rotate the scatter plot by dragging the mouse while the left button is pressed or you can do the same thing with the arrow or page keys. If you press the 'ctrl' key and one of these keys it continuously rotates. You can stop it by pressing the 'esc' key. To reset the scatter 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 select data points by dragging the mouse over the items you want to select while 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 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 six dimensions. Isn't it cool? Take a look at the last example.
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'],
Donor: ['D1', 'D1', 'D2', 'D2', 'D3', 'D3'],
Time: ['1hour', '2hour', '1hour', '2hour', '1hour', '1hour']},
z: {Symbol: ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR', 'STU', 'VWX', 'YZA', 'BCD', 'EFG', 'HIJ'],
Other: ['foo', 'foo1', 'bar', 'bar1', 'hmm', 'hmm1', 'foo', 'foo1', 'bar', 'bar1', 'hmm', 'hmm1'],
Category: ['Good', 'Very Good', 'Bad', 'Good', 'Bad', 'Outstanding', 'Very Good', 'Bad', 'Good', 'Bad', 'Outstanding', 'Very Good']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6', 'Gene7', 'Gene8', 'Gene9', 'Gene10', 'Gene11', 'Gene12'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43],
[32, 44, 5, 3, 35, 25],
[12, 4, 60, 5, 24, 14],
[32, 13, 45, 26, 34, 52],
[7, 12, 20, 13, 49, 52],
[42, 92, 46, 24, 26, 12],
[21, 10, 30, 8, 65, 166],
[47, 58, 93, 26, 8, 35],
[15, 14, 100, 5, 34, 30],
[82, 51, 46, 16, 28, 83],
[100, 82, 73, 4, 3, 4],
[5, 7, 4, 67, 23, 12]]}},
{graphType: 'Scatter3D',
xAxis: ['Smp1'],
yAxis: ['Smp2'],
zAxis: ['Smp3'],
colorBy: 'Symbol',
shapeBy: 'Category',
sizeBy: 'Other',
autoExtend: true});
new CanvasXpress('canvas1',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D2', 'D2', 'D3', 'D3'],
Time: ['1hour', '2hour', '1hour', '2hour', '1hour', '1hour']},
z: {Symbol: ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR', 'STU', 'VWX', 'YZA', 'BCD', 'EFG', 'HIJ'],
Other: ['foo', 'foo1', 'bar', 'bar1', 'hmm', 'hmm1', 'foo', 'foo1', 'bar', 'bar1', 'hmm', 'hmm1'],
Category: ['Good', 'Very Good', 'Bad', 'Good', 'Bad', 'Outstanding', 'Very Good', 'Bad', 'Good', 'Bad', 'Outstanding', 'Very Good']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6', 'Gene7', 'Gene8', 'Gene9', 'Gene10', 'Gene11', 'Gene12'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43],
[32, 44, 5, 3, 35, 25],
[12, 4, 60, 5, 24, 14],
[32, 13, 45, 26, 34, 52],
[7, 12, 20, 13, 49, 52],
[42, 92, 46, 24, 26, 12],
[21, 10, 30, 8, 65, 166],
[47, 58, 93, 26, 8, 35],
[15, 14, 100, 5, 34, 30],
[82, 51, 46, 16, 28, 83],
[100, 82, 73, 4, 3, 4],
[5, 7, 4, 67, 23, 12]]}},
{graphType: 'Scatter3D',
xRotate: 20,
yRotate: 30,
zRotate: 50,
zAxisTickStyle: 'solid',
zAxisTickColor: 'rgb(255,0,0)',
xAxis: ['Smp1'],
yAxis: ['Smp2'],
zAxis: ['Smp3'],
xAxisTitle: 'Some title',
yAxisTitle: 'Another Title',
zAxisTitle: 'Yet another one',
background: 'rgb(245,245,245)',
autoExtend: true});
new CanvasXpress('canvas3',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D2', 'D2', 'D3', 'D3'],
Time: ['1hour', '2hour', '1hour', '2hour', '1hour', '1hour']},
z: {Symbol: ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR', 'STU', 'VWX', 'YZA', 'BCD', 'EFG', 'HIJ'],
Other: ['foo', 'foo1', 'bar', 'bar1', 'hmm', 'hmm1', 'foo', 'foo1', 'bar', 'bar1', 'hmm', 'hmm1'],
Category: ['Good', 'Very Good', 'Bad', 'Good', 'Bad', 'Outstanding', 'Very Good', 'Bad', 'Good', 'Bad', 'Outstanding', 'Very Good']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6', 'Gene7', 'Gene8', 'Gene9', 'Gene10', 'Gene11', 'Gene12'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 13],
[32, 44, 5, 3, 95, 25],
[12, 4, 60, 5, 64, 34],
[32, 13, 45, 15, 84, 52],
[7, 12, 20, 13, 49, 62],
[42, 92, 46, 14, 56, 72],
[21, 10, 30, 8, 75, 106],
[47, 58, 93, 16, 78, 35],
[15, 14, 100, 5, 94, 80],
[82, 51, 46, 16, 88, 93],
[100, 82, 73, 4, 73, 4],
[5, 7, 4, 7, 83, 42]]}},
{graphType: 'Scatter3D',
xAxis: ['Smp1'],
yAxis: ['Smp2'],
zAxis: ['Smp3'],
colorBy: 'Smp6',
shapeBy: 'Smp5',
sizeBy: 'Smp4',
background: 'rgb(245,245,245)',
scaleLegendFontFactor: 0.5,
autoExtend: false,
indicatorWidth: 2});