Skip to content

Latest commit

 

History

History
115 lines (105 loc) · 11.1 KB

StackedBarGraph.md

File metadata and controls

115 lines (105 loc) · 11.1 KB
Raw

StackedBargraph Component

StackedBargraph

mark Object in Graph Props

'mark': {
  'position': {
    'x': {
      'field': 'Quarters',
    },
    'z': {
      'field': 'Countries',
    }
  },
  'type': 'box',
  'style': {
    'padding': {
      'x': 0.1,
      'z': 0.1,
    },
    'height': {
      'field': ['Cars', 'Trucks', 'Bikes'],
      'startFromZero': true,
    },
    'fill': {
      'opacity': 0.4,
      'color': ['green', 'blue', 'red'],
      'field': ['Cars', 'Trucks', 'Bikes'],
    },
  }
}

Properties for mark for Stacked Bar Graph

Property Type Description
type string Defines type of bar that would be created. Not Required. Default value: box. Available values: box, cylinder.
position object Defines the how the position of bars will be mapped. Required
position.x object Required.
position.x.field string Defines the field in the data that will be mapped as x position of the bar. Required.
position.x.domain float Defines the domain for x position. Not Required. If not present the domain is calculated from the provided data depending on the position.x.scaleType.
position.z object Required.
position.z.field string Defines the field in the data that will be mapped as z position of the bar. Required.
position.z.domain array Defines the domain for z position. Not Required. If not present the domain is calculated from the provided data depending on the position.z.scaleType.
style object Defines the style for the bar. Required.
style.padding object Defines the spacing between the bar. Not Required.
style.padding.x object Defines the spacing between the bar along x axis. Not Required. Default value: 0.1. Value must be between 0 and 1.
style.padding.z object Defines the spacing between the bar along z axis. Not Required. Default value: 0.1. Value must be between 0 and 1.
style.segments int Defines the no. of segments in bar, if the bar is a cylinder or cone. Not Required. Default value: 16.
style.height object Defines the height of the bar. Required.
style.height.field string Defines the field in the data that will be mapped as height of the bar. Required.
style.height.domain array Defines the domain for height. Not Required. If not present the domain is calculated from the provided data
style.height.startFromZero boolean Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if style.height.domain is not given and style.height.scaleType is linear.
style.fill object Defines the fill of the bar. Required.
style.fill.opacity float Defines the opacity of the bar. Not Required. Default value: 1. Value must be between 0 and 1.
style.fill.field array of string Defines the field in the data that will be mapped as fill of the bar. Required
style.fill.color array Defines the color for fill. Not Required.Default value: d3.schemeCategory10. An array of string.
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. Argument of the function is the data binded to the shape. Not Required

Note: The width and depth or radius of the bar is calculated depending upon the dimensions of the graph and padding in between the bars.

Example JS of the Visualization

Data

Datafile: csv

Countries,Quarters,Cars,Trucks,Bikes
USA,First,119,143,10
Canada,First,104,30,10
Europe,First,58,83,10
Mexico,First,134,88,10
Asia,First,119,60,10
Africa,First,22,16,10
USA,Second,127,96,10
Canada,Second,31,25,10
Europe,Second,32,87,10
Mexico,Second,161,105,10
Asia,Second,141,118,10
Africa,Second,34,26,10
USA,Third,64,74,10
Canada,Third,139,87,10
Europe,Third,59,103,10
Mexico,Third,80,162,10
Asia,Third,111,128,10
Africa,Third,29,14,10
USA,Fourth,153,127,10
Canada,Fourth,70,56,10
Europe,Fourth,56,30,10
Mexico,Fourth,103,144,10
Asia,Fourth,144,169,10
Africa,Fourth,45,33,10