title: Creating floating images loaded d3.js
body: <p>I am new to d3.js and trying to load the images dynamically from folder using d3.js based on certain conditions. Code I am using is </p>
  
  <pre><code>           var svg = d3.select("body")
              .append("svg")
              .attr("width", 150)
              .attr("height", 150)
              .style("border", "1px solid black");
  
  
  d3.csv("data/Images.csv", function(error, data) {
  
      data.forEach(function(d) {
  
          arrFileUrl.push(d['FingerImageName']);
          arrBrightness.push(d['Brightness']);
          arrPattern.push(d['Pattern']);
          arrSize.push(d['Size']);
  
      });//data
  
  
      var imgs = svg.selectAll("image").data(arrFileUrl[0]);
  
      imgs.enter()
          .append("svg:image")
          .attr("xlink:href", arrFileUrl[0])
          .attr("x", "20")
          .attr("y", "20")
          .attr("width", "120")
          .attr("height", "120");
  </code></pre>
  
  <p>I want to make these images float around just like bubbles, so that they don't have fix positions. How can I make this?</p>