Jelly-Chart

Class: Core

Core

new Core()

Core of jelly-chart
Source:

Methods

color(color)

If color is specified, sets color schemes in array and returns the instance itself. The color schemes is used for color marks of the chart and follows CSS color type. If color is not specified, returns the instance's current color schemes.
Parameters:
Name Type Default Description
color string | Array.<string> defaultSchemes color schemes
Source:
Returns:
Type
color | Core
Example
core.color('red');
core.color(['#fff', 'steelblue', 'rgb(128, 128, 128)']);
core.color();

colorDomain( [colorDomain])

If colorDomain is specified, match color domain and color schemes manually. If colorDomain is not specified, returns the instance's current colorDomain. ColorDomain is an array of objects includes a key and a color(optional) property. If a color peroperty is not specified, uses a color in internal color schemes in order. Also, if an element of array is string type, it translates into an object with a key property.
Parameters:
Name Type Argument Description
colorDomain Array.<string> | Array.<object> <optional>
colorDomain[].key string | number
colorDomain[].color string <optional>
Source:
Example
bar.data([
   {name: 'A', value: 10},
   {name: 'B', value: 20},
   {name: 'C', value: 30},
   {name: 'D', value: 40}
 ]) //sets data
 .dimensions(['name'])
 .measures(['value'])
 .color(['red', 'green', 'blue', 'yellow'])
 .colorDomain(['B', {key: 'A', color: 'orange'}, {key: 'D'}]) 
 // sets bar A: orange / bar B: red / bar C: blue / bar D: green

container( [container])

The Core method `.container` sets a selector of a chart holder element or an element itself as its container. Core finds the holder element and renders a chart on it. If container is specified, sets a selector or a element and returns the instance itself. If container is not specified, returns the instance's current container.
Parameters:
Name Type Argument Description
container string | Element <optional>
 a selector or an element
Source:
Returns:
Type
string | Element | Core
Example
core.container('#chart-container'); //sets a selector of a chart holder element as its container
core.container(document.getElementById('chart-container')); //sets an element as its container
core.container(); //returns the current container;

customDomain( [customDomain])

The Core method `.customDomain` sets a user-defined domain of a measrure variable. It's reflection differs based on the char type. If customDomain is specified, sets a selector or a element and returns the instance itself. If customDomain is not specified, returns the instance's current customDomain.
Parameters:
Name Type Argument Description
customDomain Array.<Number> <optional>
 a user-defined domain of a measrure variable
Source:
Returns:
Type
customDomain | Core
Example
core.customDomain([0, 100]); //sets a custom domain;
core.container(); //returns the current custom domain;

data( [data])

If data is specified, sets data and returns the instance itself. The data shoud be an array of objects, and the object includes the properties used as dimensions and measures. If data is not specified, returns the instance's current data.
Parameters:
Name Type Argument Description
data Array.<Object> <optional>
Source:
Returns:
Type
data | Core
Example
core.data([
   {name: 'a', value: 10},
   {name: 'a', value: 100},
   {name: 'b', value: 20}
 ]) //sets data
 .dimensions(['name'])
 .measures(['value']); 

core.data(); //returns the current data;

demute(nodeOrRegion)

recovers the selection's opacity from Core#mute
Parameters:
Name Type Description
nodeOrRegion d3Selection the selection of nodes and regions in the chart
Source:
Returns:
Type
Core

demuteLegend( [exceptionFilter])

Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name Type Argument Description
exceptionFilter string | function <optional>
 If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Source:
Returns:
Type
Core
Example
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;

demuteNodes( [excemptionFilter])

Fiters nodes according to excemptionFilter in the chart and demutes the nodes. If excemptionFilter is no specified, demutes all nodes.
Parameters:
Name Type Argument Description
excemptionFilter string | function <optional>
 If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Source:
Returns:
Type
Core
Example
core.demuteNodes('Sales'); // nodes whose key is not 'Sales' are demuted
core.demuteNodes(d => d.key !== 'Sales') // nodes whose key is not 'Sales' are demuted

dimension(dimension)

