let margin = {top: 20, right: 10, bottom: 20, left: 30};

let width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

let svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);

function gain(x, y) {
    let a = 20 * Math.exp(- (Math.pow((x - 2.5), 2) + Math.pow((y + 1.5), 2)) / 5)
    let b = 3 * (1 + Math.pow((Math.sin(0.08 * Math.PI * x * y)), 2))
    let c = 3 * Math.log(2 + Math.pow(10 * (x - 2.4), 4) + Math.pow(10 * (y + 1.3), 4)) / (1 + Math.pow((x * x + y * y) / 100, 0.1))
    
    return a + b + c;
}

let density = 121,
    domain_bnd = 30;

scaleX = d3.scaleQuantize().domain([-domain_bnd, domain_bnd]).range(d3.range(density))

scaleY = d3.scaleQuantize().domain([domain_bnd, -domain_bnd]).range(d3.range(density))

heatmap = d3_rectheatmap({gap: 0,
                         height: height,
                         width: height})
points = heatmap.points(gain, scaleX, scaleY)

svg.selectAll("rect")
.data(points)
.enter().append("rect")
.call(heatmap.rect)

svg.append("g")
		.attr("class", "axis")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(heatmap.scaleX));

svg.append("g")
		.attr("class", "axis")
    .attr("transform", `translate(0, 0)`)
    .call(d3.axisLeft(heatmap.scaleY));

// nbMcPoints = 10000

// let uniform = d3.randomUniform(-10, 10)
// let mcPoints = d3.range(nbMcPoints);

// let m = {v: 0, i: 0}

// for (idx in d3.range(nbMcPoints)) {
//   mcPoints[idx] = {x: uniform(),
//                   y: uniform(),
//                   i: idx};
//   mcPoints[idx].z = gain(mcPoints[idx].x, mcPoints[idx].y)
//   if (mcPoints[idx].z > m.v) {
//     m = {v: mcPoints[idx].z,
//         i: idx}
//   }
// }

// svg.selectAll("circle")
// .data(mcPoints)
// .enter().append("circle")
// .attr("cx", d => heatmap.scaleX(d.x))
// .attr("cy", d => heatmap.scaleY(d.y))
// .attr("fill", d => d.i == m.i ? "blue" : "red")
// .attr("r", d => d.i == m.i ? 3 : 1.5)

//======================================

// nbCeTries = 20
// nbCePoints = 100
// nbConsider = 10

// let ceTries = d3.range(nbCeTries);
// let cePoints = d3.range(nbCePoints);

// let distribX= d3.randomNormal(0, 3)
// let distribY = d3.randomNormal(0, 3)

// let m = {v: 0, i: 0}

// for (idx in d3.range(nbCeTries)) {
//   for (point_idx in d3.range(nbCePoints)) {
//     let rx = distribX(),
//         ry = distribY();
//     cePoints[point_idx] = {x: rx,
//                   				y: ry,
//                   				i: point_idx};
//     cePoints[point_idx].z = gain(rx, ry)
//   }
    
//   cePoints.sort((a, b) => b.z - a.z)
  
//   let cePointsSlice = cePoints.slice(0, nbConsider) 
  
//   console.log(cePointsSlice)
  
//   let [tm, td] = [{}, {}]
  
//   tm.x = d3.mean(cePointsSlice, d => d.x)
//   td.x = d3.deviation(cePointsSlice, d => d.x)
  
//   tm.y = d3.mean(cePointsSlice, d => d.y)
//   td.y = d3.deviation(cePointsSlice, d => d.y)
    
//   ceTries[idx] = {x: tm.x,
//                   y: tm.y,
//                   sd: td,
//                   i: idx,
//                   z: gain(tm.x, tm.y)};
  
//   if (ceTries[idx].z > m.v) {
//     m = {v: ceTries[idx].z,
//         i: idx}
//   }
  
//   distribX = d3.randomNormal(tm.x, td.x)
// 	distribY = d3.randomNormal(tm.y, td.y)
// }

// svg.selectAll("circle")
// .data(ceTries)
// .enter().append("circle")
// .attr("cx", d => heatmap.scaleX(d.x))
// .attr("cy", d => heatmap.scaleY(d.y))
// .attr("fill", d => d.i == m.i ? "blue" : "red")
// .attr("r", d => d.i == m.i ? 3 : 2)