Book Image

Mastering D3.js

By : Pablo Navarro Castillo, Pablo Navarro Castillo
Book Image

Mastering D3.js

By: Pablo Navarro Castillo, Pablo Navarro Castillo

Overview of this book

Table of Contents (19 chapters)
Mastering D3.js
About the Author
About the Reviewers

Creating a color picker

We will implement a color picker using the slider from the previous section. A color picker is a UI control that allows the user to select a color. Usually, the color picker is shown as a small, colored rectangle, and when the user clicks on it, a window is opened with controls to change the color. To follow the code snippets, open the chapter04/02-color-picker.html file. Refer to the following screenshot:

The color picker selector and window that uses the sliders from the previous section

We will implement the color picker using the reusable chart pattern. This will allow us to modularize the components in two parts, the color picker selector and the color picker window. We begin by creating the color picker selector.

The color picker selector

The control element will be shown as a small rectangle. When the user clicks on the rectangle, the color picker will appear, and clicking on the control again will set the value. We will create a color picker using the CIELAB 1976...