Built with blockbuilder.org
forked from SpaceActuary's block: sliders
forked from SpaceActuary's block: sliders
forked from SpaceActuary's block: sliders
forked from SpaceActuary's block: parallel sliders
license: mit |
Built with blockbuilder.org
forked from SpaceActuary's block: sliders
forked from SpaceActuary's block: sliders
forked from SpaceActuary's block: sliders
forked from SpaceActuary's block: parallel sliders
!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}(); |
<!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> | |