Controls

controls

object

The controls object represents a set of inputs that are rendered with standard HTML <input> and <select> elements. These inputs manipulate any charts associated with this control object by either assigning new values to the charts' config properties (to change the charts' appearance or behavior) or changing the objects in the charts' filters array (to subset the data that is visualized in the chart).

controls.div

string

CSS selector identifying the DOM element housing the rendered controls

controls.data

array

raw (unfiltered, untransformed) dataset stored by the controls; this dataset is passed to the controls object from any associated chart object

controls.config

object

an object specifying controls settings

config.inputs

array

an array of objects, each of which defines an input that controls some aspect of any associated charts

input.type

string

determines what type of input is rendered; types can be:

• "text" renders a <input type="text"> element whose value is assigned to a given option
• "number" renders a <input type="number"> element whose value is assigned to a given option
• "list" renders a <input type="text"> element whose comma-separated values are parsed into an array that is assigned to a given option
• "dropdown" renders a <select> element whose value is assigned to a given option
• "btngroup" renders a set of <button> elements; the value for the active button is assigned to a given option
• "checkbox" renders a <input type="checkbox"> element that toggles the value assigned to a given option
• "radio" renders a set of <input type="radio"> elements that toggle the value assigned to a given option
• "subsetter" renders a <select> element whose value is used to filter the data displayed in associated charts

input.label

string

label describing the input that appears above the <input> element itself

input.option

string

applies only when input.type is not set to "subsetter"
a string that references an option in the target charts' config object that the input can manipulate; nested options can be specified using dot notations, such as "x.type"

input.values

array

applies only when input.type is not set to "text", "number", "list", or "checkbox"
an array of values to populate the input; these values are typically strings that map to possible values for the given option, such as "linear" and "log" for the x.type option or dataset columns for the x.column option; if this array is not explicitly defined, the values will default to all possible columns from the dataset

default: automatic

input.value_col

string

applies only when input.type is set to "subsetter"

a column from the dataset that will be used to filter any target charts

input.start

string

applies only when input.type is set to "subsetter"

specifies the initial value the subsetter is set to; if specified, the subsetter will not contain the All option

input.require

boolean

applies only when input.type is set to "dropdown"

dictates whether option underlying the control must be selected or not; when set to true, a None option appears in the select element

input.none

boolean

applies only when input.type is set to "dropdown"

dictates whether option underlying the control must be selected or not; when set to true, a None option appears in the select element

input.required

boolean

indicates that the control requires an option; adds an outlined, red span to the control group with the text Required

input.callback

function

a callback function that will be called immediately before the target charts are redrawn; can be useful to changing multiple chart configuration options or otherwise triggering multiple changes at once

controls.targets

array

a list of chart objects that the controls object can manipulate

controls.wrap

d3.selection

a d3 selection of a <div> appended within the DOM element specified by div

controls.changeOption(option, value)

maniuplates the config objects for each associated chart and calls their .draw() methods to trigger re-rendering

Param	Type	Description
option	string	property of the config object to change
value	any	the new value to assign to the given option

controls.init(raw)

initializes the controls object by parsing the data provided by raw and triggering rendering of all inputs specified in config

Param	Type	Description
raw	array	raw data to be used to populate control inputs

controls.layout()

clears the container div and triggers rendering of control inputs

controls.controlUpdate()

triggers rendering of each input as defined by the inputs array in config

controls.makeBtnGroupControl(control, control_wrap)

renders a set of buttons; the value represented by the highlighted (clicked) button is assigned to the given option

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.makeCheckBoxControl(control, control_wrap)

renders a checkbox that toggles the value assigned to a given option

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.makeDropdownControl(control, control_wrap)

renders a <select> element whose value is assigned to a given option

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.makeNumberControl(control, control_wrap)

renders a <input type="number"> element whose value is assigned to a given option

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.makeRadioControl(control, control_wrap)

renders a set of radio buttons that toggles the value assigned to a given option

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.makeSubsetterControl(control, control_wrap)

renders a <select> element whose value is used to filter the data displayed in associated charts

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.makeTextControl(control, control_wrap)

renders a <input type="text"> element whose value is assigned to a given option

Param	Type	Description
control	object	an object describing the input from the inputs array from the config object
control_wrap	d3.selection	the selected element in which to append the rendered input

controls.destroy()

Removes all components of the controls from the DOM. Added in version 1.7.0