How to build sliders with d3.
jsA tutorial for making sliders with HTML and JavascriptKaren McClellanBlockedUnblockFollowFollowingApr 26Critical Making (APRD 5019-001)Project Update: Prototyping with codeI’m coding a prototype of a key user flow, and needed to create the ability for test users to customize the look of a blob.
For the prototype controls, I decided to use d3.
js to create sliders that the test users can manipulate.
This tutorial walks through the steps I took to build out the sliders, as well as the resources I found useful along the way.
Step-by-StepSet up your work space.
Set up your files in a directory:index.
htmlmain.
jsmain.
cssDownload d3.
js and unzip to your project folder, or alternatively you can link to the script at the bottom of your html file:<script src="https://d3js.
org/d3.
v5.
min.
js"></script>Install d3-simple-slider via Terminal with npm install d3-simple-slider or you can download from github.
Set up your HTML & CSS docs.
I’ll leave the CSS up to you, but here’s a basic setup for index.
html with 2 div elements we’ll end up calling on in our main.
js file.
The first, id="mood", contains an SVG, which is what we’ll manipulate with the sliders.
(I generated the SVG using Blobmaker, a new obsession.
) The second, id="slider-color-picker", is empty for now.
The javascript will do the work of building out the slider.
<!DOCTYPE html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>Slider Test</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/main.
css"></head><body><div id="mood"> <svg width="600" height="600" viewBox="100 100 600 600" xmlns="http://www.
w3.
org/2000/svg"> <g transform="translate(300,300)"> <path id="blob" d="M134.
3,-82C181.
6,-47.
8,232.
7,8.
5,224.
6,54.
2C216.
5,99.
9,149.
2,135.
1,86.
2,157C23.
1,179,-35.
7,187.
7,-88.
9,168.
3C-142,149,-189.
5,101.
5,-205,43.
8C-220.
5,-13.
8,-204.
1,-81.
7,-164.
6,-114.
1C-125.
1,-146.
4,-62.
5,-143.
2,-9.
5,-135.
6C43.
5,-128,87,-116.
1,134.
3,-82Z" fill="#7bdcb5" stroke="none" stroke-width="0"></path> </g> </svg></div><div id="slider-color-picker"></div><script src="d3.
js"></script><script src="d3-simple-slider"></script><script src="main.
js"></script></body></html>Set up main.
js.
Let’s walk through the script.
First, we set variables for the SVG and the colorSlider div we set up in index.
htmlvar blob = document.
getElementById('blob');var colorSlider = document.
getElementById('slider-color-picker');Next, we write a function that will convert rgb values to hex:var num2hex = rgb => { return rgb .
map(color => { let str = color.
toString(16);if (str.
length === 1) { str = '0' + str; }return str; }) .
join('');};var rgb = [100, 0, 0];var colors = ['red', 'green', 'blue'];Then we select the div we named in index.
html and append an SVG that essential acts as a canvas for the 3 rgb sliders we’ll call in a minute.
var gColorPicker = d3 .
select('div#slider-color-picker') .
append('svg') .
attr('width', 375) .
attr('height', 200) .
append('g') .
attr('transform', 'translate(30,30)');Next, we name the function that calls and styles the sliders for each of r, g, and b.
(For different styles of sliders, check out John Walley’s tutorial.
) This script also changes the color of the blob to the rgb values chosen on the sliders.
Finally, you invoke the slider canvas and call the slider function.
rgb.
forEach((color, i) => { var slider = d3 .
sliderBottom() .
min(0) .
max(255) .
step(1) .
width(300) .
ticks(0) .
default(rgb[i]) .
displayValue(false) .
fill(colors[i]) .
handle( d3 .
symbol() .
type(d3.
symbolCircle) .
size(200)() ) .
on('onchange', num => { rgb[i] = num; blob.
style.
fill = `#${num2hex(rgb)}`; }); gColorPicker .
append('g') .
attr('transform', `translate(30,${60 * i})`) .
call(slider);});Test it out and tweak as needed.
You should have a working blob and rgb slider set now.
Play around with it and make changes as needed!Helpful resources I used:d3 Simple Slider tutorial (John Walley)d3js documentation (Data Driven Documents).. More details