sliders

forked from SpaceActuary's block: sliders

<!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 mySlider1 = slider().vertical(true).x(0).y(0).height(400).width(80);
    var mySlider2 = slider().vertical(true).x(100).y(0).height(300).width(120);
    var mySlider3 = slider().x(240).y(0).height(200).width(400);
    var mySlider4 = slider().x(240).y(220).height(50).width(300);
    
    var gSlider1 = svg.append("g")
    var gSlider2 = svg.append("g")
    var gSlider3 = svg.append("g")
    var gSlider4 = svg.append("g")
    
    mySlider1.onchange(function(value){ text1.text(numberFormat(value)); })
    mySlider2.onchange(function(value){ text2.text(numberFormat(value)); })
    mySlider3.onchange(function(value){ text3.text(percentFormat(value)); })
    mySlider4.onchange(function(value){ text4.text(percentFormat(value)); })
    
    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()  + 60) + ","
                         + (mySlider3.y() + mySlider3.height() / 2) + ")")
    text4.attr("transform", "translate(" 
                         + (mySlider4.x() + mySlider4.width() + 60) + ","
                         + (mySlider4.y() + mySlider4.height() / 2) + ")")
    
    gSlider1.call(mySlider1)
    gSlider2.call(mySlider2)
    gSlider3.call(mySlider3)
    gSlider4.call(mySlider4)
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js