|
|
Library structure
The linked-charts library consists of independent charts and layers (marked with bold strokes
and font on the scheme), chart elements ( Click on different parts of the scheme to explore the linked-charts functionality. |
|
lc.beeswarm(id, chart)Defines a beeswarm plot. Based on slightly modified d3-beeswarm plugin. list = [];
for(var i = 0; i < 100; i++){
list.push({x: "RNA", y: Object.keys(inputData.info)[i]});
list.push({x: "MA", y: Object.keys(inputData.info)[i]})
}
//-----Precode end-----
var beeswarm = lc.beeswarm()
.height(300)
.x(function(i) {return list[i].x;})
.y(function(i){
return inputData.info[list[i].y]["Average." + list[i].x];
})
.colourValue(function(i) {return list[i].x;})
.size(4)
.place();
PropertiesvalueAxis Defines, which of the axes contains value that should not be changed. Type
Default value
lc.scatter(id, chart)Defines a scatter chart. var scatterplot = lc.scatter()
.x(function(k) {return data[k].sepalLength})
.y(function(k) {return data[k].petalLength})
.size(function(k) {return data[k].sepalWidth * 2})
.colourValue(function(k) {return data[k].petalWidth})
.symbolValue(function(k) {return data[k].species})
.place();
PropertiesSets x and y values for each element. Type
Default value
Size of each element. Type
Default value
Colour of the stroke for each element. TypeCSS colour. Default valuefunction(d) {
return d3.rgb(layer.get_colour(d)).darker(0.8)
})
Width of the stroke for each element. Type
Default valuefunction(d) {
return layer.get_size(d) * 0.1;
})
Defines which symbol to use for each element. Type
Default value
Provides an inderect way to set different symbols for the elements. Each value of this property is transformed into one of the supported symbol types and a corresponding legend is added. Type
Default value
Provides an easy way to set a title of the
default symbol legend. Another option is to do that via Type
Default valuefunction(){return "symbol_" + layer.id}
MethodsResets the connection between symbols and
lc.barChart(id, chart)Defines a bar chart. var geneList = {ASC_AC: {}, KLSPC_KLCC10: {}, KP_KL: {}};
for(var i in geneList){
geneList[i]["MA"] = {};
geneList[i]["RNA"] = {};
for(var j in geneList[i]){
geneList[i][j]["up"] = [];
geneList[i][j]["down"] = [];
}
}
for(var i in inputData.info)
for(var j in geneList)
for(var k in geneList[j])
if(inputData.info[i][j + "_Adj.p.value_" + k] < 0.05)
if(inputData.info[i][j + "_LogFoldC_" + k] > 0)
geneList[j][k].up.push(i)
else
geneList[j][k].down.push(i);
//-----Precode end-----
var bar = lc.barchart()
.height(300)
.groupIds(Object.keys(geneList))
.stackIds(["up", "down"])
.barIds(["MA", "RNA"])
.value(function(groupId, barId, stackId){
return geneList[groupId][barId][stackId].length;
})
.place();
PropertiesNumber of bar groups. Type
Default value
An array of IDs of all the groups in the bar chart. Type
Default value
Number of bars per group. Type
Default value
An array of IDs of all the bars in a group of the bar chart. Type
Default value
Number of stacks per bar. Type
Default value
An array of IDs of all the stacks in a bar of the bar chart. Type
Default value
Important! Properties Numeric value for each group, bar and stack to be displayed on a bar chart. Type
Default value
Ratio of width of a group of bars to the space, available to the group. Type
Default value
Colour of the strokes for each stack, bar and group. TypeCSS colour. Default value
Width of the strokes for each stack, bar and group. Type
Default value
lc.yLine(id, chart)Defines a x = f(y) curve. var yLine = lc.yLine()
.height(300)
.nelements(3)
.lineFun(function(t, d) {
return (d + 1) * t;
})
.layerDomainY([0, 1])
.lineWidth(function(d) {
return d + 1;
})
.place();
lc.xLine(id, chart)Defines a y = f(x) curve. var xLine = lc.xLine()
.height(300)
.nelements(3)
.lineFun(function(t, d) {
return (d + 1) * t;
})
.layerDomainX([0, 1])
.dasharray(function(d) {
return d + " " + d;
})
.place();
lc.parametricCurve(id, chart)Defines a parametric curve (x = f(t), y = g(t)). var param = lc.parametricCurve()
.height(300)
.nelements(3)
.xFunction(function(t, d) {
return Math.cos(t) + d;
})
.yFunction(function(t, d){
return Math.sin(t);
})
.colourValue(function(d) {return d.toString()})
.paramRange([0, 2 * Math.PI])
.place();
PropertiesFunctions to define the curve x = f(t), y = g(t). Provided a value of the parameter and an ID of the line should return values of x and y coordinates. Type
Default value
Numeric range of the parameter t. Type
Default value
lc.line(id, chart)Common predecessor of various line plots in the linked-charts library. PropertiesFunction to define each line of the chart.
Provided a value inside Type
Default value
Number of steps to draw the line. Can be set individually for each line. Type
Default value
Defines width of each line. Type
Default value
Defines pattern of dashes and gaps for each line. Type
Default value
lc.layerBase(id, chart)This class is a predecessor of all the layers in the library. It contains properties and methods that are used to define new layers and to set the structure of any type of layer-plots in the liblrary. PropertiesNumber of elements in the layer (dots, lines, bars, etc.). Type
Default value
An array of IDs of all the elements in the layer. Type
Default value
Important! Properties A label for each element that is displayed when mouse hovers it. Unlike IDs, labels are not necessary unique. Type
Default valuefunction(i) {return i;}
The domain of X or Y axis. Setting this property
doesn't mean that the final axis will get the same domain. By default,
the domain of the axis is defined so that to encompass the domains of all
the layers of the chart. To specifically set the chart's domain use Type
Default valueCalculated on each Whether to treat axes as continuous or categorical. If the domain contains strings, the scale will be set as a categorical. If any of the layers' scales is categorical, all of them will be considered categorical. Type
Default value
Sets colour for each element. TypeColour Default valuefunction(id) {
return layer.colourScale(layer.get_colourValue(id));
})
Values to set colours of different elements.
Default supported types are numbers to generate a continuous colour scale and
strings to generate a categorical one. But actually this property can return
anything if Type
Default value
Colour palette that is used in the layer. This should be either a function that transforms values from 0 to 1 into colours, or an array of colours. Type
Default valued3.interpolateSpectral
Domain for the Type
Default valueIs calculated to fit Provides an easy way to set a title of the
default colour legend. Another option is to do that via Type
Default valuefunction(){return "colour_" + layer.id}
Whether or not to show the default colour legend. Type
Default value
Opacity of each element in the layer. Type
Default value
Actions to be performed, when the element is clicked. Type
Default valuefunction() {}
Text to be shown on the information label (the one that appears when mouse is hovering above an element). TypeHTML Default valuefunction(id) {
return "<b>ID:</b> " + layer.get_elementLabel(id);
})
Actions to be performed, when the mouse hovers the element. Type
Default valueShow the information label ( Actions to be performed, when the mouse leaves the element. Type
Default valueHide the information label ( MethodscolourScale(value) Colour scale for this layer. Tranforms
Argumentsvalue - number or string - value
to be transformed into colour. Generally comes from Resets the addLegendBlock(scale, type, id) Adds a new legend block and makes it associated with this layer. Argumentsscale - array | function - a fucntion or an array that defines mapping from colours (symbols, sizes, etc.) to names or values. It can be an array with an array of names or values as its first element and with an array of corresponding colours, dashes, symbols, etc. as its second one. It also can be a d3.scale or any other custom-made function that will transform colours (or anything else you want to show) into names or values. Imortant! If you construct a scale function, you need to define a domain property, which is an array of all the values of colour, shape, etc. you want to annotate. type - string - a type of this new block.
Currently supported types are id - string - ID for the new block. Each ID must be
unique. If a block with the same ID already exists, it will be replaced with the new one.
by default IDs are alse used as titles, but this can be changed by the update() Updates the layer and all its content. Updates (add or removes) all the elements of the layer. Is called
inside the Updates positions of all the elements in the layer. Is called
inside the Updates the style (colour, opacity, etc.) of all the
elements of the layer. Is called inside the Adds all static elements of the layer to the chart. This function is supposed to be called only once and, by default, is called inside placeLayer method. findElements(ids) Returns the elements with the provided IDs as a d3.selection Argumentsids - array - an array of IDs of all the elements to be selected. get_position(id) Returns the position of the element with the provided ID. Argumentsid - string - ID of the element. lc.axesChart()This class is used for all the types of plots that have axes (both continuous and categorical): scatterplots, linecharts, beeswarms, barcharts. All these plots are added to the chart as layers and all of them share the same axes. PropertiesDomain of X and Y axes. Can be continuous or categorical. Type
Default valueBy default is recalculated on any Fixes the aspect ratio of the axes. Type
Default value
If logarithmin transformation of X or Y axis is required, this properties define a base of the logarithm. If the base is smaller than 0 or equals 1, non logarithmic transformation is applied. Type
Default value
Titles of X and Y axes. Type
Default value
Allows to specify which axis ticks to display, and, if necessary, to replace the original values with something else. Multiple sets of ticks can be provided (if, for a example, several scales are used) and these sets can have different colours. To see how it works check this example. Type
The first elemet of the array is a set of original ticks. All other elements are the values with which to replace the original ones in the corresponding order. colour - an optional property of the object that may contain an array of colours - one for each set of labels. Default value
MethodsUpdates axes of the chart and changes positions of all the elements accordingly. Returns an array of IDs of all currently selected elements. findElements(lu, rb) Returns a list of paired layer and element IDs of all the elements
that are inside or on the border of a rectagle area, defined by its left-upper corner
( Argumentslu - [number, number] - left-upper corner of the area, where to look for the elements. rb - [number, number] - right-bottom corner of the area, where to look for the elements. get_position(id) Returns coordinates of the cell with the provided layer and element IDs. Argumentsid - [string, string] - layer and element IDs of the element. zoom(lu, rb) Zooms into the selected rectangle area, defined by its left-upper corner
( Argumentslu - [number, number] - left-upper corner of the area, where to zoom in. rb - [number, number] - right-bottom corner of the area, where to zoom in. Resets axes to their original states. lc.layerChart()Provides all the layer functionality. One can use layers to put several different plots on top of each other. PropertiesCurrent active layer. An active layer is the one,
whose properties one can use directly as a chart property without need to call the
TypeA layer object. Default value
An array of IDs of all the existing layers. By changing this property one can remove or add new empty layers. Type
Default valuefunction() {return Object.keys(chart.layers);}
Type of the layer with the given ID. Currently, supported types
are Type
Default valuefunction(id) {return chart.get_layer(id).type;}
MethodsReturns the current number of the layers of this chart. get_layer(id) Returns the layer with the given ID. Argumentsid - string - ID of the layer to be returned. add_layer(id) Adds a new layer with the given ID. Argumentsid - string - ID of the layer to be added to the chart. remove_layer(id) Removes layer with the given ID. Argumentsid - string - ID of the layer to be removed. select_layers([ids]) Returns a selection of layers with all the given IDs. When several layers are selected, their propertied can be changed simultaniously. See how it works in this example. Argumentsids optional - array - a set of IDs of the layers to be selected. If not provided, all the existing layers are selected. place_layer(id) Places the layer with the given ID on the web page. This method is supposed to be called only once for each layer that was added after the chart had been placed. Argumentsid - string - ID of the layer to be placed. syncProperties(layer) Allows to use the properties of the given layer as chart properties. By default, is called each time when a new layer is intialized. Argumentslayer - lc.colourSlider()Colour slider doesn't visualize any data on its own, but rather adds interactive features to other charts from the package. This slider can be used as an interactive version of a continuos colour legend and allows the user to interactively change contrast or center of his colour scale. You can check here how it works. var slider = lc.colourSlider()
.place();
PropertiesThe original colour scale that can be interactively transformed by the user. TypeA d3-scale with a continuous domain and array of colours as the range. Default valued3.scaleLinear()
.range(["white", "darkblue"]));
Current position of the middle point of the colour scale. Type
Default valueMiddle of the scale domain. Distance between the midpoint and the side "wings".
This defines contrast of the transformed colour scale. The smaller is the value, the
closer is the transformed scale to a categorical one. Maximum allowed value is half of
the domain width, which yields to non-transformed Type
Default value15% of the scale domain. A function that is called on each drug event from the colour slider. Allows to make gradual changes in other charts. Type
Default valuefunction() {}
A function that is called each time a drug event from the colour slider has ended. Allows to save performance time and make changes in other charts only once per dragging. Type
Default valuefunction() {}
MethodscolourScale(value) Transformed colour scale. Argumentsvalue - number - a numeric value inside
the domain of the lc.table()A simple table that can show content of an object. Can display an object with numeric and string properties. var table = lc.table()
.record(inputData[0])
.place();
PropertiesAn object to be displayed. Type
Default value
lc.dendogram()This class creates dendorgams that can be either an independent chart or a part of a heatmap. var dendo = lc.dendogram()
.elementIds(geneNames)
.data(function(id) {return geneExprs[geneNames.indexOf(id)]})
.place();
PropertiesWidth of the dendogram. Type
Default value
Height of the dendogram. Type
Default value
Margins of the dendogram. Type
Important! A property setter always replaces old value with the new one, so you need to always define all four margins. Default value{left: 20, top: 20, bottom: 20, right: 20}
Defines the orientation of the dendogram. Type
Default value
Number of elements (leaves) in the dendogram. Type
Default value
An array of IDs for all the elements in the dendogram. Type
Default value
Important! Properties Data for each element. TypeAnything that can be handled by a distance function. The defauld distance function expects arrays of coordinates. Default value
Function that takes data of the two elements and returns numerical distance. TypeFunction. Default valueEuclidean distance function(a, b) {
if(a.length != b.length)
throw "Error in getEuclideanDistance: length of the" +
"input vectors is not the same";
var sum = 0;
for(var i = 0; i < a.length; i++)
sum += (a[i] - b[i]) * (a[i] - b[i]);
return Math.sqrt(sum);
}
Regular colour of lines and colour of a selected branch. Type
Default value['black', 'red']
Actions to be performed, when a branch of the dendogram is clicked. Gets as arguments an array of IDs of all the selected elements. Type
Default valuefunction() {}
Methodscluster() Clusters elements of the dendogram. Changing data does not lead to reclustering, and therefore this method should be explicitly called. draw() Redraws the dendogram. remove() Removes the dendogram. update() Updates the dendogram. Calls place([element]) Initialises and places the dendogram in the provided container on the page. Need to be called once for each dendogram. Argumentselement optional - d3.selection | valid CSS selector - an existing container on the page, where the dendogram should be placed. If not specified, dendogram is placed in the body of the page. Ignored if dendogram is a part of a heatmap. put_static_content(element) Initialises the dendogram and adds all its static elements. Important! This function is to be called only once and is called by the Argumentselement - d3.selection - an existing container on the page, where the dendogram should be placed. Ignored if dendogram is a part of a heatmap. lc.heatmap()This class allows to create and customize interactive heatmaps. var heatmap = lc.heatmap()
.colIds(geneNames)
.rowIds(drugNames)
.value(function(rowId, colId){
return corObject[colId][rowId]
})
.width(500)
.height(300)
.colourDomain([-1, 1])
.palette(function(val) {
return d3.interpolateRdBu(1 - val);
})
.place();
PropertiesNumber of rows or columns in the heatmap. Type
Default value
An array of IDs for all the rows or columns in the heatmap. Type
Default value
Important! Properties Provided a column and a row IDs, returns a value for this cell. TypeAnything ( Default value
Actions to be performed when a cell is clicked. Type
Default valuefunction() {}
Provided a row or column ID, returns the label for this row or column. Type
Default valuefunction(i) {return i;}
Provided a TypeColour. Default valuefunction(val) {return chart.colourScale(val);}
Sets a palette to create a Type
Default valueSets a domain for the Type
Default valuefunction() {return chart.dataRange()}
showDendogramRow/showDendogramCol Defines, whether or not to show Type
Default value
clusterRowMetric/clusterColMetric Defines distance fucntion that is used to cluster rows or columns. TypeDistance Default valueEuclidean distance function(a, b) {
if(a.length != b.length)
throw "Error in getEuclideanDistance: length of the" +
"input vectors is not the same";
var sum = 0;
for(var i = 0; i < a.length; i++)
sum += (a[i] - b[i]) * (a[i] - b[i]);
return Math.sqrt(sum);
}
Heatmap can be generated either as SVG, or as Canvas. SVG allows
easier and more complicated interactivity and also can be changed only partially (e.g. you can
only change some of the cells), but if the heatmap has too many cells, page rendering can take a
considerable amount of time. Canvas, on the other hand, is faster in these cases, but the
interactivity is limited and any changes of the heatmap require complete redrawing. It's also
imposible to save the chart as SVG, when the heatmap is in the Canvas mode. Type
Default value
Text to be shown on the information label (the one that appears when mouse is hovering above a cell). TypeHTML Default valuefunction(rowId, colId) {
return "Row: <b>" + chart.get_rowLabel(rowId) + "</b>;<br>" +
"Col: <b>" + chart.get_colLabel(colId) + "</b>;<br>" +
"value = " + chart.get_value(rowId, colId).toFixed(2)
})
Provided a row or columns ID, returns a sequential number of this row or column among currently displayed ones. Type
Default value//heatmapRow
function(rowId) {
return chart.dispRowIds().indexOf(rowId);
}
//heatmapCol
function(colId) {
return chart.dispColIds().indexOf(colId);
}
Defines, whether or not show the value as a text inside a cell. Type
Default value
Title for the rows or columns. Type
Default value
List of rows and columns that should be displayed. Type
Default value//dispRowIds
function() {return chart.rowIds();}
//dispColIds
function() {return chart.colIds();}
MethodsAdds or removes labels to keep them up to date with
current data. Calls Adds or removes cells to keep them up to date with
current data. If Adds or removes text inside the cells to keep it up to date with current data. Updates coordinates of all the existing labesl. Calls
Updates coordinates of all the existing cells. If
Updates coordinates of text inside the cells. Updates text of all the existing labels. Updates colour of all the existing cells. If
Updates text inside cells. Updates canvas. Important! This method is not responsible for switching between cluster(type, [features]) Performs hierarchical clustering of row or columns, reorders them accordingly,
and, if this is not prohibited by type - string (either "Row" or "Col") - defines what to cluster: rows or columns. features (optional) - array of strings - a list row or column IDs that should be used as features for clustering. Allows to cluster, for example, rows, using only some of the columns. If not specified, all the rows or columns are used for clustering. reorder(type, sortFun) Changes order of row or columns according to the provided function. Only the currently displayed row or columns will be reordered. So if you, for example, zoom in, reoder rows and zoom out, all other rows will remain on the same positions. type - string (either "Row" or "Col") - defines what to reorder: rows or columns. sortFun - function - sorting function that takes two row or column IDs and returns a negative value if the first element should be located after the second, and a positive value otherwise. showDendogram(type, [value]) Returns or sets an idicator, telling whether a
dendogram for rows or columns should be displayed. Unlike properties type - string (either "Row" or "Col") - selector for one of the dendograms. value (optional) - boolean - if specified, the selected
dendogram is either shown (if the corresponding property is drawDendogram(type) Adds a dendogram to the chart. type - string (either "Row" or "Col") - defines which dendogram to draw. Returns the range of all the values, provided that the values are numbers. Resets lists of the displayed rows and columns and their order to its original state. Scale that transforms values into colours. Redefines heatmap's zoom(lu, rb) Zooms into the selected rectangle area, defined by its left-upper corner
( lu - [number, number] - left-upper corner of the area, where to zoom in. rb - [number, number] - right-bottom corner of the area, where to zoom in. findElements(lu, rb) Returns a list of paired row and column IDs of all the elements
that are inside or on the border of a rectagle area, defined by its left-upper corner
( lu - [number, number] - left-upper corner of the area, where to look for the elements. rb - [number, number] - right-bottom corner of the area, where to look for the elements. get_position(id) Returns coordinates of the cell with the provided row and column IDs. id - [string, string] - row and column IDs of a cell. get_elements(ids) Selects all svg elements, defined by the provided IDs, returns d3.selection. Argumentsids - array | string - a list of pairs of row and column IDs.
If the heatmap is currently in the lc.panel(chart)Instrument panel contains buttons that allow easy access to various manipulations with the chart. The panel can be shown or hidden by clicking on the grey triangle (by default, located in the right-top conrner of the chart). PropertiesX and Y coordinates of the top-left corner of the panel icon, relative to the left and top sides of the cahrt respectively. Type
Default value//x
function(){
return chart.width() - panel.buttonSize() - 5;
})
//y
function(){
return chart.margins().top * 0.05;
})
The buttons on the panel can be aligned either vertically or horizontally. This property defines, which mode to use. Type
Default value
Width of the instrument panel. If not specified, the width of the panel will be limited by the chart borders. Type
Default valuefunction() {
if(panel.orientation() == "horizontal")
return Math.floor(panel.x() / panel.buttonSize()) * panel.buttonSize();
}
Height of the instrument panel. If not specified, the height of the panel will be limited by the chart borders. Type
Default valuefunction(){
if(panel.orientation() == "vertical")
return Math.floor(panel.y() / panel.buttonSize()) * panel.buttonSize();
})
Size of a button. All buttons are square, and the value of this property is used as a side length. Important! If Type
Default value
Methodsadd_button(name, icon, function, [hint]) Adds a new button to the panel. Argumentsname - string - name of the new button. icon - an ID selector - a selector for the button
icon that can be assigned to function - function - actions to be performed, when
button is clicked. This fucntion can take hint (optional) - string - text that is shown once, when the button is clicked for the first time to inform user about some functionality of the chart. chart.panel.add_button("Reset scales", "#home", function(chart) {chart.resetDomain();},
"You can also use double click to reset scales");
show() Shows all the buttons on the panel. hide() Hides the panel, leaving only the main icon visible. Initialises the panel and adds all its static elements.
This function is supposed to be called only once and, by default, is called inside
Update size and location of the panel. By default, is
called inside lc.legend(chart)Legend shows, how colour, size or shape of data points
(lines, cells etc.) corresponds to some data properties or values. Legend consists
of several independent blocks, each having its own type, scale and title. Setting
properties like PropertiesWidth of the legend. Type
Default value
Height of the legend. Type
Default valuefunction() {return chart.height();}
Title of each legend block. Type
Default valuefunction(id) {return id;}
All blocks of the legend are arranged in a rectangular grid. This property sets number of columns in this grid. If undefined, the legend attempts to estimate a suitable number of columns automatically. Type
Default value
An existing container on the page, where to place the legend. By default any chart is located in a two-cell table: one cell is for the chart, the other - for the legend. TypeA valid CSS selector or d3.selection Default valuechart.container
.select("table")
.select("#legend");
Height of each element of the legend (e.g. of the coloured box or of symbol, etc.). Type
Default value
MethodsReturns current number of blocks in the legend. add_block(scale, type, id, [layer]) Adds a new block to the legend. If the legend has already been placed, also updates it. Argumentsscale - array | function - a fucntion or an array that defines mapping from colours (symbols, sizes, etc.) to names or values. It can be an array with an array of names or values as its first element and with an array of corresponding colours, dashes, symbols, etc. as its second one. It also can be a d3.scale or any other custom-made function that will transform colours (or anything else you want to show) into names or values. Imortant! If you construct a scale function, you need to define a domain property, which is an array of all the values of colour, shape, etc. you want to annotate. type - string - a type of the new block.
Currently supported types are id - string - ID for the new block. Each ID must be
unique. If a block with the same ID already exists, it will be replaced with the new one.
by default IDs are alse used as titles, but this can be changed by the layer (optional) - object - if you want a block to be associated with one of the chart's layers, you can pass this layer as a fourth argument when adding a block. curveFit.legend.ncol(1)
.legend.add([["RTG", "CTX"], ["Wye", "Triangle"]], "symbol", "screen")
.legend.add([["RTG", "CTX"], [undefined, 5]], "dash", "fit");
updateScale(scale, id) Replaces the scale of an existing block with a new one and updates block. Argumentsscale - array | function - a fucntion or an array that defines mapping from colours (symbols, sizes, etc.) to names or values. It can be an array with an array of names or values as its first element and with an array of corresponding colours, dashes, symbols, etc. as its second one. It also can be a d3.scale or any other custom-made function that will transform colours (or anything else you want to show) into names or values. Imortant! If you construct a scale function, you need to define a domain property, which is an array of all the values of colour, shape, etc. you want to annotate. id - string - ID of the block to change the scale. renameBlock(oldId, newId) Changes ID of an existing block and updates it. ArgumentsoldId - string - old ID of the block. newId - string - new ID for this block. removeBlock(id) Removes an existing block and updates the legend. Argumentsid - string - ID of the block to be removed. updateBlock(id) Updates an existing block with the provided ID. Argumentsid - string - ID of the block to be updated. update() Updates all elements of the legend. lc.chartBase()Ancestor to all the charts in the linked-charts library. PropertiesWidth of the chart. Type
Default value
Height of the chart. Type
Default value
Width of the plotting area of the chart. Type
Default valuefunction() {
return chart.width() - (chart.margins().right + chart.margins().left);
}
Height of the plotting area of the chart. Type
Default valuefunction() {
return chart.height() - (chart.margins().top + chart.margins().bottom);
}
Important!Properties Chart margins that are used to place labels, axes, titles, dendograms and other additional chart elements. Type
Important! A property setter always replaces old value with the
new one, so you need to always define all four margins. If you want to
reset only few of them, use Default value{top: 15, right: 10, bottom: 50, left: 50}
Main title of the chart. Type
Default value
X coordinate of the main title's center relative to the left side of the chart. By default, the title is aligned centrally. Type
Default valuefunction() {
return chart.width() / 2;
}
Y coordinate of the main title's bottom-left corner relative to the top of chart. Type
Default valuefunction() {
return d3.min([17, chart.margins().top * 0.9]);
}
Font size for the main chart title. Type
Default valuefunction() {
return d3.min([15, chart.margins().top * 0.8]);
}
Defines whether to show the instrument Type
Default value
Defines whether to show the Type
Default value
Duration of transition effects for the chart. If this property is zero, no transition will be applied which may help to reduce performance time. Type
Default value
Actions that should be performed, when elements are selected/deselected. Check this example for more details. Type
Default valuefunction() {}
Methodsplace([element]) Places the chart in the provided container on the page. Need to be called once for each chart. Argumentselement optional - d3.selection | valid CSS selector - an existing container on the page, where the chart should be placed. If not specified, the chart is placed in the body of the page. set_margins(margins) Unlike Argumentsmargins - object - new margins. The object should
have a property for each field you want to set ( chart.set_margins({right: 100, bottom: 70});
Updates the size and location of all the elements inside the chart. Updates the main title of the chart. update() Updates all the elements of the chart. get_elements(ids) Selects all svg elements, defined by the provided IDs, returns d3.selection. Argumentsids - array | string - a list of IDs or pairs of IDs for heatmaps or pairs [layerID, elementID] for charts with layers. If a layer ID is not provided, elements from all the layers with the same element ID are returned. mark(elements) Switches the state of all the provided elements (either selects,
or deselects them). Also accepts Argumentselements -
d3.selection
| array | string - a list of elements to switch the state. This can be a
d3.selection, an
array of data point IDs, or Returns an array of IDs (or pairs of IDs for heatmaps and charts with multiple layers) of all currently selected elements. selectMode([value]) Sets or returns an indicator that shows whether or not the chart is in the selection mode (if so, points are not clicked, but selected or deselected on a mouseclick event). Argumentsvalue (optional) - boolean - if defined,
turns on or off the selection mode. If not defined, returns pan(property, [value]) Sets or returns value of either the indicator for pan mode
( Argumentsproperty - string - property of the pan object,
you want to access. Should be either value (optional) - boolean | [number, number] - replaces the current value of the selected property and returns the chart. Otherwise returns current value of the selected property. put_static_content(element) Adds all the static elements (e.g. div and svg containers), used by this chart and puts them inside the provided element (d3.selection). Important! This function is to be called only once and is called by the Argumentselement - d3.selection - an existing container on the page, where the chart should be placed. lc.base()Provides basic property functionality and is an ancester for all other classed in the library. Methods of this class are used to add and modify properties. Methodsadd_property(propertyName, [defaultValue]) Adds a property with the specified name and default value to this object. To add a property means to define its getter and setter. ArgumentspropertyName - string - name to be assigned to the new property. defaultValue (optional) - anything - default value for the new property. Can also be a fuction that returns value. chart.add_property("property1")
.add_property("property2", function() {return value;})
.add_property("property3", value3);
wrapSetter(propertyName, wrapper) Changes the setter of an existing property, allowing additional actions to be performed on each call. Can be used for type checks or handling conflicting properties. propertyName - string - name of the existing property. wrapper - function - a wrapper function factory that takes the old setter as an argument and returns a new one. chart.wrapSetter("width", function(width) {
return function() {
chart.get_plotWidth = plotWidth_default;
return width.apply(chart, arguments);
}
});
|