Query by name

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="Search Talent" >
            <input type="text" id="myVal" placeholder="Search by Names">
        </form>
  <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960;
    var height = 960;
    var radius = 300;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var defs = svg.append("svg:defs");
    defs.append("svg:pattern")
    	.attr("id", "grump_avatar")
    	.attr("width", 600)
   		.attr("height", 600)
  	  .attr("patternUnits", "userSpaceOnUse")
  	  .append("svg:image")
  		 .attr("xlink:href", "https://myfirstshiba.com/wp-content/uploads/2017/11/AdobeStock_149297117.jpg")
 	 		 .attr("width", 600)
   		 .attr("height", 600)
   		 .attr("x", 0)
   		 .attr("y", 0);
    
    var ciecle = svg.append("circle")
    	.attr("cx", width/2)
    	.attr("cy", height/2-200)
    	.attr("r", 80)
    	.style("fill", "#fff")
    .style("fill", "url(#grump_avatar");

//     var dataset = [];
//     function handleClick(event)
//     {
//       console.log(document.getElementById("myVal").value)
//       var searchName = document.getElementById("myVal").value
//       dataset.push(searchName);
//     }
    
//     svg.selectAll("text")
//       .data(dataset).enter()
//       .append("text")
//       .text(function(d) {return d});

</script>
</body>

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