Display of multi-dimensional data through colors and/or glyphs. Animated transitions when reordering rows and columns. Histogram for aggregate data analysis. Tooltips for more information about the cell. Export visualization to SVG.
d3 2.0+ jQuery 1.8+ jQuery UI 1.8+ Underscore 1.0+
QTip : if this is not included, you don't get the qtip-styled tooltips Filesaver : if this is not included, export to SVG option will be disabled Blob.js : some older browser versions need Blob.js for FileSaver.js to function properly
{ attrs : { d : 'builtInRendererName' } , styles : { stroke : '#0000ff' } }
{ attrs : { d : 'xRenderer' } , styles : { stroke : '#0000ff' } }
{
attrs : {
d : 'xRenderer'
} ,
styles : {
'stroke-width' : function ( data , width , height ) {
return Math . floor ( Math . sqrt ( width * height ) / 10 ) ;
}
}
}
Simple custom renderer: a function that returns an SVG path Complete custom renderer: a function and set of attributes and or styles
DataTypeValue: function ( value , width , height ) { return 'M0,0L' + width + ',' + height ; }
{
dataType : 'cloudy' ,
mappings : {
cloudy : function ( data , width , height ) {
return "m3.2863,7.40575c-0.72778,0 -1.31805,-0.68071 -1.31805,-1.52l0,0c ..." ;
}
}
}
DataTypeValue: {
attrs : {
d : function ( value , width , height ) {
return 'M0,0L' + width + ',' + height ;
}
}
}
DataTypeValue: {
attrs : {
d : function ( value , width , height ) {
return 'M0,0L' + width + ',' + height ;
}
} ,
styles : {
stroke : '#0000ff'
}
}
DataTypeValue: {
attrs : {
d : function ( value , width , height ) {
return 'M0,0L' + width + ',' + height ;
}
} ,
styles : {
stroke : '#0000ff' ,
'stroke-width' : 3
}
}
DataTypeValue: {
attrs : {
d : function ( value , width , height ) {
return 'M0,0L' + width + ',' + height ;
}
} ,
styles : {
stroke : '#0000ff' ,
'stroke-width' : function ( data , width , height ) {
return Math . floor ( Math . sqrt ( width * height ) / 10 ) ;
}
}
}
< ? php $ fileName = $ _FILES [ ' data ' ][ ' tmp_name ' ]; $ batikPath = ' batik/batik-rasterizer.jar ' ; $ downloadLink = ' retrieve.php?token= ' . $ fileName ; if ( is_uploaded_file ( $ fileName )) { exec ( ' java -jar ' . $ batikPath . ' -d /tmp/ ' . $ fileName . ' .png ' . $ fileName ); echo $ downloadLink ; } else { header ( ' 400 Bad Request ' , true , 400 ); } ?>
< ? php $ fileName = ' /tmp/ ' . $ _GET [ ' token ' ]; if ( file_exists ( $ fileName )) { header ( ' Content-Type: image/png ' ); header ( ' Content-Disposition: attachment; filename= ' . $ fileName ); header ( ' Pragma: no-cache ' ); readfile ( $ fileName ); } else { header ( ' 410 File Not Found ' , true , 410 ); } ?>
type: Number default: 12px
type: Function default: undefined
function ( cellData ) {
return [ '<strong>' , cellData . join ( ', ' ) , '</strong>' ] . join ( '' ) ;
}
type: Number default: 12
type: Object default: undefined
var columnKeysToLabel = {
4235 : 'This is a column label' ,
myKey : 'Column Label'
} ;
type: Array of Strings default: undefined
$ ( '#gridVar' ) . gridVar ( 'option' , 'columnOrder' ,
[ 'firstColumnKey' , 'secondColumnKey' , 'thirdColumnKey' ] ) ;
type: Object default: undefined
mappings: {
highValue : function ( value , width , height ) {
return 'M0,0L' + width + ',' + height ;
}
} ;
var labelMapping = {
low : 'Low Value' ,
high : 'High' ,
unknown : 'Unknown'
} ;
var mappings = [ {
dataType : 'mutation' ,
mappings : {
missense : '#FEC44F' ,
nonsense : '#ADDD8E' ,
unknown : '#b1b1b1'
} ,
labelMapping : {
missense : 'Missense Mutation' ,
nonsense : 'Nonsense Mutation' ,
unknown : 'Unknown'
}
} ,
{
dataType : 'copyNumber' ,
mappings : {
amplified : function ( value , width , height ) {
return 'M0,0L' + width + ',' + height ;
} ,
deleted : 'minusRenderer' ,
none : { attrs : { d : 'circleRenderer' } , styles : { stroke : 'black' } }
} ,
labelMapping : {
amplified : 'Amplified' ,
deleted : 'Deleted' ,
none : 'Unknown'
}
}
] ;
value: Object default: undefined
var dataIndex = {
rowKey : 0 , // position 0
columnKey : 1 ,
copyNumber : 2 ,
mutation : 3
} ;
var data = [
[ '23123' , 'TCGA-23123' , [ 'amplified' ] , [ 'missense' ] ] ,
[ '94982' , 'TCGA-SAMPL' , [ 'deleted' ] , [ 'nonsense' ] ] ,
[ '55555' , 'TCGA-DSJEN' , [ 'neutral' ] , [ 'missense' ] ]
] ;
var dataMapping = {
data : data ,
dataIndex : dataIndex
} ;
type: Object default: undefined
exportOptions: {
style : 'GridVar/plugin/gridvar.css' ,
server : 'upload.php'
}
type: Object default: undefined
var histogramMapping = {
data : {
myRowKey : 0.24 , // 24%
anotherRowKey : 1.0 // 100%
} ,
label : 'Frequency'
} ;
type: Object default: undefined
var multipleLegendLines = {
include : true ,
labels : [ 'Temperature: ' , 'Cloud Levels: ' ]
} ;
type: Object default: undefined
var rowKeysToLabel = {
4235 : 'This is a row label' ,
myRowKey : 'Row Label'
} ;
type: Array of Strings default: undefined
$ ( '#gridVar' ) . gridVar ( 'option' , 'rowOrder' , [ 'firstRowKey' , 'firstRowKey' , 'firstRowKey' ] ) ;
parameters: event :Event, columnKey :String
parameters: event :Event, rowKey :String
grunt build – Builds GridVar from source, generates a minified source, generates CSS using Compass , runs linting, and runs tests. grunt lint – Runs source and test files through JSHint. grunt test – Runs the test suite with PhantomJS.