D3 Examples - Brush Slider 2

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
  <head>
    <!-- from https://www.youtube.com/watch?v=KhONK158L_A -->
    <meta charset='utf-8'>
    <title>D3.js Brush Example</title>
    <style>
      /* set the background of the brush to visible */
      
      .background {
        visibility: visible !important;
        fill: darkblue;
      }
      /* set the extent to visible and give it a color */
      
      .extent {
        visibility: visible !important;
        fill: blue;
        stroke: #fff;
        fill-opacity: .5;
        shape-rendering: crispEdges;
      }
      /* set the handles to visible and give them a color */
      
      .resize rect {
        /* visibility: visible !important; */
        /* fill: red; */
      }
    </style>
  </head>
​
  <body>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      // default position of the handles
      var handle1 = 25,
        handle2 = 75;
​
      // create the svg container
      var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 200);
​
      // appent the text container to the svg container
      var text1 = svg.append("text")
        .attr("x", 25)
        .attr("y", 25)
        .style("font-size", "16px")
        .text("text1");
​
      // appent the text container to the svg container
      var text2 = svg.append("text")
        .attr("x", 75)
        .attr("y", 25)
        .style("font-size", "16px")
        .text("text2");
​
      // set up the x scale
      var xscale = d3.scale.linear()
        .domain([0, 100])
        .range([0, 200]);
​
      // Create the brush
      // this is how long our slider will be
      var brush = d3.svg.brush()
        .x(xscale)
        .extent([handle1, handle2]) // set the default extent
        // Note that this does not automatically redraw the brush or dispatch any events to listeners.
        // To redraw the brush, call brush on a selection or transition; to dispatch events, use brush.event.
        .on("brush", brushed); // call the brushed function
​
      // 
      var slider = svg.append("g")
        .attr("transform", "translate(" + [100, 100] + ")");
​
      brush(slider);
​
      // set the height of the slider
      slider.selectAll("rect")
        .attr("height", 30);
​
      update(handle1, handle2);
​
      function update(value1, value2) {
        // update the svg text
        //svg.select("text").text(Math.round(value));
        text1.text(Math.round(value1));
        text2.text(Math.round(value2));
      }
​
      function brushed() {
        var value1 = brush.extent()[0];
        var value2 = brush.extent()[1];
        update(value1, value2);
      }
    </script>
  </body>
​
</html>
    