pkerpedjiev/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<body>
<div id="zoom-filtering-div" style="width: 400px; margin: auto">
</div>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<script src="script.js"></script>
<script>
zoomFiltering('#zoom-filtering-div');
</script>
</body>

## script.js
function zoomFiltering(divId) {
    var width = 400, height=250, maxR=30;

    var svg = d3.select(divId)
                .append('svg')
                .attr('width', width)
                .attr('height', height)
    var g = svg.append('g')

    // create 15 circles
    var numCircles = 55;
    var circles = [];
    for (var i = 0; i < numCircles; i++)
        circles.push({'x': 1+Math.floor(Math.random() * width),
                'y': 1+Math.floor(Math.random() * height),
                'r': 1+Math.floor(Math.random() * maxR)});

    g.selectAll('circle')
        .data(circles)
        .enter()
        .append('circle')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', function(d) { return d.r; })
        .classed('no-zoom', true)

    var zoom = d3.zoom()
                 .filter(() => { return !d3.event.path[0].classList.contains('no-zoom') })
                 .on('zoom', function(d) { g.attr('transform', d3.event.transform); });

     var texts = ["The red circles don't allow scroll-wheel zooming and",
                  "drag-based panning"]
     svg.selectAll('text')
        .data(texts)
        .enter()
        .append('text')
        .attr('x', 200)
        .attr('y', function(d,i) { return 20 + i * 20; })
        .text(function(d) { return d; });

    svg.call(zoom);
}

## style.css
circle {
    fill: red;
    opacity: 0.2;
    stroke: black;
    stroke-width: 1px;
}

svg {
    border: 1px solid;
    font: 13px sans-serif;
    text-anchor: middle;
}
	<!DOCTYPE html>
	<meta charset="utf-8">

	<body>
	<div id="zoom-filtering-div" style="width: 400px; margin: auto">
	</div>
	<link href="style.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
	<script src="script.js"></script>
	<script>
	zoomFiltering('#zoom-filtering-div');
	</script>
	</body>
	function zoomFiltering(divId) {
	var width = 400, height=250, maxR=30;

	var svg = d3.select(divId)
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	var g = svg.append('g')

	// create 15 circles
	var numCircles = 55;
	var circles = [];
	for (var i = 0; i < numCircles; i++)
	circles.push({'x': 1+Math.floor(Math.random() * width),
	'y': 1+Math.floor(Math.random() * height),
	'r': 1+Math.floor(Math.random() * maxR)});

	g.selectAll('circle')
	.data(circles)
	.enter()
	.append('circle')
	.attr('cx', function(d) { return d.x; })
	.attr('cy', function(d) { return d.y; })
	.attr('r', function(d) { return d.r; })
	.classed('no-zoom', true)

	var zoom = d3.zoom()
	.filter(() => { return !d3.event.path[0].classList.contains('no-zoom') })
	.on('zoom', function(d) { g.attr('transform', d3.event.transform); });

	var texts = ["The red circles don't allow scroll-wheel zooming and",
	"drag-based panning"]
	svg.selectAll('text')
	.data(texts)
	.enter()
	.append('text')
	.attr('x', 200)
	.attr('y', function(d,i) { return 20 + i * 20; })
	.text(function(d) { return d; });

	svg.call(zoom);
	}
	circle {
	fill: red;
	opacity: 0.2;
	stroke: black;
	stroke-width: 1px;
	}

	svg {
	border: 1px solid;
	font: 13px sans-serif;
	text-anchor: middle;
	}