Color Scales
Overview
The color scale prefab provides utility class and methods for generating color scales and returning them in a variety of formats (hex, color3, material, etc.). This prefab can be used standalone or in conjunction with d3-scale. Additionally, these functions implement chroma.js to provide a variety of predefined schemes like color brewer, or your own custom color maps. We are also working on a few schemes of our own to come out later.
Usage
js
//returns list of color from scheme name or list of color hex codes
anu.ordinalChromatic(string | string[]).toColor3()
//returns function that accepts int 0-1 and returns corresponding color
anu.sequentialChromatic(string | string[]).toColor3()Color and Material Formats
| Method | Return |
|---|---|
| toColor3(steps) | returns type of color3 length of steps or scheme by default |
| toColor4(steps) | returns type of color4 length of steps or scheme by default |
| toStandardMaterial(steps) | returns type of standardMaterial length of steps or scheme by default |
| toPBRMaterialRough(steps) | returns type of PBRMetallicRoughnessMaterial length of steps or scheme by default |
| toPBRMaterialGlossy(steps) | returns type of PBRSpecularGlossinessMaterial length of steps or scheme by default |
Examples
js
//Creating some "data" as a simple object list of numbers 0-n
let data = [...Array(10).keys()].map((i) => { return {"data": i}})
//Create our color scale function
let color = d3.scaleOrdinal(anu.ordinalChromatic('d310').toColor3())
//Create spheres and bind our data to them,
//move spheres into position and apply our color or material
let spheres = anu.bind('sphere', {}, data)
.positionX((d) => d.data)
.material(() => new BABYLON.StandardMaterial("mat"))
.diffuseColor((d) => color(d.data))