README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Built with blockbuilder.org

Testing a brush-style slider, loosely based on Mike Bostock's Brush Handles example.

The number feedback at the top can be sent to a chart as a filter.

  

  

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
	<script src="//d3js.org/d3.v3.min.js"></script>
<style>

  .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .brush .extent {
    fill-opacity: .125;
    shape-rendering: crispEdges;
  }

</style>

<body>
  <div id='numbers'>
    <span id='start-number'></span> to <span id='end-number'></span>
  </div>
  <div id='slider' style="margin-top:1%"></div>
</body>

<script>

    var margin = {top: 20, right: 20, bottom: 20, left: 20},
        width = 400 - margin.left - margin.right,
        height = 20;

    var x = d3.scale.linear()
    	.domain([0,100])
			.range([0, width]);

		var brush = d3.svg.brush()
    	.x(x)
    	.extent([20, 50]);

    var svg = d3.select("#slider").append("svg")
    		.attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top)
    	.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		svg.append("g")
    		.attr("class", "x axis")
    	.call(d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .ticks(5)
              .tickFormat(d3.format("")));

    var brushg = svg.append("g")
        .attr("class", "brush")
        .call(brush);

    brushg.selectAll("rect")
        .attr("height", height);

    brush.on('brush', function() {brushed()})

    d3.select('#start-number')
      .append('text')
      .text(brush.extent()[0]);

    d3.select('#end-number')
      .append('text')
      .text(brush.extent()[1]);

    function brushed() {
      d3.select('#start-number')
        .text(Math.round(brush.extent()[0]));
      d3.select('#end-number')
        .text(Math.round(brush.extent()[1]));
    }

    brushed();

</script>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png