HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Color Scale
A function for mapping from a number domain to a color range. The range is specified as a list of points, and linear interpolation is used to calculate colors in the range.
Examples
var scale = new hx.ColorScale(0, 1, [
  {color:hx.theme.plot.colors[5], val:5/6},
  {color:hx.theme.plot.colors[2], val:2/6},
  {color:hx.theme.plot.colors[1], val:1/6},
  {color:hx.theme.plot.colors[4], val:4/6},
  {color:hx.theme.plot.colors[3], val:3/6},
  {color:hx.theme.plot.colors[0], val:0},
  {color:hx.theme.plot.colors[6], val:1}
]);

scale.apply(0.5);
Api
Change Log
Prototypes
hx.ColorScale
Constructors
hx.ColorScalestartNumberendNumberrangeArray[Object]
A class for converting a number to a color, using a mapping from a linear scale to an array of colors. Interpolation happens between colors in the color array.
Arguments
startNumber
The minimum value for the domain.
endNumber
The maximum value for the domain.
rangeArray[Object]
An array of objects containing a color and a percentage value that defines it's position within the domain.
The range must be in the following format: 
[
  {color:"#000000", val:0},
  {color:"#888888", val:0.5},
  {color:"#FFFFFF", val:1}
]
The values don't have to start at 0 and end at 1, points in the domain that fall outside of the range will return the min/max values from the range. The range array is sorted internally so the values do not have ot be entered in order. The following is an example of another valid range: 
[
  {color:"rgba(255,170,100,0.5)", val:0.75},
  {color:"#888888", val:0},
  {color:"#FFFFFF", val:0.5}
]
Methods
applyvNumberString
Return the color of a value within the scale. The value can be outside the domain, in this situation the color returned will be either the min or max color value from the range.
Arguments
vNumber
The value to convert to a color.
Returns
String
The color as a string
domainstartNumberendNumberColorScale
Set the domain for the scale.
Arguments
startNumber
The minimum value for the domain.
endNumber
The maximum value for the domain.
Returns
ColorScale
This ColorScale for chaining
rangerangeArray[Object]ColorScale
Set the range for the scale.
Arguments
rangeArray[Object]
An array of objects containing a color and a percentage value that defines it's position within the domain.
The range must be in the following format: 
[
  {color:"#000000", val:0},
  {color:"#888888", val:0.5},
  {color:"#FFFFFF", val:1}
]
The values don't have to start at 0 and end at 1, points in the domain that fall outside of the range will return the min/max values from the range. The range array is sorted internally so the values do not have ot be entered in order. The following is an example of another valid range: 
[
  {color:"rgba(255,170,100,0.5)", val:0.75},
  {color:"#888888", val:0},
  {color:"#FFFFFF", val:0.5}
]
Returns
ColorScale
This ColorScale for chaining