appends a dimension to dimensions array. A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a mark(region or node) according to its chart type and level.
Parameters:
Name Type Description
dimension string | object
Properties
Name Type Argument Default Description
field string refers a key property in objects from the data array. The key property will be invoked for each element in the input array and must return a string identifier to assign the element to its group.
order string <optional>
 natural chooses comparator types among natural, ascending and descending, sorting nodes in selected order.
max number <optional>
 100 maximum number of nodes
format string | function <optional>
 a time formatter for the given string specifier
formatSub string | function <optional>
 a sub-time formatter for the given string specifier, which used sub-ticks on it's axis.
interval string <optional>
 If the dimension has Date type values, set an interval which is a conventional unit of time to grouped its value.
Source:
Returns:
Type
Core
Example
core.dimension({field:'Sales', order:'ascending'});
core.dimension({field: 'Sales Date', format: '%y', interval: 'year'})
core.dimension('Profit');

dimensions( [dimensions])

If dimensions is specified, sets dimensions and returns the instance itself. If dimensions is an object or string, it would be turned into an array with a dimension. If dimensions is not specified, returns the instance's current dimensions. A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a region or a node according to its chart type and level.
Parameters:
Name Type Argument Description
dimensions string | object | Array.<Object> <optional>
 sets a dimension array which are objects has properties for aggregation(grouping).
Source:
Returns:
Type
dimensions | Core
Example
bar.data([
   {category:'Blue', name: 'A', value: 10},
   {category:'Blue', name: 'B', value: 20},
   {category:'Blue', name: 'C', value: 30},
   {category:'Blue', name: 'D', value: 40},
   {category:'Red', name: 'A', value: 20},
   {category:'Red', name: 'B', value: 10},
   {category:'Red', name: 'C', value: 40},
   {category:'Red', name: 'D', value: 10},
 ]) //sets data
 .dimensions(['category', {field:'name', order:'ascending'}])
 //generates a grouped bar chart which has 2 regions (Red, Blue) with 4 bars(A,B,C,D) each.

domain(name)

gets a domain of the scale with a specified name
Parameters:
Name Type Description
name string
Source:

filterNodes(filter)

Fiters nodes in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name Type Description
filter string | function The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Source:
Returns:
Type
d3Selection
Example
core.filterNodes(function(d) {
   return d.key === key;
})

filterRegions(filter)

Fiters regions in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name Type Description
filter string | function The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Source:
Returns:
Type
d3Selection
Example
core.filterRegions(function(d) {
   return d.key === key;
})

font( [fontStyle])

If fontStyle is specified, sets the font styles to the specified object and returns the instance itself. If fontStyle is not specified, returns the instance's current fontStyle.
Parameters:
Name Type Argument Description
fontStyle object <optional>
Properties
Name Type Default Description
font-family string sans-serif
font-size number 12
font-weight string lighter
font-style string normal
Source:
Returns:
Type
fontStyle | Core
Example
core.font({'font-size': 16}); //sets th font size to 16px, then returns core itself;
core.font(); //returns the current fontStyle object;

height( [height])

If height is specified, sets height of the container and returns the instance itself. The unit of height is a pixel. If height is not specified, returns the instance's current height.
Parameters:
Name Type Argument Default Description
height number <optional>
 480 height of the container
Source:
Returns:
Type
height | Core
Example
core.height(600); //sets a custom height;
core.height(); //returns the current height;

innerSize(needArray)

returns an inner size of chart excepting offsets from the container's size
Parameters:
Name Type Default Description
needArray boolean false If needArray is true, retruns the size in array
Source:
Returns:
returns {width, height} or [width, height] according to needArray
Type
object | array

label( [label])

If label is specified as true, sets the chart to show labels on its marks and returns the instance itself. If label is not specified, returns the instance's current height.
Parameters:
Name Type Argument Default Description
label boolean <optional>
 false whether to show labels on marks
Source:
Returns:
Type
label | Core
Example
core.label(true); //shows labels
core.label(); //returns the current height;

legend( [legend])

