Michael Angelo Ruta © 2018
Last active
October 24, 2018 07:44
-
-
Save michaelmruta/895a3d62802ecd0563c88ac1ee59d552 to your computer and use it in GitHub Desktop.
Vertical Lithology
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| author: michael angelo ruta |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| date | Andesitic | Tuff | Breccia | |
|---|---|---|---|---|
| 2018-10-05 14:17:29 | 33.49645872 | 17.97918606 | 48.52435522 | |
| 2018-10-05 14:47:29 | 22.83058885 | 27.35182633 | 49.81758482 | |
| 2018-10-05 15:17:29 | 11.50453055 | 43.60864317 | 44.88682628 | |
| 2018-10-05 15:47:29 | 5.444594364 | 48.65263305 | 45.90277259 | |
| 2018-10-05 16:17:29 | 47.95610887 | 3.789873695 | 48.25401744 | |
| 2018-10-05 16:47:29 | 17.41918026 | 33.34839936 | 49.23242038 | |
| 2018-10-05 17:17:29 | 31.49934189 | 23.68931238 | 44.81134573 | |
| 2018-10-05 17:47:29 | 48.99358227 | 43.78619175 | 7.220225983 | |
| 2018-10-05 18:17:29 | 33.36751821 | 36.94720696 | 29.68527483 | |
| 2018-10-05 18:47:29 | 19.84141625 | 7.114713641 | 73.0438701 | |
| 2018-10-05 19:17:29 | 47.42638812 | 22.89277413 | 29.68083776 | |
| 2018-10-05 19:47:29 | 18.93029577 | 41.77297881 | 39.29672542 | |
| 2018-10-05 20:17:29 | 4.342000986 | 45.61597192 | 50.0420271 | |
| 2018-10-05 20:47:29 | 8.802102046 | 36.72417155 | 54.47372641 | |
| 2018-10-05 21:17:29 | 13.12090324 | 19.51968373 | 67.35941303 | |
| 2018-10-05 21:47:29 | 44.32191287 | 16.19294846 | 39.48513867 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| .legend { | |
| font-size: 12px; | |
| } | |
| rect { | |
| stroke-width: 2; | |
| } | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <svg width="300" height="400"></svg> | |
| <script> | |
| var svg = d3.select("svg"); | |
| // Cross Lines | |
| svg | |
| .append('defs') | |
| .append('pattern') | |
| .attr('id', 'texture0') | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 8) | |
| .attr('height', 8) | |
| .append('path') | |
| .attr('d', 'M0 0L8 8ZM8 0L0 8Z') | |
| .attr('stroke', d3.schemeCategory20[0]) | |
| .attr('stroke-width', 1); | |
| // Horizontal Lines | |
| svg | |
| .append('defs') | |
| .append('pattern') | |
| .attr('id', 'texture1') | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 6) | |
| .attr('height', 6) | |
| .append('path') | |
| .attr('d', 'M 0 0 L 0 10') | |
| .attr('stroke', d3.schemeCategory20[1]) | |
| .attr('stroke-width', 2); | |
| // Dots | |
| svg | |
| .append('defs') | |
| .append('pattern') | |
| .attr('id', 'texture2') | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 5) | |
| .attr('height', 5) | |
| .append('circle') | |
| .attr('cx', 4) | |
| .attr('cy', 4) | |
| .attr('r', 1) | |
| .attr('fill', d3.schemeCategory20[2]) | |
| // Vertical Lines | |
| svg | |
| .append('defs') | |
| .append('pattern') | |
| .attr('id', 'texture3') | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 6) | |
| .attr('height', 6) | |
| .append('path') | |
| .attr('d', 'M 0 0 L 10 0') | |
| .attr('stroke', d3.schemeCategory20[3]) | |
| .attr('stroke-width', 2); | |
| // Vis | |
| margin = { top: 80, right: 140, bottom: 30, left: 50 }; | |
| width = svg.attr("width") - margin.left - margin.right; | |
| height = svg.attr("height") - margin.top - margin.bottom; | |
| var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S"); | |
| var x = d3.scaleTime().range([0, height]), | |
| y = d3.scaleLinear().range([0, width]), | |
| z = d3.scaleOrdinal(d3.schemeCategory10); | |
| var stack = d3.stack(); | |
| var area = d3.area() | |
| .y(function(d, i) { return x(d.data.date); }) | |
| .x0(function(d) { return y(d[0]); }) | |
| .x1(function(d) { return y(d[1]); }); | |
| var valueline = d3.line() | |
| .y(function(d, i) { return x(d.data.date); }) | |
| .x(function(d) { return y(d[0]); }) | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.top + "," + margin.left + ")"); | |
| d3.tsv("data.tsv", type, function(error, data) { | |
| if (error) throw error; | |
| var keys = data.columns.slice(1); | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| z.domain(keys); | |
| stack.keys(keys); | |
| var layer = g.selectAll(".layer") | |
| .data(stack(data)) | |
| .enter().append("g") | |
| .attr("class", "layer"); | |
| layer.append("path") | |
| .attr("class", "area") | |
| .style("stroke", 1) | |
| .attr("d", area) | |
| .attr('fill', function(d) { | |
| return 'url(#texture' + d.index % 4 + ')'; | |
| }); | |
| layer.append("path") | |
| .attr("d", valueline) | |
| .attr('stroke-width', function(d) { return 2; }) | |
| .attr('fill', 'none') | |
| .attr('stroke', function(d) { | |
| return d3.schemeCategory20[d.index]; | |
| }) | |
| g.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(y).ticks(5)); | |
| g.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(d3.axisLeft(x).ticks(12).tickFormat(d3.timeFormat("%b-%d %H:%M"))); | |
| var legendRectSize = 18; | |
| var legendSpacing = 4; | |
| var legend = svg.selectAll('.legend') | |
| .data(keys) | |
| .enter() | |
| .append('g') | |
| .attr('class', 'legend') | |
| .attr('transform', function(d, i) { | |
| var height = legendRectSize + legendSpacing; | |
| var offset = keys.length / 2; | |
| var horz = svg.attr("width") - 100; | |
| var vert = i * height - offset + margin.left + 10; | |
| return 'translate(' + horz + ',' + vert + ')'; | |
| }); | |
| legend.append('rect') | |
| .attr('width', legendRectSize) | |
| .attr('height', legendRectSize) | |
| .style('fill', function(d) { | |
| console.log(keys) | |
| console.log(keys.indexOf(d)) | |
| return 'url(#texture' + keys.indexOf(d) % 4 + ')'; | |
| }) | |
| .style('stroke', function(d) { | |
| return d3.schemeCategory20[keys.indexOf(d)]; | |
| }) | |
| legend.append('text') | |
| .attr('x', legendRectSize + legendSpacing) | |
| .attr('y', legendRectSize - legendSpacing) | |
| .text(function(d) { console.log(d); return d; }); | |
| }); | |
| function type(d, i, columns) { | |
| d.date = parseDate(d.date); | |
| for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100; | |
| return d; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment