well json

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="wells.js"></script>
  <script src="wells2.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

var w = 1000;
var h = 800;

var svgVar = d3.select("#something")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
;
    
svgVar.append('rect')
    .attr('width', w / 2)
    .attr('height', h / 2 )
    .attr('fill', '#00FF00')
;

svgVar.append('rect')
    .attr('x', 50)
    .attr('y', 50)
    .attr('width', w / 2)
    .attr('height', h / 2 )
    .attr('fill', '#FFFF00')
;

var w = 1000;
var h = 2000;
    
var svgNew = d3.select("#vis")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
;

function draw(wells){
    console.log(wells);
    svgVar.selectAll('circle')
        .data(wells)
        .enter()
        .append('circle')
        .attr('cx', function(d,i){
            return i * 20
            })
        .attr('cy', function(d,i){
            return parseInt(wells[i].depth) / 30
            })
        .attr('r', function(d,i){ return wells[i].depth/1000})
        .attr('fill', '#0055FF');

d3.select('svg')  // begin transition on click
        .on('click', function(){
//             d3.json("https://localhost:3000/api/nd.json", trans)  // get new data from server
      			trans(wells2);
            function trans(newWells){
                console.log(newWells)  // console.log new data

svgVar.selectAll('circle')
                    .data(newWells) // update new data
                    .transition() // transition from old to new
                    .duration(1000) // length of animation
                    .delay(function(d,i){
                        return i / newWells.length * 2000
                    })
                    .attr('cx', function(d,i) {
                        return i * 20
                    })
                    .attr('cy', function(d,i) {
                        return parseInt(newWells[i].depth) / 30
                    })
                    .attr('r', function(d,i){ return newWells[i].depth/1000})
                    .attr('fill', '#0055FF');
            }
        });
};

// d3.json("https://localhost:3000/api/nd.json", draw);  // begin visualization
draw(wells);

</script>

https://d3js.org/d3.v3.min.js