scatter-plot.js

const dataSet = [
                  [   5,   20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [  25,   67 ],
                  [  85,   21 ],
                  [ 220,   88 ]
                ];

const w = 900;
const h = 400;
const padding = 20;

// Create svg
const svg = d3.select('#main')
              .append('svg')
              .attr('width', w)
              .attr('height', h);

// Create Scale
const scaleX = d3.scaleLinear()
                       .domain([0, 500])
                       .range([0 + 2 * padding, w - padding * 2]);

const scaleY = d3.scaleLinear()
                       .domain([0, 100])
                       .range([h - padding, 0 + padding]);

// Draw circles
svg.selectAll('circle')
   .data(dataSet)
   .enter()
   .append('circle')
   .attr('cx', (d) => {
     return scaleX(d[0]);
   })
   .attr('cy', (d) => {
     return scaleY(d[1]);
   })
   .attr('r', 5);

svg.selectAll('text')
   .data(dataSet)
   .enter()
   .append('text')
   .text((d) => {
     return `(${d[0]},${d[1]})`;
   })
   .attr('x', (d) => {
     return scaleX(d[0]) + 2;
   })
   .attr('y', (d) => {
     return scaleY(d[1]) - 2;
   })

// Create axis
svg.append('g')
   .attr('transform', `translate(0, ${h - padding})`)
   .call(d3.axisBottom()
           .scale(scaleX));

svg.append('g')
   .attr('transform', `translate(${padding * 2}, 0)`)
   .call(d3.axisLeft()
            .scale(scaleY));

With d3.js