{
  var mt = new ql.MersenneTwisterUniformRng().init1(42);
  
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
  width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
  // DOM.svg() is a Observables specific convenience method which creates an SVG DOM element. 
  const svg = d3.select(DOM.svg(width + margin.left + margin.right, 
                                height + margin.top + margin.bottom))
-
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .style("overflow", "visible");

  //Set up scales that we can use to draw the axes
  var x = d3.scaleLinear()
  .domain([0.0,1.0])
  .range([0,width]);
  var y = d3.scaleLinear()
  .domain([0.0,1.0])
  .range([height,0]);

  //Setting up the axes
  var xAxis = d3.axisBottom().scale(x).ticks(5);

  var yAxis = d3.axisLeft().scale(y).ticks(5);

  //Add the axis to our svg element
  // x-axis
  svg.append("g")
    .attr("class", "x axis label")
    .attr("transform", "translate(" + 0 + "," + height + ")")
    .call(xAxis)
    .append("text")
    .text("x")
    .attr("x", width)
    .attr("y", -6)
+
    .attr("fill","currentColor")
    .style("text-anchor", "end");
  // y-axis
  svg.append("g")
    .attr("class", "y axis label")
    .call(yAxis)
    .append("text")
    .text("y")
    .attr("transform", "rotate(-90)")
+
    .attr("x",6)
    .attr("y",6)
+
    .attr("fill","currentColor")
    .style("text-anchor","end");
  
  var dataset = [];
  for(var i=0; i<2048; i++) {
    dataset.push([mt.next().value,mt.next().value]);
  }

  svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
-
      return d[0]*width;
+
      return x(d[0]);
    })
    .attr("cy", function(d) {
-
      return d[1]*height;
+
      return y(d[1]);
    })
    .attr("r", 3);
  
  // Once we append the vis elments to it, we return the DOM element for Observable to display above.
  return svg.node()
}

{
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
  width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
  // DOM.svg() is a Observables specific convenience method which creates an SVG DOM element. 
  const svg = d3.select(DOM.svg(width + margin.left + margin.right, 
                                height + margin.top + margin.bottom))
-
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .style("overflow", "visible");

  //Set up scales that we can use to draw the axes
  var x = d3.scaleLinear()
  .domain([0.0,1.0])
  .range([0,width]);
  var y = d3.scaleLinear()
  .domain([0.0,1.0])
  .range([height,0]);

  //Setting up the axes
  var xAxis = d3.axisBottom().scale(x).ticks(5);

  var yAxis = d3.axisLeft().scale(y).ticks(5);

  //Add the axis to our svg element
  // x-axis
  svg.append("g")
    .attr("class", "x axis label")
    .attr("transform", "translate(" + 0 + "," + height + ")")
    .call(xAxis)
    .append("text")
    .text("x")
    .attr("x", width)
    .attr("y", -6)
+
    .attr("fill","currentColor")
    .style("text-anchor", "end");
  // y-axis
  svg.append("g")
    .attr("class", "y axis label")
    .call(yAxis)
    .append("text")
    .text("y")
    .attr("transform", "rotate(-90)")
+
    .attr("x",6)
    .attr("y",6)
+
    .attr("fill","currentColor")
    .style("text-anchor","end");
  
  // sobol data set
  var rng = new ql.SobolRsg().init(1);

  var dataset = [];
  for(var i=0; i<2048; i++) {
    dataset.push([rng.nextSequence().value[0], rng.nextSequence().value[0]]);
  }

  svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
-
      return d[0]*width;
+
      return x(d[0]);
    })
    .attr("cy", function(d) {
-
      return d[1]*height;
+
      return y(d[1]);
    })
    .attr("r", 3);
  
  // Once we append the vis elments to it, we return the DOM element for Observable to display above.
  return svg.node()
}