D3 Schmidt Net Visualization

Structural geology is a very visual subject to say the least.

To help geologists visualize the different orientations of planes, the creation and understanding of Schmidt net diagrams are fundamental.

To help me study and save time recreating Schmidt nets, I’ve created a simple D3.js visualization tool on CodePen to help me plot simple planes.

See implementation here: http://codepen.io/rickgao/pen/BQYwoa

I actually haven’t seen a simple visualization like this beyond arijitlaik’s svgnet which doesn’t use graticules for the projection.

The inner workings are actually quite simple. Per theory, I simply used the built-in geoAzimuthalEqualArea projections and limited it’s graticule extents to that of a Schmidt Net

var graticule = d3.geoGraticule()
.extent([[-90,-90],[90.1,90]]) //.1 to force 90E line draw
.step([2,2])
.precision([1]);

The 10 degree lat/lon graticule and the red plane itself are simply 2 more graticule paths overlying and transformed on top.

var graticuleInput = d3.geoGraticule()
.extent([[90-dip_angle,-90],[90-dip_extent,90]])
.step([1])
.precision([1]);

Where the dip extent is simply a 1 degree place holder:


var dip_angle = 45,
dip_extent = dip_angle — 1,

On render, the input is transformed per the scaling of the entire projection and rotated by the dip direction minus 90 degrees.

svg.append(“path”)
.datum(graticuleInput)
.attr(“class”, “graticule_input_plane”)
.attr(“transform”, “translate(“ + width/3 + “,” + height/3 + “) rotate(“+dip_direction +”)”)
.attr(“d”, path);

Overall a quick & dirty hack, but it works. In the future I might do some kind of CRUD-like implementation like arijitlaik’s and persist it to some kind of backend.