D3 Examples - Query by name

xxxxxxxxxx
 
<!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});
    
​
    var dataset = [];
            for(i=0; i<5; i++){
                dataset.push(Math.round(Math.random()*50));
            }
 
            var p = d3.select("body").selectAll("p")
            .data(dataset)
            .text(function(d,i){return i + " : " + d;});
 
            function handleClick(event){
                console.log(document.getElementById("myVal").value)
                draw(document.getElementById("myVal").value)
                return false;
            }
 
            function draw(val){
                d3.select("body").append("p");
                dataset.push(val);
                var p = d3.select("body").selectAll("p")
                .data(dataset)
                .text(function(d,i){return i + " : " + d;})
            }
 
    
​
  </script>
</body>
​
    