-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Charts
raw.chart()
Constructs a new chart.
chart.model([model])
If model is specified, sets the model used by the chart to the specified model. The model will be applied on the user dataset to obtain the data structure expected by the chart, according to the dimensions chosen by the user (see Model for more information). If model is not specified, returns the current model. The default value is the identity model.
chart.title([text])
If text is specified, sets the title of the chart to the specified text. If text is not specified, returns the current title. The default value is "Untitled". The title will be displayed in the GUI.
chart.description([text])
If text is specified, sets the description to be displayed to the specified text. If text is not specified, returns the current description. The default value is null.
chart.draw([function])
If function is specified, sets the drawing function to the specified function. If function is not specified, returns the current drawing function. The drawing function is passed two arguments: the selection and the data. The selection represents the SVG element where drawing the visualization, while data is the data structure resulting from running the model on the original records:
function(selection,data) {
// generate chart here...
}This function must contain the code necessary to generate the chart on the selection and using the data. Chart options (see below) must be used in this function to access the current values users selected for the corresponding values.
The draw function will be called any time the users change an option value. The svg will be cleared everytime before calling this function. In this way, D3's enter-update-exit pattern does not make much sense within RAW's charts, since the selection is always empty when passed to the draw function. Since RAW is meant to be a tool for the production of non-interactive visualizations, to be furtherly elaborated using vector-graphics tools, this should not be perceived as a limitation, but, at the contrary, as a way to simplify charts' drawing code.
In order to include all the styles within the SVG code and allow the users to export exactly what they are looking at in RAW, CSS styles cannot be used. Every style or attribute declaration has to be explicitly defined in the draw function (i.e. through .style or .attr D3's operators).
Chart options allow to bind chart variables to interface elements, allowing the user to control them. For each option, RAW constructs an adeguate interface element. RAW allows to create only certain types of option. Currently, the following types are available: number, checkbox, list and color. Each of this type of option provides specific methods (see below), however a set of methods are available to all the types.
option.title([text])
If text is specified, sets the title of the option to the specified text. If text is not specified, returns the current title. The default value is "Untitled". The title will be displayed in the GUI to indicate the user what the option is about.
option.description([text])
If text is specified, sets the description to be displayed to the specified text. If text is not specified, returns the current description. The default value is null.
option.type()
Returns the option type as a string (i.e. 'number' for number options).
option.defaultValue([value])
If value is specified, sets the initial value to the specified value. If value is not specified, returns the current default value. By default defaultValue is null.
option.reset()
Resets the option to its defaultValue.
Numbers bind numeric values to numeric INPUT elements.
chart.number()
Constructs a numeric option.
number()
Returns the numeric value bound to this option.
number.fitToWidth([boolean])
If boolean is specified, enables or disables the possibility to set the value of this option equal to the width of the avialble space in the browser. This can be useful to provide the user the possibility to set the width of the visualization to occupy all the available horizontal space. If boolean is not specified, returns the current value. By default this feature is disabled.
Checkboxes bind boolean values to CHECKBOX elements.
chart.checkbox()
Constructs a checkbox option.
checkbox()
Returns the boolean value bound to this option.
Lists bind values to SELECT elements. The user could choose one of the values through a dropdown menu.
chart.list()
Constructs a list option.
list()
Returns the value currently selected.
list.values([array])
If array is specified, sets the array of possible values to the specified array. If array is not specified, returns the list of possible values.
Colors bind color scales to color picker elements. Users can choose both the type of scale they want to use (e.g. ordinal, linear, ...) and the colors for the single values of the scale.
chart.color()
Constructs a new color option.
color.domain([colors[, accessor]])
If colors is specified, sets the domain of the color scale to colors. If colors is not specified, returns the current domain of the color scale. An optional accessor function may be specified, which is equivalent to calling colors.map(accessor) before setting the color domain.
This method must be called before using the color scale in the draw function.