JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv"></div>

JavaScript

var data = [
    {x:0, y:2},{x:0.5, y:2.2},{x:1.3,y:5},{x:2.0,y:3},
    {x:10,y:2},{x:10.7,y:4.6},{x:11.3,y:0},{x:12,y:2}
    ];

var xscale = d3.scale.linear()
    .domain([0,2,10,12])
    .range([0,250,250,500]);

var yscale = d3.scale.linear()
    .domain([-0.5,5.5])
    .range([0,500])

var mySVG = d3.select('#myDiv').append('svg')

mySVG.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx',function(d){return xscale(d.x)})
    .attr('cy',function(d){return yscale(d.y)})
    .attr('r',2)

var xAxis = d3.svg.axis()
    .scale(xscale)
    .orient('bottom')
    .tickValues([0,1,2,11,12])

mySVG.append('g')
  .attr('class', 'x axis')
  .call(xAxis);