Skip to content

Latest commit

 

History

History
137 lines (127 loc) · 17.7 KB

TreeMap.md

File metadata and controls

137 lines (127 loc) · 17.7 KB
Raw

TreeMap Component

TreeMap

Note: The height attribute in the style object in the graph component defines the range for the heights of the boxes.

mark Object in Graph Props

'mark': {
  'style': {
    'paddingInner': 0.5,
    'paddingOuter': 0.1,
    'extrusion': {
      'field': 'size',
      'startFromZero': true,
    },
    'fill': {
      'scaleType': 'ordinal',
      'opacity': 1,
    },
  },
}

Properties for mark for Tree Map

Property Type Description
class function Returns the class (html class) for the boxes as a function of the data. If space in present then the 2 string with space in between will be taken as different classes. Classes cannot begin with a number and nust not contain any special characters expect. This can be used for animating or creating interactions with the boxes. Not Required.
id function Returns the id (html id) for the boxes as a function of the data. If space in present then the 2 string with space in between will be taken as different id. ids cannot begin with a number and nust not contain any special characters expect. No 2 ids must be same as id acts as a unique identifier. This can be used for animating or creating interactions with the boxes. not Required.
style object Defines the style for the planes. Required.
style.paddingInner float Defines the inner padding for the boxes i.e. the padding between the boxes belonging to the same category. Not Required. Default value: 0.01
style.paddingOuter float Defines the outer padding the boxes i.e. the padding between the boxes belonging to the different category. Not Required. Default value: 0.005
style.extrusion object Defines the height of the boxes. Required.
style.extrusion.field string Defines the field in the data that will be mapped as height of the box. Required.
style.extrusion.domain array Defines the domain for height. Not Required. If not present the domain is calculated from the provided data depending on the style.extrusion.scaleType
style.fill object Defines the fill of the box. Not Required.
style.fill.opacity float Defines the opacity of the box. Not Required. Default value: 1 Value must be between 0 and 1.
style.fill.scaleType string Defines the scale type for fill of the box. Not Required. If not present then a constant color that is defined is filled in the box. Available values: linear or ordinal.
style.fill.field string Defines the field in the data that will be mapped as fill of the box. Required if style.fill.scaleType is present.
style.fill.domain array Defines the domain for fill. Not Required. If not present the domain is calculated from the provided data depending on the style.fill.scaleType
style.fill.color array or string Defines the color for fill. Not Required. Default value: #ff0000 if style.fill.scaleType is not present else d3.schemeCategory10. If style.fill.scaleType is not present the this needs to be a string otherwise an array.
style.fill.startFromZero boolean Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if style.fill.color is not given and style.fill.scaleType is linear.
mouseOver Object Defines the mouseOver effect on the bars. Not Required. If not present no mouse over effect happens.
mouseOver.focusedObject object Defines the style for the mouseOver effect on the bar. Required.
mouseOver.focusedObject.opacity float Defines the opacity of bar when mouse hovers on it. Required.
mouseOver.focusedObject.fill string Defines the color of bar when mouse hovers on it. Required.
mouseOver.nonFocusedObject object Defines the style for the bar not in focus. Required.
mouseOver.nonFocusedObject.opacity float Defines the opacity of bar which are not in focus when mouse hovers on a particular bar. Required.
mouseOver.label object Defines the value and style of the mouse over text. Not Required. If not present the label is not shown.
mouseOver.label.value function Returns the value of the text that is to be shown in the label. Required. \n can be used for new line.
mouseOver.label.align string Defines the alignment of the text in the label. Required. Available values: center, left or right.
mouseOver.label.fontColor string Defines the color of the text in the label. Required.
mouseOver.label.lineHeight float Defines the line height of the text in the label. Not Required.
mouseOver.label.wrapCount int Defines the wrap count of the text in the label. Not Required.
mouseOver.label.backgroundColor string Defines the color of the background of the label. Required.
mouseOver.label.backgroundOpacity string Defines the color of the background of the label. Required.
mouseOver.label.position string Defines the position of the label w.r.t the cursor. Not Required. Format is "0 0 0".
mouseOver.label.rotation string Defines the rotation of the label w.r.t the cursor. Not Required. Format is "90 0 0".
mouseOver.label.width float Defines the width of the label. Not Required.
mouseOver.label.height float Defines the height of the label. Not Required.
onClick function Callback function for mouseclick on the shape. Arguments of the function are the data and the parent binded to the shape. Not Required

Example JS of the Visualization

Data

Datafile: json

{
  "name": "flare",
  "children": [
    {
      "name": "analytics",
      "children": [
        {
          "name": "cluster",
          "children": [
            {
              "name": "AgglomerativeCluster",
              "size": 3938
            },
            {
              "name": "CommunityStructure",
              "size": 3812
            },
            {
              "name": "HierarchicalCluster",
              "size": 6714
            },
            {
              "name": "MergeEdge",
              "size": 743
            }
          ]
        },
        {
          "name": "graph",
          "children": [
            {
              "name": "BetweennessCentrality",
              "size": 3534
            },
            {
              "name": "LinkDistance",
              "size": 5731
            },
            {
              "name": "MaxFlowMinCut",
              "size": 7840
            },
            {
              "name": "ShortestPaths",
              "size": 5914
            },
            {
              "name": "SpanningTree",
              "size": 3416
            }
          ]
        },
        {
          "name": "optimization",
          "children": [
            {
              "name": "AspectRatioBanker",
              "size": 7074
            }
          ]
        }
      ]
    },
  ]
}