D3 Examples - well json 2

xxxxxxxxxx
 
<!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>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    var g = svg.append("g")
    .attr("transform", "translate(0, 40)")  // move baseline to bottom of svg
    
    
    var chartHeight = 405;
    
    var maxDepth = d3.max(wells, function(d) {return d.depth; });
    
    wells = wells.sort(function(a,b) { return a.depth - b.depth; }); // sort wells by depth
    
    
    format = d3.time.format("%Y-%m-%d"); 
    wells.forEach(function(d) {      
      if (d.spud_date) {
        d.spud_date = format.parse(d.spud_date);
      }      
    });
    
    // Find range of date column
    var time_extent = d3.extent(wells, function(d) { return d.spud_date; }); 
​
    // Find range of depth column
    var depth_extent = d3.extent(wells, function(d) { return d.depth; })
        
​
​
​
    // Create x-axis scale mapping dates -> pixels
    var xScale = d3.time.scale()
        .range([0, 960])
        .domain(time_extent);
    
    // Create y-axis scale mapping depth -> pixels
    var yScale = d3.scale.linear()  //scale y-axis to deepest well
        .domain([0, maxDepth])
        .range([chartHeight, 0])
    
    
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .ticks(d3.time.years, 3);
​
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
    
    d3.select("svg")
        .append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(8,chartHeight)")
        .call(xAxis);
​
    d3.select("svg")
        .append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(79,29)")
        .call(yAxis);
​
    
    
    
   
    var circles = g.selectAll("circle")
        .data(wells)
    
    
    circles.enter()
            .append("circle")
        .attr("cx", function(d,i) { return  20 + i * 9})
        .attr("cy", function(d,i) { return chartHeight - yScale(d.depth) }) // subtracting from chartHeight inverts the chart
        .attr("r", 4)    
        .on("mouseover", function(d) { console.log(d)})
    
​
    
  </script>
</body>
    