Book Image

Mastering D3.js

Book Image

Mastering D3.js

Overview of this book

Table of Contents (19 chapters)
Mastering D3.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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...