Mascot.js
v4.0.

Join Elements with Data

These operations join elements with data or restructure data-bound collections.

msc.attach(elem, table)

Attaches an entire data table to a single mark or group.

msc.classify(coll, params)

Classifies the children of a collection into nested collections by a data attribute.

  • coll: Collection
  • params (Object):
    • attribute: data attribute used to classify the collection children
    • layout (Layout, optional): layout for the new nested collections
  • Return type: Collection
classify operation

The classify operation groups a collection’s children into nested sub-collections by a data attribute. Children sharing the same attribute value get placed in the same sub-collection.

msc.densify(elem, data, params)

Creates a denser mark from an existing element by a data attribute.

  • elem: Mark such as a line, circle, or rect
  • data: DataTable
  • params (Object, optional):
    • attribute: data attribute used to densify the element, defaults to tuple ID
    • orientation: orientation for densifying rectangle-based elements
  • Return type: Mark
densify operation

The densify operation adds N vertices along a mark’s boundary, replacing curves with line segments. Each vertex is a peer bound to a unique attribute value. Area marks receive 2N vertices (N per parallel edge).

msc.divide(elem, data, params)

Divides an element by a data attribute and returns both the new mark and the resulting collection.

  • elem: Mark
  • data: DataTable
  • params (Object, optional):
    • attribute: data attribute used to divide the element, defaults to tuple ID
    • orientation: orientation for the divide operation
  • Return type: object containing newMark (Mark) and collection (Collection)
divide operation

The divide operation splits a mark into N peers within the same spatial area. Output structure depends on the mark type and the orientation parameter. N is the number of unique values in the specified attribute.

msc.repeat(elem, data, params)

Repeats an element across a data table, tree, or network.

repeat operation

The repeat operation produces N peers — one per unique attribute value. Peers share the same initial position and visual properties; they are shown side-by-side here for clarity.

msc.repopulate(coll, dt, mapping)

Repopulates a nested collection using a new data table and attribute mapping.

  • coll: Collection
  • dt: DataTable
  • mapping (Object): maps each collection level to a data attribute
  • Return type: void
repopulate operation

The repopulate operation remaps a nested collection to a new data table, mapping each nesting level to a data attribute. The output structure follows the new data and does not need to match input.

msc.stratify(elem, tree, params)

Creates a stratified collection from a rect, circle, or ring using tree data.

  • elem: a rect, circle, or ring Mark
  • tree: Tree or an array of Tree objects
  • params (Object, optional):
    • direction: direction for the strata layout
    • startFromLeaf: whether to build strata from leaves
    • size: thickness or size of each stratum
  • Return type: Collection
stratify operation

The stratify operation turns a single rect, circle, or ring into a stratified collection from tree data i.e. an icicle, sunburst, or set of nested rings respectively. Each level of the tree becomes a strata, subdivided by branch.