If legend is specified, sets the legend object which includes an orient and a thickness of the legend. If legend is a boolean, it would be tured into an object with a bottom orient and a default thickness. Also, is a string, it would become a orient of an object. If legend is not specified, returns the instance's current legend.
Parameters:
Name Type Argument Description
legend boolean | string | object <optional>
 sets a legend type. If is a false, removes the legend.
Properties
Name Type Argument Default Description
orient string bottom sets a legend orient(top|right|bottom|left)
align string <optional>
 start sets a legend align(start|middle|end)
thickness number <optional>
 (54|162) sets a legend thickness. if the orient is top or bottom, the default thickness is 54 pixels. Otherwise, it would be 162 pixels.
Source:
Returns:
Type
legend | Core
Example
core.legend(true); //sets {orient: 'bottom', thickness: 54}
core.legend({orient:'right', thickness: 200}); 
core.legend();

limitKeys(limitNumber)

limits the number of nodes length as many as limitNumber.
Parameters:
Name Type Description
limitNumber number
Source:
Returns:
Type
Core
Example
core.limitKeys(10);

limitRows(limitNumber)

limits the number of elements length from the data as many as limitNumber, in order.
Parameters:
Name Type Description
limitNumber number
Source:
Returns:
Type
Core
Example
core.limitRows(100);

margin( [margin])

If margin is specified, sets margin of the container and returns the instance itself. The unit of margin is a pixel. If margin is not specified, returns the instance's current margin.
Parameters:
Name Type Argument Description
margin object <optional>
Properties
Name Type Argument Default Description
top number <optional>
 40 top
right number <optional>
 40 right
bottom number <optional>
 40 bottom
left number <optional>
 40 left
Source:
Returns:
Type
margin | Core
Example
core.margin({top:100, right: 100}); //sets the margin's top and right amount
core.margin();

measure(measure)

appends a measure to measures array. A measure(value) acts as an value that is looked up by dimensions(key). A synonym for measure is dependent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name Type Description
measure string | object
Properties
Name Type Argument Default Description
field string <optional>
 refers a value property in objects from the data array. The value property will be invoked for leaf elements during aggregation and their values in the property will be summarized by the specified operator as an value.
op string <optional>
 sum an operator(sum, mean, variance, min, max, median) to summarize leaf elements.
format string <optional>
 a time formatter for the given string specifier
Source:
Returns:
Type
Core
Example
core.measure({field:'Sales', 'op': 'mean'});
core.measure('Profit');

measures( [measures])

If measures is specified, sets measures and returns the instance itself. If measures is an object or string, it would be turned into an array with a measure. If measures is not specified, returns the instance's current measures. A measure(value) acts as an value that is looked up by dimensions(key). A synonym for dimension is independent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name Type Argument Description
measures string | object | Array.<Object> <optional>
 sets a measure array which are objects has properties for aggregation(grouping).
Source:
Returns:
Type
measures | Core
Example
bar.data([
   {name: 'A', sales: 10},
   {name: 'B', sales: 20},
   {name: 'C', sales: 30},
   {name: 'D', sales: 40},
   {name: 'A', sales: 20},
   {name: 'B', sales: 10},
   {name: 'C', sales: 40},
   {name: 'D', sales: 10},
 ]) //sets data
 .dimensions(['name'])
 .measures([{field:'sales', op: 'mean'}])
 //generates a mono bar chart with 4 bars(A,B,C,D).
 //each bar's length will be determined mean of 'sales' values from leaf elements.

mute(nodeOrRegion [, intensity])

transparentize the selection's opacity by Core#muteIntensity
Parameters:
Name Type Argument Description
nodeOrRegion d3Selection the selection of nodes and regions in the chart
intensity number <optional>
Source:
Returns:
Type
Core

muteIntensity( [muteIntensity])

If muteIntensity is specified, sets muteIntensity of the chart and returns the instance itself. MuteIntensity determines opacity of marks which is muted by .mute method. If muteIntensity is not specified, returns the instance's current width.
Parameters:
Name Type Argument Default Description
muteIntensity number <optional>
 0.3 opacity of muted marks
