Show/hide

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Click show hide</title>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
		circle {fill: #000; stroke: #000;}
	</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
	.attr({width:600, height:600}) ;

svg.append("rect") // "Hide" button
	.attr({x:0, width:60, height:40, fill:"red" })
	.on("click", function() {
		// Hide all circles of class "dot"
		d3.selectAll(".dot").attr("visibility", "hidden")
	}) ;
svg.append("rect") // "Show" button
	.attr({x:70, width:60, height:40, fill:"green" })
	.on("click", function() {
		// Show all circles of class "dot"
		d3.selectAll(".dot").attr("visibility", "")
	}) ;

var g0 = svg.append("g") // Group for dot grid
	.attr("transform", "translate(4 50)") ;

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js