RectangleChart.md

Rectangle Chart Component

mark Object in Graph Props

'mark': {
  'position': {
    'x': {
      'field': 'Year',
    },
  },
  'style': {
    'width': 0.2,
    'depth': {
      'field': 'Deaths',
    },
    'height': {
      'field': 'Tornadoes',
    },
    'fill': {
      'opacity': 0.4,
      'scaleType': 'ordinal',
      'field': 'Type',
      'color': ['red', 'green'],
    },
  }
}

Properties for mark for Rectangle Chart

Property	Type	Description
class	function	Returns the class (html class) for the bars 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 bars. Not Required.
id	function	Returns the id (html id) for the bars 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 bars. not Required.
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.x.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false.
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.width	float	Defines the width of the bar. Required
style.depth	object	Defines the depth of the bar. Required
style.depth.field	string	Defines the field in the data that will be mapped as depth of the bar. Required.
style.depth.domain	array	Defines the domain for depth. Not Required. If not present the domain is calculated from the provided data
style.depth.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false.
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.
style.fill	object	Defines the fill of the bar. Not 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.scaleType	string	Defines the scale type for fill of the bar. Not Required. If not present then a constant color that is defined is filled in the bar. Available values: linear or ordinal.
style.fill.field	string	Defines the field in the data that will be mapped as fill of the bar. 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 if style.fill.scaleType is present, else 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. Argument of the function is the data binded to the shape. Not Required

Note: The width 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

Year,Tornadoes,Deaths,Type
1996,35,1,1
1997,14,1,2
1998,71,0,1
1999,177,12,2