|
/* Remember: Use four-space indents. |
|
* However, use two-space indents for operations that change the selection. |
|
* For more information, see: |
|
* https://bost.ocks.org/mike/d3/workshop/#35 |
|
*/ |
|
var svg = d3.select("svg"), |
|
margin = {top: 20, right: 20, bottom: 20, left: 40}, |
|
width = +svg.attr("width") - margin.left - margin.right, |
|
height = +svg.attr("height") - margin.top - margin.bottom; |
|
|
|
var g = svg.append("g") |
|
.attr("transform", translate(margin.left, margin.top)); |
|
|
|
d3.csv("data.csv", row, function (error, data) { |
|
var nest = d3.nest() |
|
.key(function (d) { return d.well; }).sortKeys(d3.ascending) |
|
.entries(data); |
|
|
|
// We need to derive new data to produce the stratigraphic profile. |
|
// We could do it in Excel. |
|
// But if we do it here, then we have a record of what we did. |
|
nest.forEach(function (entry) { |
|
// Derive the top depth for each formation. |
|
entry.values.forEach(function (value, i) { |
|
if (i > 0) { |
|
value.top = entry.values[i - 1].top + value.md; |
|
} else { |
|
value.top = value.md; |
|
} |
|
}); |
|
|
|
// Derive the bottom depth for each formation. |
|
entry.values.forEach(function (value, i) { |
|
if (i < entry.values.length - 1) { |
|
value.bottom = entry.values[i + 1].top; |
|
} |
|
}); |
|
|
|
// Pop (delete) the last formation because it won't have a bottom depth. |
|
entry.values.pop(); |
|
}); |
|
|
|
var x = d3.scaleBand() |
|
.domain(nest.map(function (d) { return d.key; })) |
|
.range([0, width]) |
|
.padding(0.5); |
|
|
|
var y = d3.scaleLinear() |
|
.domain([-1800, 100]) |
|
.range([height, 0]); |
|
|
|
// Create a group for each stack. |
|
var stacks = g.append("g").selectAll(".stack") |
|
.data(nest) |
|
.enter().append("g") |
|
.attr("class", "stack") |
|
.attr("transform", function (d) { return translate(x(d.key), 0); }); |
|
|
|
// Create a rectangle for each element. |
|
stacks.selectAll(".element") |
|
.data(function (d) { return d.values; }) |
|
.enter().append("rect") |
|
.attr("class", "element") |
|
.attr("x", 0) |
|
.attr("y", function (d) { return y(d.top); }) |
|
.attr("width", x.bandwidth()) |
|
.attr("height", function (d) { return Math.abs(y(d.top) - y(d.bottom)); }); |
|
|
|
g.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", translate(0, height)) |
|
.call(d3.axisBottom(x)); |
|
|
|
g.append("g") |
|
.attr("class", "y axis") |
|
.call(d3.axisLeft(y)); |
|
}); |
|
|
|
function row(d) { |
|
d.md = +d.md; |
|
return d; |
|
} |
|
|
|
function translate(x, y) { |
|
return "translate(" + x + "," + y + ")"; |
|
} |
