"D3.js Premium Series-5.0" color

Color is the concept of the construction of a few, commonly used standards have RGB and HSL,D3 provides a way to create color objects, can be converted and interpolated.

The RGB color mode is a variety of colors by overlaying red (red), Green, and Blue (blue) three color channels. The values of the three channels are all 0~255, thus representing a total of 16777216 (256 * 256 * 256) species, or more than 16 million. Almost all of the colors that human beings can recognize are one of the most widely and most easily understood color systems.

The HSL color mode is obtained by adding three channels of hue (hue), saturation (saturation), and lightness (lightness) to each other for a variety of colors. wherein, the hue range is 0°~360°, the saturation range is 0~1, the brightness range is 0~1. The hue value is an angle, each angle can represent the color, it should be remembered that 0° or 360° represents red, 120° is green, and 240° represents blue. The greater the saturation value, the brighter the color and the less gray. The value of lightness is used to control the light and shade of the color, the higher the value, the brighter, the closer to the white; the smaller the value, the darker, the closer the black.

RGB colors and HSL colors can be converted to each other.

1. RGB

D3, the creation of RGB colors, adjustment and shading, conversion to HSL and other methods are described below.

• D3.rgb (R, G, b)

Output R, G, and B values respectively to create colors, ranging from [0, 255].

• D3.rgb (color)

Enter the appropriate string to create the color, for example:

(1) Decimal value of RGB: "RGB (255, 255, 255)"

(2) HSL decimal value: "HSL (120, 0.5, 0.5)"

(3) hexadecimal value of RGB: "#ffeeaa"

(4) The abbreviated form of the hexadecimal value of RGB: "#fea"

(5) Color name: "Red", "white"

• Rgb.brighter ([K])

The color becomes brighter. The values of the RGB channels are multiplied by 0.7 ^-K. If k is omitted, the value of K is 1. The corresponding calculation occurs only when the range of values for a channel is between 30-255.

• Rgb.darker ([K])

The color becomes darker. The values of the RGB channels are multiplied by 0.7 ^ K.

• RGB.HSL ()

Returns the HSL value corresponding to the color.

• Rgb.tostring ()

Returns the color value as a string, such as "#ffeeaa."

It is important to note that brighter () and darker () do not change the current color itself, but instead return a new color, and the value of the new color has changed accordingly. Take a look at the following code.

var color1 = D3.rgb (40,80,0), var color2 = D3.rgb ("red"), var Color3 = D3.rgb ("RGB (0,255,255)"),//lightens the Color1 color, and the color of the return value is R:8  1, g:163, B:0console.log (Color1.brighter (2));//The original color value is unchanged, still r:40, g:80, B:0console.log (Color1);//The Color2 color is lightened, the color of the return value is  r:124, g:0, B:0console.log (Color2.darker (2));//The original color value is unchanged, still r:255, g:0, B:0console.log (COLOR2);//output Color3 color HSL value, h: S:1, L:0.5console.log (COLOR3.HSL ());//Output #00ffffconsole.log (color3.tostring ());

The function brighter (), darker (), HSL () return all objects, not strings, the first two functions return an RGB object, and the last function returns a HSL object.

2. HSL

The HSL color is created and used in almost the same way as the RGB color, except that the values of each channel are different.

• D3.HSL (H, S, l): Create HSL colors based on values of H, S, l
• D3.HSL (color): Create HSL colors based on strings
• Hsl.brighter ([K]): Becomes brighter
• Hsl.darker ([K]): becomes darker
• Hsl.rgb (): Returns the corresponding RGB color
• hsl.tostring (): Output This color as an RGB string

For HSL colors, brighter () and darker () are well understood to change the lightness value of the color. Take a look at the following code.

var HSL = D3.HSL (120,1.0,0.5);//Returns the object, h:120, s:1.0, L:0.714console.log (Hsl.brighter ());//Returns the object, h:120, s:1.0, l:0. 35console.log (Hsl.darker ());//The object returned, r:0, g:255, B:0console.log (Hsl.rgb ());//Output #00ff00console.log (hsl.tostring () );

In general, programmers prefer to use RGB colors for better understanding. Art people prefer the HSL color, which allows for easy adjustment of saturation and brightness.

3. Interpolation

Often there is the need to get a value between two color values, which is used to interpolate (interpolation). D3 provides D3.INTERPOLATERGB () to handle interpolation operations between RGB colors, D3.INTERPOLATEHSL () to handle the operation between HSL colors. It is more convenient to use D3.interpolate (), which automatically determines which function to call. D3.interpolate () can also handle interpolation between numeric values, strings, and so on. Take a look at the example below.

var a = D3.rgb (255,0,0);//red var B = D3.rgb (0,255,0);//green var compute = D3.interpolate (A, b); Console.log (Compute (0));//Output # Ff0000console.log (Compute (0.2));//Output #cc3300console.log (COMPUTE (0.5));//Output #808000console.log (COMPUTE (1));//Output # 00ff00console.log (Compute (2));//Output #00ff00console.log (Compute (-1));//Output #ff0000

In this code, two colors are defined: red and green. Then call D3.interpolate (A, B), return a function, and save the function in compute. At this point, compute is a function that receives a value of 0 o'clock, returns a red value of 1 o'clock, and returns green. When the value is from 0 to 1, the color between red and green is returned. If the input value exceeds 1, the return is green and the value is less than 0, then the red is returned, which is determined by the order in which the parameters are passed when the D3.interpolate (A, b) is called.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: April 19, 2015
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

"D3.js Premium Series-5.0" color