Gramex Charts by Gramener

Improved scatterplot with size and color for each data point.

Tags: Vega

Scatterplot supports these features

and does not support

Options Help

Data is editable except for date/time columns.

When: applicable for fields that support data-based attribute values.

Consider that LabelFontWeight, Offset, TextAngle attributes accept an expression that's evaluated using data. Below are valid examples:

Attribute	Value	Description	Alternative value
LabelFontWeight	`datum['y'] > 20 ? 'bold' : 'normal'`	Here, `y` is a data column. Font weight is set as bold for arcs with values greater than 20 otherwise as normal weight.	`'normal'` (or 'bold' or other acceptable `font-weight` value) which sets all text to normal font weight.
Offset	`datum['y'] > 10 ? 10 : 50`	Here, `y` is a data column. Radial offset (in pixels) is evaluated to 50 if a specific arc's value is greater than 10.	`10` (or any other value) which applies offset to all text elements.
TextAngle	`datum['y'] < 10 ? 0 : -10`	Here, `y` is a data column. Text Angle is evaluated to -10 degrees for values greater than and equal to 10.	`-10` (or any other value) which rotates all text by -10 degrees.

All these can be read as: condition ? value_if_true : value_if_false.

Gramex Charts uses one function, up to three variables. Usage example.

variable	type	usage	Description
`data`	Array of Objects	required	Data for chart
`el`	DOM selector	required	Example usage: `$('.chart').get(0)`
`options`	Object	required	Attributes to control chart interactions

variable	type	usage	description
`data`	Array of Objects	required	Data for chart. Replace this with data from a JSON or data endpoint in your application.
`data_coltypes`	Object	required	Used to control scales for axes. Derived from g1.types
`base_spec`	JSON file or URL	optional	Typically, used for Vega charts. Docs. Example

Visit bookmarks for saved charts.