Source:
Returns:
Type
muteIntensity | Core
Example
core.muteIntensity(0.5); //sets a custom width;
core.muteIntensity(); //returns the current width;

muteLegend( [exceptionFilter])

Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name Type Argument Description
exceptionFilter string | function <optional>
 If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Source:
Returns:
Type
Core
Example
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;

nodes()

returns all nodes
Source:
Returns:
nodes
Type
d3Selection

offset()

returns offsets around the content area, that includes the margin, legend area
Source:
Returns:
{top, right, bottom, left} offset in pixels
Type
object

process( [type] [, call] [, option])

sets and gets rendering procedures.
Parameters:
Name Type Argument Description
type string <optional>
call function <optional>
option object <optional>
Properties
Name Type Description
after string
allow function
Source:
Returns:
Type
process | Array.<process> | Core

regions()

returns all regions
Source:
Returns:
regions
Type
d3Selection

render( [keep] [, skip])

renders the chart. At the end of settings for a chart, it should be called. If keep is true, it does not reset existing scales.
Parameters:
Name Type Argument Default Description
keep boolean <optional>
 false If is true, not reset existing scales.
skip Array.<String> <optional>
 [] If skip includes an process, the process will be ignored.
Source:
Returns:
Type
Core

reset( [keep])

reset the chart
Parameters:
Name Type Argument Default Description
keep boolean <optional>
 false If keep is true, not reset existing scales.
Source:
Returns:
Type
Core

scale( [name])

If name is specified, returns a scale with the name in existing scales. If name is not specified, returns an object includes all scales.
Parameters:
Name Type Argument Description
name string <optional>
Source:
Returns:
Type
object | function
Example
core.scale('color'); //returns the color scale;
core.scale() // returns the scale object

showTooltip(keys)

shows a tooltip on a node which has the same keys.
Parameters:
Name Type Argument Description
keys string <repeatable>
 Keys from the leaf to parents
Source:
To Do:
  • not work for a multiTooltip
Returns:
Type
Core

size( [size])

If size is specified, sets the size range and it direction and returns the instance itself. Each chart type apply size settings differently. If size is not specified, returns the instance's current transition and use the default size setting.
Parameters:
Name Type Argument Description
size number | object | Array.<Object> <optional>
Source:
Returns:
Type
size | Core
Example
line.size(20) // set point radius of a line chart to 20 pixel
scatter.size(10) // set point radius of a scatter chart to 10 pixel
scatter.size([10, 100]) // set the range of point radius of a scatter chart from 10 to 100 pixel
pie.size([20, 100]) // set the inner radius to 20 and the outer radius to 100 seperately
treemap.size({range: [600, 400]}) // set the width to 600 and the height to 400 pixel of a treemap

tooltip( [tooltip])

If tooltip is specified, decides to show a tooltip in the chart by it value. If is false, prevent showing the tooltip. If tooltip is not specified, returns the instance's current tooltip setting.
Parameters:
Name Type Argument Default Description
tooltip boolean | object <optional>
 true
Source:
Returns:
Type
tooltip | Core
Example
core.tooltip(true); //set to show a tooltip
core.tooltip({sortByValue:'ascending'}); // set to show a tooltip and sort items in order of their measrue values.

transition( [transition])

If transition is specified, sets the transition duration and delay to the specified object and returns the instance itself. If transition is not specified, returns the instance's current transition.
Parameters:
Name Type Argument Description
transition object <optional>
Properties
Name Type Default Description
duration number 600 transition duration in milliseconds
delay number 20 trnasition delay in millisecends
Source:
Returns:
Type
transition | Core
Example
core.transition({duration: 1000}); //sets the transition duration to 1000 milliseconds, then returns core itself;
core.transition(); //returns the current transition object;

width( [width])

If width is specified, sets width of the container and returns the instance itself. The unit of width is a pixel. If width is not specified, returns the instance's current width.
Parameters:
Name Type Argument Default Description
width number <optional>
 640 width of the container
Source:
Returns:
Type
width | Core
Example
core.width(600); //sets a custom width;
core.width(); //returns the current width;