Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/.block

Created June 19, 2017 17:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SpaceActuary/ff2380d60d9ece7c6c6ff38c2ab21170 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SpaceActuary/ff2380d60d9ece7c6c6ff38c2ab21170 to your computer and use it in GitHub Desktop.
Download ZIP
parallel sliders
Raw
.block
license: mit
Raw
README.md
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">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<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;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
}
svg { width:100%; height: 100% }
.slider .background { stroke: #ccc; stroke-width: 5px; fill: none; }
text { text-anchor: middle; dominant-baseline: central; }
</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 slider = function(){
var sliderX = 0,
sliderY = 0,
sliderHeight = 100,
sliderWidth = 100,
horizontal = true,
onchange = function(value){};
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 value = brush.extent()[0];
var _slider = d3.select(this).attr("class", "slider")
_slider.attr("transform", "translate(" + sliderX + "," + sliderY + ")")
.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.selectAll("rect.slider-bar").data([1])
_bar.enter().append("rect")
.attr("class", "slider-bar")
.style("pointer-events", "none")
.attr("x", 0)
_bar
.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)));
/*
_slider
.call(brush.extent([100, 100]))
.call(brush.event)
.transition().duration(3000).ease("bounce")
.call(brush.extent([10, 10]))
.call(brush.event);
*/
_slider.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 : scale(value) )
.attr("width", horizontal ? scale(value) : sliderWidth)
.attr("height", horizontal ? sliderHeight : sliderHeight - scale(value))
.style("fill", rainbow(scale(value) /
(horizontal ? sliderWidth : sliderHeight)));
onchange(value);
}
function brushended() {
var value = brush.extent()[horizontal ? 0 : 1];
if (!d3.event.sourceEvent) return; // only transition after input
onchange(value);
}
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;
};
thisSlider.domain = function(value) {
if (!arguments.length) return scale.domain();
scale.domain(value);
return thisSlider;
};
thisSlider.value = function(value) {
if (!arguments.length) return brush.extent()[0];
brush.extent([value, value]);
return thisSlider;
};
thisSlider.onchange = function(value) {
if (!arguments.length) return onchange;
onchange = value;
return thisSlider;
};
return thisSlider;
}
var text1 = svg.append("text")
var text2 = svg.append("text")
var text3 = svg.append("text")
var text4 = svg.append("text")
var numberFormat = d3.format(".0f");
var percentFormat = d3.format(".1%");
var myVal = 0;
var mySlider1 = slider().vertical(true).x(0).y(0).height(400).width(120);
var mySlider2 = slider().vertical(true).x(150).y(0).height(400).width(120);
var mySlider3 = slider().vertical(true).x(300).y(0).height(400).width(120);
var mySlider4 = slider().vertical(true).x(450).y(0).height(400).width(120);
var gSlider1 = svg.append("g")
var gSlider2 = svg.append("g")
var gSlider3 = svg.append("g")
var gSlider4 = svg.append("g")
var changeFunc = function(value){
myVal = value;
text1.text(numberFormat(myVal));
text2.text(numberFormat(myVal));
text3.text(numberFormat(myVal));
text4.text(numberFormat(myVal));
mySlider1.value(myVal);
mySlider2.value(myVal);
mySlider3.value(myVal);
mySlider4.value(myVal);
}
mySlider1.onchange(changeFunc)
mySlider2.onchange(changeFunc)
mySlider3.onchange(changeFunc)
mySlider4.onchange(changeFunc)
mySlider1.value(20)
mySlider2.value(40)
mySlider3.domain([0, 1]).value(0.60)
mySlider4.domain([0, 1]).value(0.40)
text1.attr("transform", "translate("
+ (mySlider1.x() + mySlider1.width() / 2) + ","
+ (mySlider1.y() + mySlider1.height() + 30) + ")")
text2.attr("transform", "translate("
+ (mySlider2.x() + mySlider2.width() / 2) + ","
+ (mySlider2.y() + mySlider2.height() + 30) + ")")
text3.attr("transform", "translate("
+ (mySlider3.x() + mySlider3.width() / 2) + ","
+ (mySlider3.y() + mySlider3.height() + 30) + ")")
text4.attr("transform", "translate("
+ (mySlider4.x() + mySlider4.width() /2) + ","
+ (mySlider4.y() + mySlider4.height() + 30) + ")")
gSlider1.call(mySlider1)
gSlider2.call(mySlider2)
gSlider3.call(mySlider3)
gSlider4.call(mySlider4)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment