let svg = d3.select("body").append("svg");

​

let w = 400;

let h = 400;

svg.attr("width", w)

svg.attr("height", h)

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

​

​

let min = 0;

let max = 30;

let randomArray = [];

for (var i=0, t=5; i<t; i++) {

  let vals = {"a":i,

            "pos":[

              Math.floor(min + (Math.random() * (max-min))), 

              Math.floor(min + (Math.random() * (max-min)))

            ]};

  randomArray.push(vals);

}

console.log(randomArray)

​

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

console.log(posesX);

let posesY = randomArray.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 = 30;

​

let xScale = d3.scaleLinear()

                     .domain([minValX, maxValX]).nice()

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

​

​

let yScale = d3.scaleLinear()

                     .domain([maxValY, minValY]).nice()

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

​

​

​

let xAxis = d3.axisTop(xScale).ticks(2, 's');

let yAxis = d3.axisLeft(yScale).ticks(5, 's');

​

​

svg.selectAll()

  .data(randomArray).enter().each( function(d,i) {

  //with scaling

  let xpos = xScale(d.pos[0]);

  let ypos = yScale(d.pos[1]);

  svg.append("circle")

    .attr("cx", xpos)

    .attr("cy", ypos)

    .attr("r", 20)

    .attr("fill","red")

    .attr("opacity", "0.5")

​

;

  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")

  svg.append("g")

  .attr("transform", "translate(0," + (h - margin) + ")")

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

  .style("font-family","Brown")

  .call(xAxis)

  svg.append("g")  

  .attr("transform", "translate(" + (margin) + ",0)")

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

  .style("font-family","Brown")

  .call(yAxis)

});

​

​

​

​

​

​