var width = 560,  height = 450;

var randomX = d3.random.normal(350, 80),
    randomY = d3.random.normal(350, 80);
//make an array of random points
var data = d3.range(25000).map(function() {
  return [randomX(),randomY()];
});

var x = d3.scale.linear()
  .domain([0, width])
  .range([0,  150]);

var y = d3.scale.linear()
  .domain([0, height])
  .range([400, 0]);
//make teh zoombehavior
// var zoombehavior = d3.behavior.zoom().x(x).y(y).scaleExtent([1, 18]).on("zoom", zoom)//.center([250, 250]);
var zoombehavior = d3.behavior.zoom().x(x).y(y).scaleExtent([1, Infinity]).on("zoom", zoom);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("background","azure")
  //.append("g")
  .call(zoombehavior);

//making a clip path  
// var clip = svg.append("defs").append("svg:clipPath")
//   .attr("id", "clip")
//   .append("svg:rect")
//   .attr("id", "clip-circ")
//   .attr("width", 300)
//   .attr("height", 300)
//   .attr("transform","translate(50,100)")
  // .attr("r", 149);
//making a group which holds the clip path  


// // define the clipPath
// svg.append("clipPath")       // define a clip path
//     .attr("id", "ellipse-clip") // give the clipPath an ID
//   .append("circle")          // shape it as an ellipse
//     .attr("cx", 175)         // position the x-centre
//     .attr("cy", 100)         // position the y-centre
//     .attr("r", 300)         // set the x radius
// //     .attr("ry", 100);         // set the y radius

// // draw clipped path on the screen
// var cr=svg.append("rect")        // attach a rectangle
//     .attr("x", 125)        // position the left of the rectangle
//     .attr("y", 75)         // position the top of the rectangle
//     .attr("clip-path", "url(#ellipse-clip)") // clip the rectangle
//     .style("fill", "transparent")   // fill the clipped path with grey
//     .attr("height", 500)    // set the height
//     .attr("width", 400);    // set the width

// make a circle and append it to the pointsParent
// this is added just to show border to teh clippath
var xpos=0,ypos=100,w=300,h=300;

function retclippath(xpos,ypos,w,h,border){
svg.append("clipPath")
   .attr("id", "rr")
   .append("rect")
   .attr("width", w)
   .attr("height", h)
   .attr("transform","translate("+xpos +","+ypos + ")");
if(border) svg.append("rect")        // attach a rectangle
    .attr("transform","translate("+xpos +","+ypos + ")")       // position the top of the rectangle
    .style("fill", "transparent")   // fill the clipped path with grey
    .style("stroke-width","3px")
		.style("stroke","orange")
    .attr("height", h)    // set the height
    .attr("width", w);    // set the width

var clipr = svg.append("g")
  						 .attr("clip-path", "url(#rr)");
  
  return clipr;
}
var clipr= retclippath(xpos,ypos,w,h,true);
var text = clipr.selectAll("rect")//clipr.
  .data(data)
  .enter().append("rect")
//   .html("star")
.attr("fill","cyan")
.attr("stroke","black")
.attr("stroke-width",".5px")
.attr("z-index","10000")
.attr("width","200")
.attr("height","2")
//   .attr("class", "point material-icons")
  .attr("transform", transform);

function zoom() {
  text.attr("transform", transform);
}

function transform(d,i) {
  //translate string
  //return "translate(" + (d[0]) + "," + y(d[1]) + ")";
  return "translate(" + (50) + "," + y(2*i+0) + ")"
  + "scale(" + [1,1] +  ")";//zoombehavior.scale()
}