Skip to content

Instantly share code, notes, and snippets.

@eesur eesur/README.md
Created May 29, 2015

Embed
What would you like to do?
d3 | slider

Simple slider using D3

Needed a simple solution to move a legend back and forth. This example shows the logic and uses javascripts offsetLeft to move the item (li in this case)

(function() {
'use strict';
var data = d3.range(0, 11); // [0, 1, 2, 3, 4 etc]
console.log('number of items in array: ' + data.length);
// variables for convenience
var ulID = 'ul-items',
liPrefix = 'li-';
// use a variable to keep count
var i = 0;
// create a list and populate with the data array
function addList() {
var indexValue = function(d, i) { return liPrefix + i; };
var ul = d3.select('#container').append('ul').attr('id', ulID);
ul
.selectAll('li')
.data(data)
.enter()
.append('li')
.attr('id', indexValue)
.text(indexValue);
}
// controls to navigate back and forward
function controlsNav(index) {
var nextBtn = d3.select('#legendNext');
var prevBtn = d3.select('#legendPrev');
nextBtn.on('click', function() {
// ensure buttons can't be clicked where there are no items
if (i < data.length-1) {
// ensure buttons are 'visually' active
nextBtn.style('opacity', 1);
prevBtn.style('opacity', 1);
// update value of counter
i++;
// set index to the value of i
index = i;
console.log('value of i NEXT: ' + i);
// move forward one
moveList(liPrefix + index);
} else {
// fade button out for user feedback
nextBtn.style('opacity', 0.2);
}
});
prevBtn.on('click', function() {
if (i >= 1) {
prevBtn.style('opacity', 1);
nextBtn.style('opacity', 1);
i--;
index = i;
console.log('value of i PREV: ' + i);
// move back one
moveList(liPrefix + index);
} else {
prevBtn.style('opacity', 0.2);
}
});
}
// offset items in list via their id // http://stackoverflow.com/a/24361041/1711570
function moveList(reference) {
var list = document.getElementById(ulID),
targetLi = document.getElementById(reference); // id tag of the <li> element
list.scrollLeft = (targetLi.offsetLeft -28);
console.log('offset value: ' + targetLi.offsetLeft);
}
// call the function(s)
addList();
controlsNav(i);
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | slider</title>
<meta name="author" content="Sundar Singh | eesur.com">
<link rel="stylesheet" href="main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<header>
<button id="legendPrev">Prev</button>
<button id="legendNext">Next</button>
</header>
<section id="container"></section>
<script src="d3_code_slider.js" charset="utf-8"></script>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
body {
font-family: "Source Code Pro", Consolas, monaco, monospace;
line-height: 1.5;
font-weight: 400;
background-color: #130C0E;
padding: 20px;
}
header {
width: 960px;
background: #130C0E;
height: 40px;
}
button {
font-family: "Source Code Pro", Consolas, monaco, monospace;
font-size: 14px;
background: #130C0E;
color: #7AC143;
border: none;
outline:none;
padding: 4px 8px;
letter-spacing: 1px;
}
button:hover {
background: #7AC143;
color: #130C0E;
}
#container {
font-size: 18px;
letter-spacing: 2px;
text-align: center;
white-space: nowrap;
width: 800px;
margin-top: 20px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
background: #FDBB30;
overflow: hidden;
}
li {
display: inline-block;
width: 100px;
padding: 40px 20px;
margin-right: 40px;
background: #7AC143;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.