Scene
extends Group
The Scene class represents the top-level container in a visualization. This is where graphical objects (i.e., mark or group) are created, transformed and joined with data. To create a scene object, use the scene function:
let scene = msc.scene();
Properties
property | explanation | type | default value |
---|---|---|---|
fillColor | the background color of the scene | Color | “white” |
Properties inherited from Group
property | explanation | type | default value |
---|---|---|---|
id | the unique id of the group | String | |
type | the type of the group | String | “scene” |
children | the graphical objects in the group | Array | [] |
firstChild | the first child in the group | Mark or Group | |
bounds | the bounding rectangle of the group | Rectangle | |
center | the center of the group bounds | Point |
Methods: Create Mark or Group
method | explanation | return type |
---|---|---|
mark(type, props) | create a new mark with the specified type and properties type (String): mark type props (Object): property names and values | Mark |
group(children) | create a new group with the specified children children (Array, optional): objects to be added in the group | Group |
glyph(…marks) | create a new glpyh with the specified marks as children marks (Marks): primitive marks as part of the glyph | Glyph |
Methods: Join Graphics with Data
method | explanation | return type |
---|---|---|
repeat(item, table, params) | repeat a graphical object by a field item (Mark or Group): graphical object to be repeated table (DataTable): data table params (Object, optional): containing one or more of the following:
| Collection |
divide(item, table, params) | divide a graphical object by a field item (Mark or Group): graphical object to be repeated table (DataTable): data table params (Object, optional): containing one or more of the following:
| Collection |
densify(item, table, params) | densify a graphical object by a field item (Mark or Group): graphical object to be repeated table (DataTable): data table params (Object, optional): containing one or more of the following:
| Path |
attach(item, table) | attach the entire table to a single graphical object, item (Mark or Group): graphical object table (DataTable): data table | void |
Methods: Encode
angle
method | explanation | return type |
---|---|---|
encode(item, params) | encode a field using a visual channel item (Mark or Group): an example item to be encoded params (Object): contains the following properties
| Encoding |
encodeWithinCollection (item, params) | encode a field using a visual channel item (Mark or Group): an example item to be encoded params (Object): contains the following contains the following properties
| Array of Encodings |
Methods: Create Guides
method | explanation | return type |
---|---|---|
axis(channel, field, params) | create an axis channel (String): the visual channel field (String): the data field params (Object, optional): contains one or more of the axis properties | Axis |
legend(channel, field, params) | create a legend channel (String): the visual channel field (String): the data field params (Object, optional): contains one or more of the legend properties | Legend |
gridlines(channel, field, params) | create a set of gridlines channel (String): the visual channel field (String): the data field params (Object, optional): contains one or more of the gridline properties | Gridlines |
Methods: Manage and Manipulate Items
method | explanation | return type |
---|---|---|
classify(items, field, parent) | group items by the specified field, items with the same field value are put in the same collection items (Array): an array of items field (String): field to group by parent (Scene or Collection): parent of the resulting collections | Array of Collections |
find(predicates) | returns graphical objects in the scene that match the specified criteria predicates (Array): an array of predicates | Array |
setProperties(item, params) | set the properties for all the peers of the specified item, return an object indicating setting each property is successful. item (Mark or Group or Layout): example item params (Object): property names as object keys and property values as object values | {property: Boolean} |
propagate(item, method, …params) | call the specified method for all the peers of the specified item item (Mark or Group): example item method (String): name of the item’s method params: parameters of the item’s method e.g., scene.propagate(path, "sortVertices", "x") | void |
translate(item, dx, dy) | move the item by the given distance, returns an object indicating if translating along x or y is successful. item (Mark or Group): item to move dx (Number): number of pixels to move in the x direction dy (Number): number of pixels to move in the y direction | {x: Boolean, y: Boolean} |
Methods: Specify Constraints
method | explanation | return type |
---|---|---|
align(items, anchor) | align the items so that they have the same position for the specified anchor items (Array): objects to be aligned anchor (String): anchor to align | void |
affix(item, baseItem, channel, params) | affix items to the specified base items in x or y direction item (Mark): an example item baseItem (Mark): an example base item channel (String): “x”, “y”, “angle”, or “radialDistance” params (Object, optional): additional parameters:
| void |
Methods inherited from Group
method | explanation | return type |
---|---|---|
addChild(c) | adds an object to the group | void |
addChildAt(c, i) | adds an object to the group at the specified index | void |
removeChild(c) | removes the specified object from the group | void |
removeAll() | removes all the children from the group | void |
getScene() | returns the scene in which this group resides | Scene |
sortChildren (channel, reverse) | sort the children by a visual channel channel (String): the channel to sort the children by reverse: (Boolean, optional) setting to true will sort in descending order; default is false. | void |
sortChildrenByData (field, reverse, order) | sort the children by a data field field (String): the data field to sort the children by reverse (Boolean, optional): setting to true will sort in descending order; default is false. order (Array, optional): an array of field values in ascending order | void |