D3.js color.brighter() Function - GeeksforGeeks

28 Jul, 2020
The color.brighter() function of D3.js is used to make a copy of the color with some extra brightness or darkness in the original color.
Syntax:
color.brighter(k)

Parameter: This function accepts only one parameter k is the amount of brightness required in the original color. It is the Integer value.
Return Values: It returns the object.
Example 1: When the value of k is not given
HTML
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta            name="viewport"            content="width=device-width,                      initial-scale=1.0"/>        <title>D3.js color.brighter() Function</title>    </head>    <style>        .box {            height: 100px;            width: 100px;        }        .box1 {            height: 100px;            width: 100px;        }    </style>    <body>        Color without color.brighter() property        <div class="box"></div>        Color with color.brighter() property        <div class="box1"></div>        <!--fetching from CDN of D3.js -->        <script type="text/javascript" src=                "https://d3js.org/d3.v4.min.js">        </script>        <script>            let box = document.querySelector(".box");            let box1 = document.querySelector(".box1");            var color = d3.color("green");            box.style.backgroundColor =               `rgb(${color.r},${color.g},${color.b})`;            var color = color.brighter();            box1.style.backgroundColor =               `rgb(${color.r},${color.g},${color.b})`;        </script>    </body></html>
Output:
Example 2:
HTML
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta name="viewport"              content="width=device-width,                        initial-scale=1.0" />        <title>D3.js color.brighter() Function</title>    </head>    <style>        .box {            height: 100px;            width: 100px;        }        .box1 {            height: 100px;            width: 100px;        }    </style>    <body>        Color without color.brighter() property        <div class="box"></div>        Color with color.brighter(10) property        <div class="box1"></div>        <!--fetching from CDN of D3.js -->        <script type="text/javascript" src=                "https://d3js.org/d3.v4.min.js">        </script>        <script>            let box = document.querySelector(".box");            let box1 = document.querySelector(".box1");            var color = d3.color("green");            box.style.backgroundColor =               `rgb(${color.r},${color.g},${color.b})`;            var color = color.brighter(10);            box1.style.backgroundColor =               `rgb(${color.r},${color.g},${color.b})`;        </script>    </body></html>
Output:
Example 3: When value of k < 0
HTML
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta name="viewport"               content="width=device-width,                        initial-scale=1.0" />        <title>D3.js color.brighter() Function</title>    </head>    <style>        .box {            height: 100px;            width: 100px;        }        .box1 {            height: 100px;            width: 100px;        }    </style>    <body>        Color without color.brighter() property        <div class="box"></div>        Color with color.brighter(-10) property        <div class="box1"></div>        <!--fetching from CDN of D3.js -->        <script type="text/javascript" src=                "https://d3js.org/d3.v4.min.js">        </script>        <script>            let box = document.querySelector(".box");            let box1 = document.querySelector(".box1");            var color = d3.color("green");            box.style.backgroundColor =               `rgb(${color.r},${color.g},${color.b})`;            var color = color.brighter(-10);            box1.style.backgroundColor =              `rgb(${color.r},${color.g},${color.b})`;        </script>    </body></html>
Output:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?