Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/README.md

Last active June 10, 2016 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SpaceActuary/c23470248705f04f46cedcf56cac02e8 to your computer and use it in GitHub Desktop.
Save SpaceActuary/c23470248705f04f46cedcf56cac02e8 to your computer and use it in GitHub Desktop.
Download ZIP
sliders
Raw
cubehelix.min.js
!function(){function t(t){return function(e,i){e=d3.hsl(e),i=d3.hsl(i);var r=(e.h+120)*a,h=(i.h+120)*a-r,s=e.s,l=i.s-s,o=e.l,u=i.l-o;return isNaN(l)&&(l=0,s=isNaN(s)?i.s:s),isNaN(h)&&(h=0,r=isNaN(r)?i.h:r),function(a){var e=r+h*a,i=Math.pow(o+u*a,t),c=(s+l*a)*i*(1-i);return"#"+n(i+c*(-.14861*Math.cos(e)+1.78277*Math.sin(e)))+n(i+c*(-.29227*Math.cos(e)-.90649*Math.sin(e)))+n(i+c*1.97294*Math.cos(e))}}}function n(t){var n=(t=0>=t?0:t>=1?255:0|255*t).toString(16);return 16>t?"0"+n:n}var a=Math.PI/180;d3.scale.cubehelix=function(){return d3.scale.linear().range([d3.hsl(300,.5,0),d3.hsl(-240,.5,1)]).interpolate(d3.interpolateCubehelix)},d3.interpolateCubehelix=t(1),d3.interpolateCubehelix.gamma=t}();
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="cubehelix.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
.slider .background { stroke: #ccc; stroke-width: 5px; fill: none; }
</style>
</head>
<body>
<script>
console.clear()
var margin = {top: 10, right: 10, bottom: 10, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var rainbow = d3.scale.cubehelix()
.domain([0, .5, 1])
.range([
d3.hsl(-100, 0.75, 0.35),
d3.hsl( 80, 1.50, 0.80),
d3.hsl( 260, 0.75, 0.35)
])
var size = {height: 100, width: 500,
target: {height: 100, width: 50}}
var horizontalSlider = function(){
var sliderX = 0,
sliderY = 0,
sliderHeight = 100,
sliderWidth = 100,
horizontal = true;
var _bar;
var scale = d3.scale.linear()
.range([0, sliderWidth])
.domain([0, 100])
.nice()
.clamp(true);
var brush = d3.svg.brush()
.x(scale)
.extent([0, 0])
.on("brush", brushed)
.on("brushend", brushended);
function thisSlider(selection) {
selection.each(function(raw){
if (horizontal) scale.range([0, sliderWidth]);
if (!horizontal) scale.range([sliderHeight, 0]);
var _slider = d3.select(this)
.attr("transform", "translate(" + sliderX + "," + sliderY + ")")
.attr("class", "slider")
.call(brush);
_slider.selectAll(".extent,.resize")
.remove();
_slider.select(".background")
.attr("height", sliderHeight)
.attr("width", sliderWidth)
.style("cursor", horizontal ? "ew-resize": "ns-resize")
.style("visibility", "visible");
_bar = _slider.append("rect")
.attr("class", "slider-bar")
.style("pointer-events", "none")
.attr({x: 0, y: 0, width: sliderWidth, height: sliderHeight})
_slider
.call(brush.extent([100, 100]))
.call(brush.event)
.transition().duration(3000).ease("bounce")
.call(brush.extent([10, 10]))
.call(brush.event);
});
}
function brushed() {
var value = brush.extent()[0];
//console.log(value)
if (d3.event.sourceEvent) { // not a programmatic event
value = scale.invert(d3.mouse(this)[horizontal ? 0 : 1]);
brush.extent([value, value]);
}
_bar.attr("x", 0)
.attr("y", horizontal ? 0 : sliderHeight - scale(value) )
.attr("width", horizontal ? scale(value) : sliderWidth)
.attr("height", horizontal ? sliderHeight : scale(value))
.style("fill", rainbow(scale(value) /
(horizontal ? sliderWidth : sliderHeight)));
}
function brushended() {
var value = brush.extent()[horizontal ? 0 : 1];
if (!d3.event.sourceEvent) return; // only transition after input
}
thisSlider.x = function(value) {
if (!arguments.length) return sliderX;
sliderX = value;
return thisSlider;
};
thisSlider.y = function(value) {
if (!arguments.length) return sliderY;
sliderY = value;
return thisSlider;
};
thisSlider.width = function(value) {
if (!arguments.length) return sliderWidth;
sliderWidth = value;
return thisSlider;
};
thisSlider.height = function(value) {
if (!arguments.length) return sliderHeight;
sliderHeight = value;
//if (!horizontal) scale.range([sliderHeight, 0]);
return thisSlider;
};
thisSlider.horizontal = function(value) {
if (!arguments.length) return horizontal;
horizontal = value;
//if (horizontal) brush.x(scale).y(null);
//if (!horizontal) brush.y(scale).x(null);
//if (horizontal) scale.range([0, sliderWidth]);
//if (!horizontal) scale.range([sliderHeight, 0]);
return thisSlider;
};
thisSlider.vertical = function(value) {
if (!arguments.length) return !horizontal;
horizontal = !value;
if (horizontal) brush.x(scale).y(null);
if (!horizontal) brush.y(scale).x(null);
//if (horizontal) scale.range([0, sliderWidth]);
//if (!horizontal) scale.range([sliderHeight, 0]);
return thisSlider;
};
return thisSlider;
}
var verticalSlider = function(){
var sliderX = 0,
sliderY = 0,
sliderHeight = 100,
sliderWidth = 100,
horizontal = true;
var _bar;
var scale = d3.scale.linear()
.range([sliderHeight, 0])
.domain([0, 100])
.nice()
.clamp(true);
var brush = d3.svg.brush()
.y(scale)
.extent([0, 0])
.on("brush", brushed)
.on("brushend", brushended);
function thisSlider(selection) {
selection.each(function(raw){
if (horizontal) scale.range([0, sliderWidth]);
if (!horizontal) scale.range([sliderHeight, 0]);
var _slider = d3.select(this)
.attr("transform", "translate(" + sliderX + "," + sliderY + ")")
.attr("class", "slider")
.call(brush);
_slider.selectAll(".extent,.resize")
.remove();
_slider.select(".background")
.attr("height", sliderHeight)
.attr("width", sliderWidth)
.style("cursor", horizontal ? "ew-resize": "ns-resize")
.style("visibility", "visible");
_bar = _slider.append("rect")
.attr("class", "slider-bar")
.style("pointer-events", "none")
.attr({x: 0, y: 0, width: sliderWidth, height: sliderHeight})
_slider
.call(brush.extent([100, 100]))
.call(brush.event)
.transition().duration(3000).ease("bounce")
.call(brush.extent([10, 10]))
.call(brush.event);
});
}
function brushed() {
var value = brush.extent()[0];
if (d3.event.sourceEvent) { // not a programmatic event
value = scale.invert(d3.mouse(this)[horizontal ? 0 : 1]);
brush.extent([value, value]);
}
_bar.attr("x", 0)
.attr("y", horizontal ? 0 : scale(value) )
.attr("width", horizontal ? scale(value) : sliderWidth)
.attr("height", horizontal ? sliderHeight : sliderHeight -scale(value))
.style("fill", rainbow(scale(value) /
(horizontal ? sliderWidth : sliderHeight)));
}
function brushended() {
var value = brush.extent()[horizontal ? 0 : 1];
if (!d3.event.sourceEvent) return; // only transition after input
}
thisSlider.x = function(value) {
if (!arguments.length) return sliderX;
sliderX = value;
return thisSlider;
};
thisSlider.y = function(value) {
if (!arguments.length) return sliderY;
sliderY = value;
return thisSlider;
};
thisSlider.width = function(value) {
if (!arguments.length) return sliderWidth;
sliderWidth = value;
return thisSlider;
};
thisSlider.height = function(value) {
if (!arguments.length) return sliderHeight;
sliderHeight = value;
//if (!horizontal) scale.range([sliderHeight, 0]);
return thisSlider;
};
thisSlider.horizontal = function(value) {
if (!arguments.length) return horizontal;
horizontal = value;
//if (horizontal) brush.x(scale).y(null);
//if (!horizontal) brush.y(scale).x(null);
//if (horizontal) scale.range([0, sliderWidth]);
//if (!horizontal) scale.range([sliderHeight, 0]);
return thisSlider;
};
thisSlider.vertical = function(value) {
if (!arguments.length) return !horizontal;
horizontal = !value;
if (horizontal) brush.x(scale).y(null);
if (!horizontal) brush.y(scale).x(null);
//if (horizontal) scale.range([0, sliderWidth]);
//if (!horizontal) scale.range([sliderHeight, 0]);
return thisSlider;
};
return thisSlider;
}
var mySlider1 = verticalSlider().vertical(true).x(0).y(0).height(400).width(100)
var mySlider2 = verticalSlider().vertical(true).x(150).y(0).height(300).width(100);
var mySlider3 = horizontalSlider().x(500).y(0).height(100).width(400);
var mySlider4 = horizontalSlider().x(500).y(150).height(100).width(300);
svg.append("g").call(mySlider1)
svg.append("g").call(mySlider2)
svg.append("g").call(mySlider3)
svg.append("g").call(mySlider4)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment