GlennS/index.html

## index.html
<html>
    <body>
        <p>Brush over the screen</p>

        <p>Try single clicking vs clicking and dragging</p>

        <p>Look at the console</p>

        <script src="https://d3js.org/d3.v4.js"></script>

        <script>
         "use strict";
         var body = d3.select(document.body),
             width = 1000,
             height = 1000,
             svg = body.append("svg")
                       .attr("width", width)
                       .attr("height", height),

             isBrushing = false,
             brushingHappened = false,

             brush = d3.brushX()
                       .on("start", function() {
                           isBrushing = true;
                           brushingHappened = false;

                           console.log("start");
                       })
	               .on("brush", function() {
                           console.log("Brushing happened", d3.event.selection, [brush.extent()()[0][0], brush.extent()()[0][1]]);
                           brushingHappened = true;
                       })
                       .on("end", function() {
                           console.log("end", d3.event.selection, [brush.extent()()[0][0], brush.extent()()[0][1]]);

                           if (!isBrushing) {
                               console.warn("ended without starting");
                           }
                           if (!brushingHappened) {
                               console.warn("ended without any brushing");
                           }
                           isBrushing = false;
                           brushingHappened = false;
                       })
	               .extent([[0, 0], [width, height]]),

             newBrushG = svg.append("g")
			    .call(brush);

        </script>
    </body>

</html>
	<html>
	<body>
	<p>Brush over the screen</p>

	<p>Try single clicking vs clicking and dragging</p>

	<p>Look at the console</p>

	<script src="https://d3js.org/d3.v4.js"></script>

	<script>
	"use strict";
	var body = d3.select(document.body),
	width = 1000,
	height = 1000,
	svg = body.append("svg")
	.attr("width", width)
	.attr("height", height),

	isBrushing = false,
	brushingHappened = false,

	brush = d3.brushX()
	.on("start", function() {
	isBrushing = true;
	brushingHappened = false;

	console.log("start");
	})
	.on("brush", function() {
	console.log("Brushing happened", d3.event.selection, [brush.extent()()[0][0], brush.extent()()[0][1]]);
	brushingHappened = true;
	})
	.on("end", function() {
	console.log("end", d3.event.selection, [brush.extent()()[0][0], brush.extent()()[0][1]]);

	if (!isBrushing) {
	console.warn("ended without starting");
	}
	if (!brushingHappened) {
	console.warn("ended without any brushing");
	}
	isBrushing = false;
	brushingHappened = false;
	})
	.extent([[0, 0], [width, height]]),

	newBrushG = svg.append("g")
	.call(brush);

	</script>
	</body>

	</html>