let svg = d3.select("body")

.append("svg")

.attr("width", 400)

.attr("height", 400)

​

let w = 400;

let h = 400;

​

/*

svg.attr("width", w)

svg.attr("height", h)

svg.style("background", "#FFE")

*/

​

let min = 30;

let max = 4000;

​

let t1 = [

  {pos:[55,15]},

  {pos:[50,17]},

  {pos:[60,21]}

];

​

​

let posesX = t1.map( d => d.pos[0] );

console.log(posesX);

let posesY = t1.map( d => d.pos[1] );

console.log(posesY);

​

let minValX = d3.min(posesX);

let maxValX = d3.max(posesX);

​

let minValY = d3.min(posesY);

let maxValY = d3.max(posesY);

​

console.log(maxValX);

console.log(maxValY);

​

let margin = 50;

​

let xScale = d3.scaleLinear()

                     .domain([50, 60])

                     .range([margin, w - margin]);

​

​

let yScale = d3.scaleLinear()

                     .domain([14, 21])

                     .range([margin, h - margin]);

​

console.log("val = " + xScale(maxValX/2));

​

​

svg.selectAll()

  .data([

  {pos:[55,15]},

  {pos:[50,17]},

  {pos:[60,21]}

]).enter().each( (d,i) => {

  svg.append("circle")

    .attr("cx", xScale(d.pos[0]))

    .attr("cy", yScale(d.pos[1]))

    .attr("r", 50)

}

);    

​

                         /*

  svg.append("text")

    .text( "(" + d.pos[0] + "," + d.pos[1] + ")" )

    .attr("text-anchor", "middle")

    .attr("alignment-baseline","central")

    .attr("x",xpos)

    .attr("y",ypos)

    .attr("font-family", "helvetica")

    .attr("font-size", "10px")

    .attr("fill", "black")

    .attr("opacity", "0.5")

    */

​

​

​

​

​

​

​