31:T1809,function CurveBox(well_curve_config_template){ //// Getting the variables out of the input json template well_curve_config_template = well_curve_config_template[0] let multipleLines = well_curve_config_template["multipleLines"] let curveNames = well_curve_config_template["curveNames"] let curveColors = well_curve_config_template["curveColors"] let curveName = curveNames[0] let curveColor = curveColors[0] //// let data = well_curve_config_template["data"] let width = well_curve_config_template["width"] let height = well_curve_config_template["height"] let margin = well_curve_config_template["margin"] let depth_curve_name = well_curve_config_template["depth_curve_name"] //// Calculate depth min and max let depth_min if(!depth_min){depth_min = d3.min(data, function(d) { return +d[depth_curve_name];});} let depth_max if(!depth_max){depth_max = d3.max(data, function(d) { return +d[depth_curve_name];});} // Calculate x domain extent for one or more than one curve let mins = [] let maxes = [] for (let i = 0; i < curveNames.length; i++) { let min_this = d3.min(data, function(d) { return +d[curveNames[i]]}) let max_this = d3.max(data, function(d) { return +d[curveNames[i]]}) mins.push(min_this) maxes.push(max_this) } let min_all_curves = d3.min(mins) let max_all_curves = d3.max(maxes) //// Calculate Axis & Scales let x = d3.scaleLinear().domain([min_all_curves,max_all_curves]).nice().range([margin.left, width - margin.right]) let y = d3.scaleLinear().domain([depth_max, depth_min]).nice().range([height - margin.bottom, margin.top]) let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain").remove()) /////// All variables created above now they are applied below /////// , some in for loops for multiple curves and areas /////// attempt at function for color used in ..... function colors(data_array){ let color_array = [] for (let i =0;i 0){ color_array.push =("blue") } else { color_array.push("green") } } return color_array } //// START to make the firt SVG const svg = d3.create("svg") svg.attr("class","first") svg.attr("width",width) .attr("height",height); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); /////// throw away code for single curve to plot that will be deleted soon ///// was here: //// Code that assumes multiple curves are plotted in same curvebox if(multipleLines == "yes"){ for (let k = 0; k < curveNames.length; k++) { ///// code that creates a line for each Curve in order provided and applies ///// the color in the color array in order provided let another_line = d3.line().x(d => x(d[curveNames[k]])).y(d => y(d[depth_curve_name])); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", curveColors[k]) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", another_line); } // define the area filled under the curve let two_curve_fill_flag = "no" for (let i = 0; i < well_curve_config_template["fill"].length; i++) { //// if (well_curve_config_template["fill"][i]["fill"] == "yes"){ let number_colors = well_curve_config_template["fill"][i]["fillColors"].length let curveName1 = well_curve_config_template["fill"][i]["curveName"] let threshold = -99999999 let fillColor = "gray" console.log("got inside fill,",curveName1,'number_colors',number_colors) ////// for (let j = 0; j < number_colors; j++) { console.log("got to start of J loop",j) let area1 = d3.area() if (number_colors != 0){ threshold = well_curve_config_template["fill"][i]["cutoffs"][j] fillColor = well_curve_config_template["fill"][i]["fillColors"][j] } if(well_curve_config_template["fill"][i]["fillDirection"] == "left"){ let startFromLeft = well_curve_config_template["margin"]["left"] area1 .x1(d => x(d[curveName1])) .x0(d => startFromLeft) .defined(d => ((d[curveName1])>threshold)) .y(d => y(d[depth_curve_name])); } if(well_curve_config_template["fill"][i]["fillDirection"] == "right"){ let startFromRight = well_curve_config_template["margin"]["right"] area1 .x0(d => x(d[curveName1])) .x1(d => startFromRight) .defined(d => ((d[curveName1]) y(d[depth_curve_name])); } if(well_curve_config_template["fill"][i]["fillDirection"] == "between"){ let between2Curve = well_curve_config_template["fill"][i]["curve2"] area1 .x1(d => x(d[curveName1])) .x0(d => x(d[between2Curve])) .defined(d => ((d[curveName1])>threshold)) .y(d => y(d[depth_curve_name])); } svg.append("path") .datum(data) .attr("class", "area") .attr("d", area1) .attr("stroke", "none") .attr("fill",fillColor) .attr("fill-opacity",0.8); ///// console.log("got to end of J loop",j) } } } } return svg.node(); }32:T98d,function makeManyPlots(){ let well_curve_config_GR = [ {"multipleLines":"yes","curveNames":["GR"], "curveColors":["black","pink"], "fill":[ {"curveName":"GR","fill":"yes","fillDirection":"left","cutoffs":[0,ShaleSiltCutOff,SiltSandCutOff],"fillColors":["gray","orange","yellow"],"curve2":""}, {"curveName":"RESD","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""} ], "data":well_log_converted_to_d3_friendly, "width":scwidth, "height":400, "margin":({top: 20, right: 3, bottom: 30, left: 30}), "depth_curve_name":"DEPTH"}] let well_curve_config_RESD = [{"multipleLines":"yes","curveNames":["RESD"],"curveColors":["red"],"curveName":"GR","curveColor":"yellow", "fill":[ {"curveName":"PHIN","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}, {"curveName":"PHID","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""} ],"data":well_log_converted_to_d3_friendly,"width":scwidth,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}] let well_curve_config_CAL = [{"multipleLines":"yes","curveNames":["CAL"],"curveColors":["black"],"curveName":"GR","curveColor":"yellow", "fill":[ {"curveName":"CAL","fill":"yes","fillDirection":"left","cutoffs":[200,320],"fillColors":["lightblue","gray"],"curve2":""}, {"curveName":"PHID","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""} ],"data":well_log_converted_to_d3_friendly,"width":scwidth,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}] let well_curve_config_PHIs = [{"multipleLines":"yes","curveNames":["PHID","PHIN"],"curveColors":["purple","orange"], "fill":[ {"curveName":"PHID","fill":"yes","fillDirection":"between","cutoffs":[0],"fillColors":["lightgreen"],"curve2":"PHIN"}, {"curveName":"PHID","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""} ],"data":well_log_converted_to_d3_friendly,"width":scwidth,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}] let plot_GR = CurveBox(well_curve_config_GR) let plot_RESD = CurveBox(well_curve_config_RESD) let plot_CAL = CurveBox(well_curve_config_CAL) let plot_PHIs = CurveBox(well_curve_config_PHIs) let well_curve_plots_array =[plot_GR,plot_RESD,plot_CAL,plot_PHIs] return well_curve_plots_array }33:T19cc,function CurveBox2(well_curve_config_template){ well_curve_config_template = well_curve_config_template[0] let div_id = "well_holder" if(well_curve_config_template["divID"]){div_id = well_curve_config_template["divID"]} let multipleLines = well_curve_config_template["multipleLines"] let curveNames = well_curve_config_template["curveNames"] let curveColors = well_curve_config_template["curveColors"] let curveName = curveNames[0] let curveColor = curveColors[0] let curveUnits = ""; if(well_curve_config_template["curveUnits"]){curveUnits = well_curve_config_template["curveUnits"]} //// let data = well_curve_config_template["data"] let width = well_curve_config_template["width"] let height = well_curve_config_template["height"] let margin = well_curve_config_template["margin"] let depth_curve_name = well_curve_config_template["depth_curve_name"] //// Calculate depth min and max let depth_min if(!depth_min){depth_min = d3.min(data, function(d) { return +d[depth_curve_name];});} let depth_max if(!depth_max){depth_max = d3.max(data, function(d) { return +d[depth_curve_name];});} // Calculate x domain extent for one or more than one curve let mins = [] let maxes = [] for (let i = 0; i < curveNames.length; i++) { let min_this = d3.min(data, function(d) { return +d[curveNames[i]]}) let max_this = d3.max(data, function(d) { return +d[curveNames[i]]}) mins.push(min_this) maxes.push(max_this) } let min_all_curves = d3.min(mins) let max_all_curves = d3.max(maxes) //// Calculate Axis & Scales let x = d3.scaleLinear().domain([min_all_curves,max_all_curves]).nice().range([margin.left, width - margin.right]) let y = d3.scaleLinear().domain([depth_max, depth_min]).nice().range([height - margin.bottom, margin.top]) let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain").remove()) /////// All variables created above now they are applied below /////// , some in for loops for multiple curves and areas /////// attempt at function for color used in ..... function colors(data_array){ let color_array = [] for (let i =0;i 0){ color_array.push =("blue") } else { color_array.push("green") } } return color_array } const svg = d3.select("#"+div_id).append("svg") svg.attr("class","first") svg.attr("width",width) .attr("height",height); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); /////// throw away code for single curve to plot that will be deleted soon ///// was here: //// Code that assumes multiple curves are plotted in same curvebox if(multipleLines == "yes"){ for (let k = 0; k < curveNames.length; k++) { ///// code that creates a line for each Curve in order provided and applies ///// the color in the color array in order provided let another_line = d3.line().x(d => x(d[curveNames[k]])).y(d => y(d[depth_curve_name])); let curveUnit = ""; if (curveUnits[k]){curveUnit = curveUnits[k]} svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", curveColors[k]) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", another_line); svg.append("text") .attr("x", (width / 2)) .attr("y", 0 + (margin.top -10 )) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text(curveUnit); } // define the area filled under the curve let two_curve_fill_flag = "no" for (let i = 0; i < well_curve_config_template["fill"].length; i++) { //// if (well_curve_config_template["fill"][i]["fill"] == "yes"){ let number_colors = well_curve_config_template["fill"][i]["fillColors"].length let curveName1 = well_curve_config_template["fill"][i]["curveName"] let threshold = -99999999 let fillColor = "gray" ////// for (let j = 0; j < number_colors; j++) { console.log("got to start of J loop",j) let area1 = d3.area() if (number_colors != 0){ threshold = well_curve_config_template["fill"][i]["cutoffs"][j] fillColor = well_curve_config_template["fill"][i]["fillColors"][j] } if(well_curve_config_template["fill"][i]["fillDirection"] == "left"){ let startFromLeft = well_curve_config_template["margin"]["left"] area1 .x1(d => x(d[curveName1])) .x0(d => startFromLeft) .defined(d => ((d[curveName1])>threshold)) .y(d => y(d[depth_curve_name])); } if(well_curve_config_template["fill"][i]["fillDirection"] == "right"){ let startFromRight = well_curve_config_template["margin"]["right"] area1 .x0(d => x(d[curveName1])) .x1(d => startFromRight) .defined(d => ((d[curveName1]) y(d[depth_curve_name])); } if(well_curve_config_template["fill"][i]["fillDirection"] == "between"){ let between2Curve = well_curve_config_template["fill"][i]["curve2"] area1 .x1(d => x(d[curveName1])) .x0(d => x(d[between2Curve])) .defined(d => ((d[curveName1])>threshold)) .y(d => y(d[depth_curve_name])); } svg.append("path") .datum(data) .attr("class", "area") .attr("d", area1) .attr("stroke", "none") .attr("fill",fillColor) .attr("fill-opacity",0.8); } } } } return svg.node(); }34:[{"id":"009e3aaccfea161f9650350e36061f2ae797ac87caadfc38389df0e686c5346b39409c1ccf2c8594cce3df3cff49822da5300ccb0753e7a52ea3398252c3b88d","href":"https://static.observableusercontent.com/files/009e3aaccfea161f9650350e36061f2ae797ac87caadfc38389df0e686c5346b39409c1ccf2c8594cce3df3cff49822da5300ccb0753e7a52ea3398252c3b88d","name":"00-11-22-068-14W4-0.LAS","type":"application/octet-stream","lastModified":1573272566309.409,"size":39539},{"id":"32f7aae598157653143f3d350ebef652464506b651261b938d34001983674681cbd4e46acdab2f4b7b04b6ba4b57a1a9c35ae820634dc4bcb57bace508f82237","href":"https://static.observableusercontent.com/files/32f7aae598157653143f3d350ebef652464506b651261b938d34001983674681cbd4e46acdab2f4b7b04b6ba4b57a1a9c35ae820634dc4bcb57bace508f82237","name":"00-16-29-073-05W5-0.LAS","type":"application/octet-stream","lastModified":1573272566866.31,"size":56007},{"id":"c2b28c866e74f22161b83378dde80ea1be654b1544acb91c4f40b7a70ace2b9fff6fc3fc4a1825d02d7a96f35234838b59fe4951ff1f85338767203fc3164273","href":"https://static.observableusercontent.com/files/c2b28c866e74f22161b83378dde80ea1be654b1544acb91c4f40b7a70ace2b9fff6fc3fc4a1825d02d7a96f35234838b59fe4951ff1f85338767203fc3164273","name":"00-06-26-075-21W4-0.LAS","type":"application/octet-stream","lastModified":1573272566718.073,"size":48446},{"id":"bb000e6bb000d523dfc1d642789f7a5c21176aaceb99456f73b1ca41c3c10ee29056962b02f2709ac819344d6f0dde62cc761c6c425dcdfc87c90f6135d57667","href":"https://static.observableusercontent.com/files/bb000e6bb000d523dfc1d642789f7a5c21176aaceb99456f73b1ca41c3c10ee29056962b02f2709ac819344d6f0dde62cc761c6c425dcdfc87c90f6135d57667","name":"00-10-35-081-15W4-0.LAS","type":"application/octet-stream","lastModified":1573272566666.411,"size":44430},{"id":"09ba3346f41283f73827379dc5b686ca3b67dc1a7729122b124e863c85954c62f163da6bfdbfa9ac83aff09c212e5bd673308821d58174ef9d5f8360c3e80928","href":"https://static.observableusercontent.com/files/09ba3346f41283f73827379dc5b686ca3b67dc1a7729122b124e863c85954c62f163da6bfdbfa9ac83aff09c212e5bd673308821d58174ef9d5f8360c3e80928","name":"00-16-13-071-01W4-0.LAS","type":"application/octet-stream","lastModified":1573272566677.127,"size":51007},{"id":"35ce00ef7c874feb6f6bf3a89388f1d21cfcae70feaf249625050cfc3af9793a4a3d95d368a6586128a1eca7c0fcaffbecd1faf1852e644eda83bfece773db43","href":"https://static.observableusercontent.com/files/35ce00ef7c874feb6f6bf3a89388f1d21cfcae70feaf249625050cfc3af9793a4a3d95d368a6586128a1eca7c0fcaffbecd1faf1852e644eda83bfece773db43","name":"00-06-02-076-15W4-0.LAS","type":"application/octet-stream","lastModified":1573272566195.53,"size":40856},{"id":"0bd879e7e9b8d5a789d17784bdbc82f80844c94862db2d2575f9a257cda93a272fdf94d87b6674588f787fb0e40f27eec33cafcd91f8fd9d90ec1896f198a0f9","href":"https://static.observableusercontent.com/files/0bd879e7e9b8d5a789d17784bdbc82f80844c94862db2d2575f9a257cda93a272fdf94d87b6674588f787fb0e40f27eec33cafcd91f8fd9d90ec1896f198a0f9","name":"00-11-18-079-03W5-0.LAS","type":"application/octet-stream","lastModified":1573272565057.372,"size":22633}] 2f:{"title":"Well Log in D3.js v5","cells":[{"id":1,"value":"md`# Well Log in D3.js v5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2465,"value":"md `# THIS IS OUT OF DATE`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"md `Work has moved to https://observablehq.com/@justingosses/well-log-in-d3-js-v5-notebook-2 & https://observablehq.com/@justingosses/first-wellio-example-with-all-wellioviz-functions-from-npm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"grid2 = html`\n

RESD

CAL

PHID & PHIN

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"viewof SiltSandCutOff = slider({\n min: 0,\n max: 100,\n step: 2,\n value: 22,\n format: \",\",\n description:\n \"experimental silt/sand cutoff slider\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"viewof ShaleSiltCutOff = slider({\n min: 0,\n max: 100,\n step: 2,\n value: 47,\n format: \",\",\n description:\n \"experimental shale/silt cutoff slider\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"md `### GOAL:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"md `

A proof of concept for visualizing well logs in Observable.

Well logs are a little tricky even though they are line charts, they are typically visualized vertically instead of the traditional horizontal line chart. Additionally, they are sometimes viewed with cross-cutting lines that go acros multiple plots and more than one line with more than on one data domain on the same plot. This requires multiple lines/points in a single SVG and multiple SVGs in a single Observable cell.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"md `This is a work in progress but seems going in the right direction. Have fill but not in such a way to just fill in overlap of two curves for example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"html `In terms of curve fill, ideally want to have options to do:

Fill in the curve from left margin to curve
Fill in curve from right margin
Fill in between two curves
Color fill differently based on value of curve, all curves under points > X colored differently than points < X.
Fill in parts where curve X is greater than curve Y or the inverse or overlap in both directions
Change fill to svg pattern and not just color

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2259,"value":"html `

Several different ways of plotting should be possible

One Curve in one box [GR]
Multiple curves in one box [PHID & PHIN]
Multiple curve boxes from one well [[GR],[RSD],[PHI]]
Multiple curve boxes from different wells showing same curve (cross-section) [[GR],[GR],[GR],[GR]]

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"html `

Also would be nice to have tops, perhaps interactive

Show top as line in curve box
Show multiple tops with colors and/or labels to distinguish
Be able to select a top name via dropdown or create a top name via form input an then click to place it
Be able to visualize tops both as a point deterministically and as a curve for probabilitic representation

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2120,"value":"html `Might eventually clean up the code and move this into wellio_Viz.js?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2287,"value":"html `A big question is how to design the API such that all of the different things you might want to plot and how to plot them described above (plus many more) are intuitive? This is especially important as most of the people who would use LAS files are Python people, not JavaScript people.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md `____________`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"md `## First, we upload a well log that has already been converted into JSON with wellio.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"html `

In the bottom portion of this notebook we'll show how to load a native LAS well log file from your local computer or load from a .LAS file saved on github gists. There's also new methods to load files, including LAS files, from anywhere into Observable notebooks as file attachments, whic is also demoed at bottom.

For simplicity initially, we'll load one here that has already been converted to JSON with wellio.js.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"well_log_json = \nd3.json(\"https://cdn.rawgit.com/JustinGOSSES/c643e25774aea39556799cc517654d46/raw/db70839e481551dcbadb509fb75c68e3c099de71/00_01-01-073-05W5_0.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md `We'll get out an array of curve names and string for the UWI as we'll use those later`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"curve_names_array = Object.keys(well_log_json['CURVES'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"html `Each curve is a different measurement taken at different depths along the well.

GR (gamma-ray measurement affected by mineral content),
RESD (resititivity to flow of electricity which can be driven by water content),
CAL(caliper or measurement of hole width),
and PHIN & PHID (two measurements of rock porosity)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"html `UWI is the unique well identifier`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"UWI = well_log_json[\"WELL INFORMATION BLOCK\"][\"UWI\"][\"DATA\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md `-------------------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md `## Now lets convert one well log curve into a shape that d3.js likes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md `This function takes all the curve arrays from the wellio.js style json object \"well_log_json\" and converts it and the depth array and the UWI as an array into an easier to consume json for the Vega * d3.js data visualization libraries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"function convertWellJSONToObj(well_log_json,CurveNames,UWI){\n let depth = well_log_json[\"CURVES\"][\"DEPTH\"]\n let curve_data = []\n for(let eachCr in CurveNames){\n curve_data.push(well_log_json[\"CURVES\"][CurveNames[eachCr]])\n }\n let array_of_obj = []\n if (depth.length === well_log_json[\"CURVES\"][CurveNames[0]].length){\n for(let eachPt in depth){\n let obj = {}\n obj[\"UWI\"] = UWI\n for(let i in CurveNames){\n obj[CurveNames[i]] = parseFloat(curve_data[i][eachPt])\n }\n array_of_obj.push(obj) \n }\n }\n else{\n \tconsole.log(\"depth didn't match curve length\")\n array_of_obj.push(\"depth didn't match curve length\")\n }\n return array_of_obj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"well_log_converted_to_d3_friendly = convertWellJSONToObj(well_log_json,curve_names_array,UWI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"data = well_log_converted_to_d3_friendly","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"md `## Now let's use d3.js to visualize the well log curve data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"html `I've put all the inputs into a JSON template so its a little easier to read and re-used input variables.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2298,"value":"well_log_converted_to_d3_friendly","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"well_curve_config_template = [\n {\"multipleLines\":\"yes\",\"curveNames\":[\"GR\"],\n \"curveColors\":[\"black\",\"pink\"],\n \"fill\":[\n {\"curveName\":\"GR\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fillColors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\n {\"curveName\":\"RESD\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\n \"data\":well_log_converted_to_d3_friendly,\n \"width\":200,\n \"height\":400,\n \"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\n \"depth_curve_name\":\"DEPTH\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1403,"value":"html `CurveBox is the most important function in this notebook. It takes in the template above and draws a single curve plot that may have one or more curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"plot1 = CurveBox(well_curve_config_template)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1294,"value":"html `We can even put multiple curves in the same plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2018,"value":"plot2332 = CurveBox([{\"multipleLines\":\"yes\",\"curveNames\":[\"PHID\",\"PHIN\"],\"curveColors\":[\"purple\",\"orange\"], \"fill\":[\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"between\",\"cutoffs\":[0],\"fillColors\":[\"lightblue\"],\"curve2\":\"PHIN\"},\n {\"curveName\":\"PHID\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":200,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1296,"value":"well_curve_config_template_PHID_PHIN = [{\"multipleLines\":\"yes\",\"curveNames\":[\"PHID\",\"PHIN\"],\"curveColors\":[\"blue\",\"orange\"], \"fill\":[\n {\"curveName\":\"PHIN\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"},\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":200,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1996,"value":"test_plot = CurveBox( [\n {\"multipleLines\":\"yes\",\"curveNames\":[\"GR\"],\n \"curveColors\":[\"black\",\"pink\"],\n \"fill\":[\n {\"curveName\":\"PHIN\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"},\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\n \"data\":well_log_converted_to_d3_friendly,\n \"width\":200,\n \"height\":400,\n \"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\n \"depth_curve_name\":\"DEPTH\"}])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1300,"value":"plot_PHID_PHIN_test = CurveBox([{\"multipleLines\":\"yes\",\"curveNames\":[\"PHID\",\"PHIN\"],\"curveColors\":[\"blue\",\"orange\"], \"fill\":[\n {\"curveName\":\"PHIN\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"},\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":200,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1303,"value":"html `However, what we'd really like to do is have multiple vertical oriented plots side by side in the same cell but with each curve having its own x axis domain. That's a little more complicated but possible in Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md `## Code below is for trying to get multiple curves plots in one cell!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"html `Make the input templates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"html `First, let's create the plots like above, then we'll put them in the same Observable cell or row.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2114,"value":"html `This variable is used to find the screen width. We resize our curve box width so that 4 fit in a role no matter the screen size.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1551,"value":"scwidth = screen.width \n/ 7","pinned":true,"hidden":false,"mode":"ojs"},{"id":1268,"value":"well_curve_config_GR = [\n {\"multipleLines\":\"yes\",\"curveNames\":[\"GR\"],\n \"curveColors\":[\"black\",\"pink\"],\n \"fill\":[\n {\"curveName\":\"GR\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fillColors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\n {\"curveName\":\"RESD\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\n \"data\":well_log_converted_to_d3_friendly,\n \"width\":scwidth,\n \"height\":400,\n \"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\n \"depth_curve_name\":\"DEPTH\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"well_curve_config_RESD = [{\"multipleLines\":\"yes\",\"curveNames\":[\"RESD\"],\"curveColors\":[\"red\"],\"curveName\":\"GR\",\"curveColor\":\"yellow\", \"fill\":[\n {\"curveName\":\"PHIN\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"},\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":scwidth,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"well_curve_config_CAL = [{\"multipleLines\":\"yes\",\"curveNames\":[\"CAL\"],\"curveColors\":[\"black\"],\"curveName\":\"GR\",\"curveColor\":\"yellow\", \"fill\":[\n {\"curveName\":\"CAL\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[200,320],\"fillColors\":[\"lightblue\",\"gray\"],\"curve2\":\"\"},\n {\"curveName\":\"PHID\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":scwidth,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1503,"value":"html `This one has multiple PHI curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"well_curve_config_PHIs = [{\"multipleLines\":\"yes\",\"curveNames\":[\"PHID\",\"PHIN\"],\"curveColors\":[\"purple\",\"orange\"], \"fill\":[\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"between\",\"cutoffs\":[0],\"fillColors\":[\"lightgreen\"],\"curve2\":\"PHIN\"},\n {\"curveName\":\"PHID\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":scwidth,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1420,"value":"html `making plots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"plot_GR = CurveBox(well_curve_config_GR)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1331,"value":"plot_RESD = CurveBox(well_curve_config_RESD)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1333,"value":"plot_CAL = CurveBox(well_curve_config_CAL)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1342,"value":"plot_PHIs = CurveBox(well_curve_config_PHIs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1313,"value":"html `

Now let's put them together.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"class Cell {\n constructor(element) {\n this.element = element;\n }\n get width() {\n return resizer(this.element, \"clientWidth\");\n }\n get height() {\n return resizer(this.element, \"clientHeight\");\n }\n embed(content) {\n content.style.position = \"absolute\";\n if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);\n else this.element.appendChild(content);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"function resizer(element, dimension = \"clientWidth\") {\n return Generators.observe(notify => {\n let width = notify(element[dimension]);\n const resized = () => {\n let w = element[dimension];\n if (w !== width) notify(width = w);\n };\n window.addEventListener(\"resize\", resized);\n return () => window.removeEventListener(\"resize\", resized);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"well_curve_plots_ids = [\"a\",\"b\",\"c\",\"d\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"width_curve_plot_grid=200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"height_curve_plot_grid = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"well_curve_plots_array =[plot_GR,plot_RESD,plot_CAL,plot_PHIs]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"function createAllCellsAndEmbed(html_grid_variable,Cell,well_curve_plots_array,well_curve_plots_ids,width_default){\n if(well_curve_plots_array.length !== well_curve_plots_ids.length){return \"well_curve_plots_ids and well_curve_plots_array should be the same length but they are not!\"}\n for (let i = 0; i < well_curve_plots_ids.length; i++) {\n let cellNew = new Cell(html_grid_variable.querySelector(\"[name=\"+well_curve_plots_ids[i]+\"]\"))\n cellNew.embed(well_curve_plots_array[i])\n }\n return html_grid_variable\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"first_grid = createAllCellsAndEmbed(grid,Cell,well_curve_plots_array,well_curve_plots_ids,width_curve_plot_grid)","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"grid = html`

RESD

CAL

PHID & PHIN

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"html `

Now let's reuse that work and make a clone for the top of this repository

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"well_curve_plots_array_copy2 = makeManyPlots()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"second_grid = createAllCellsAndEmbed(grid2,Cell,well_curve_plots_array_copy2,well_curve_plots_ids,width_curve_plot_grid)","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md `## Alternatively - Upload your own LAS files and convert them to json here (More than these 2 ways to do this)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"html `First, we load the wellio.js library for working with LAS format well logs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"wellio = require(\"wellio\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1602,"value":"html `One option is to load your own well log files in LAS format from your local computer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof file = DOM.input(\"file\") // Try opening a file.","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md `The advantage of the file uploader is you can work with any well logs you might have on your local computer without needing to use a proprietary software or start a jupyter notebook running python. The file will initally upload as a \"file\" variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md `we use a file buffer to make it available`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"Files.buffer(file)","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"well_log_json2 = wellio.las2json(file_1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"html `There will be an error in red until you upload a local file, so you can just ignore that if you don't want to upload a local well log file.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"md `-----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"html `

Another option is to use a well log in LAS format that has been saved in github.com gists and is still in the native LAS format. This has the advantage that the well is only ever stored as a LAS, no conversion into JSON has to stored.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"fileUrltoWellLog = 'https://gist.githubusercontent.com/JustinGOSSES/2685e588d5c2f2a0ba1591ec7b9c9421/raw/415fe8a2f27dc7621f06f60ffd40a62c0d55a0f0/00-01-01-095-19W4-0.las' // provide file location\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"fetched = await fetch(fileUrltoWellLog)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1586,"value":"well_as_string = await fetched.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md `Then call the wellio.las2json function to convert it from LAS text file to a Wellio.js json. We'll call the json that returns \"well_json_01_01_095_19W4\" here. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1595,"value":"well_json_01_01_095_19W4 = wellio.las2json(well_as_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1716,"value":"html `Run that JSON of the well through a quick function to pull out the 3 things you need for plotting in the right formats.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"function fromJSONofWEllGetThingsForPlotting(jsonWell){\n let curve_names = Object.keys(jsonWell[\"CURVES\"])\n let uwi = jsonWell[\"WELL INFORMATION BLOCK\"][\"UWI\"][\"DATA\"]\n let well_log_curves_reformatted_for_d3 = convertWellJSONToObj(jsonWell,curve_names,uwi)\n return {\"well_log_curves_reformatted_for_d3\":well_log_curves_reformatted_for_d3,\"curve_names\":curve_names,\"uwi\":uwi}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1688,"value":"three_things_2 = fromJSONofWEllGetThingsForPlotting(well_json_01_01_095_19W4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1676,"value":"curve_names2 = three_things_2[\"curve_names\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"uwi2 = three_things_2[\"uwi\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1697,"value":"well_log_curves_reformatted_for_d3_2 = three_things_2[\"well_log_curves_reformatted_for_d3\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"html `And now plot a curve using the input template & functions reused from above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"well_curve_config_template_new_well_01_01_095_19W4 = [{\"multipleLines\":\"yes\",\"curveNames\":[\"GR\"],\"curveColors\":[\"pink\"], \"fill\":[\n {\"curveName\":\"GR\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[0,65,95,109],\"fillColors\":[\"lightgreen\",\"green\",\"red\",\"pink\"],\"curve2\":\"\"},\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\n\"curveUnits\":[\"units\",\"units\"] ,\"data\":well_log_curves_reformatted_for_d3_2,\"width\":200,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1704,"value":"html `

Gamma Ray for UWI 00/01-01-095-19W4/0 well log loaded from a LAS file on github.

You're encouraged to change the ugly Christmas sweater colors and cutoffs by editing the input object above or creating inputs to build little GUI functionality. This is a great introduction to how to add on sliders, buttons, knobs, etc.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"plot_GR_new = CurveBox(well_curve_config_template_new_well_01_01_095_19W4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"html `Note: some of the other cells in this notebook assume your well logs in the uploaded well include:

GR (gamma-ray measurement affected by mineral content),
RESD (resititivity to flow of electricity which can be driven by water content),
CAL(caliper or measurement of hole width),
and PHIN & PHID (two measurements of rock porosity)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"md `### IMPORTS the d3.js library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"html `

Alternatively, we be append curve plot SVGs to a HTML div using slightly modified code

This makes it much easier from a code stand point to include multiple wells or multiple curves from teh same well in a row.

Eventually, we'll likely merge CurveBox and CurveBox2 functions and only have one...but haven't done that yet.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2147,"value":"div_idC = \"well_holder3\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2156,"value":"function fileToJSON(afile) {\n return wellio.las2json(afile)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2153,"value":"function turnFilesIntoTextIntoWellioJSON(files_array){\n //// For each well log file, turn into text, then convert text into wellio style JSON using wellio.js\n let logs_in_json = []\n for (let i = 0; i < files_array.length; i++) {\n logs_in_json.push(fileToJSON(files_array[i]))\n }\n return logs_in_json\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2160,"value":"function multipleLogPlot(divIDstring,templates){\n const noSVG = d3.select(\"#\"+divIDstring).selectAll(\"svg\").remove()\n //let logs_in_json = turnFilesIntoTextIntoWellioJSON([log])\n let new_templates = []\n for (let i = 0; i < templates.length; i++) {\n //let three_things2 = fromJSONofWEllGetThingsForPlotting(logs_in_json[i])\n // let new_data =three_things2[\"well_log_curves_reformatted_for_d3\"]\n // template[0][\"data\"] = new_data\n templates[i][\"divID\"] = divIDstring\n new_templates.push(templates[i])\n CurveBox2(templates[i])\n }\n return templates\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2188,"value":"plot2332_b = [{\"multipleLines\":\"yes\",\"curveNames\":[\"PHID\",\"PHIN\"],\"curveColors\":[\"purple\",\"orange\"], \"fill\":[\n {\"curveName\":\"PHID\",\"fill\":\"yes\",\"fillDirection\":\"between\",\"cutoffs\":[0],\"fillColors\":[\"lightblue\"],\"curve2\":\"PHIN\"},\n {\"curveName\":\"PHID\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\"data\":well_log_converted_to_d3_friendly,\"width\":200,\"height\":400,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2185,"value":"well_curve_config_template2 = [\n {\"multipleLines\":\"yes\",\"curveNames\":[\"GR\"],\n \"curveColors\":[\"black\",\"pink\"],\n \"fill\":[\n {\"curveName\":\"GR\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fillColors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\n {\"curveName\":\"RESD\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}\n ],\n \"curveUnits\":[\"units2\",\"other units\"],\n \"data\":well_log_converted_to_d3_friendly,\n \"width\":200,\n \"height\":400,\n \"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\n \"depth_curve_name\":\"DEPTH\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"result = multipleLogPlot(div_idC,[well_curve_config_template_new_well_01_01_095_19W4,well_curve_config_template2,plot2332_b])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2158,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2202,"value":"html `

This Opens the Possibility of Cross-Sections As Shown Below

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"html `We've associated las files with this notebooka and effectively loaded them via a keyboard shortcut. The keyboard shortcut is: click inside a cell then, hit Shift-Command-U ⇧⌘U to choose a local file or files.

You can swap them out by clicking on the little paper clip icon in the upper right corner of the cell.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2207,"value":"logs2 = [await FileAttachment(\"00-11-18-079-03W5-0.LAS\").text(),await FileAttachment(\"00-06-02-076-15W4-0.LAS\").text(), await FileAttachment(\"00-11-22-068-14W4-0.LAS\").text(),await FileAttachment(\"00-16-13-071-01W4-0.LAS\").text(), await FileAttachment(\"00-10-35-081-15W4-0.LAS\").text(),await FileAttachment(\"00-06-26-075-21W4-0.LAS\").text(),await FileAttachment(\"00-16-29-073-05W5-0.LAS\").text()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2275,"value":"html `Same template as before but we've added a \"divID key this time that will control which div the SVG we create gets appended to.\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2216,"value":"template2 = [{\"multipleLines\":\"yes\",\"curveNames\":[\"GR\"],\"curveColors\":[\"pink\"], \"fill\":[{\"curveName\":\"GR\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fillColors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\n {\"curveName\":\"RESD\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}],\"data\":[],\n \"curveUnits\":[\"units2\",\"other units\"],\n \"width\":60,\"height\":500,\"margin\":({top: 20, right: 3, bottom: 30, left: 30}),\"depth_curve_name\":\"DEPTH\",\"divID\":\"well_holder2\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2278,"value":"html `This function takes in all the wells we want to plot, the id of the div we want to append them to, and a template for the well log curve we want to plot from each well.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2228,"value":"function putArrayOfLogsIntoSection(logs,divIDstring,template){\n const noSVG = d3.select(\"#\"+divIDstring).selectAll(\"svg\").remove()\n let logs_in_json = turnFilesIntoTextIntoWellioJSON(logs)\n let new_templates = []\n for (let i = 0; i < logs_in_json.length; i++) {\n let three_things2 = fromJSONofWEllGetThingsForPlotting(logs_in_json[i])\n let new_data =three_things2[\"well_log_curves_reformatted_for_d3\"]\n template[0][\"data\"] = new_data\n template[0][\"divID\"] = divIDstring\n new_templates.push(template)\n CurveBox2(template)\n }\n return template\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2281,"value":"html `This runs the function above:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2220,"value":"result2 = putArrayOfLogsIntoSection(logs2,div_id2,template2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2218,"value":"div_id2 = \"well_holder2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2221,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2291,"value":"html `

A better version of a cross-section with more wells can be found here

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2303,"value":"md `### What if the data came in from elsewhere and was just the data to be plotted?`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2305,"value":"data2 = [{\n\"api_no_14\": \"7376\",\n\"curve_type\": \"RHOB\",\n\"curve_values\": [2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526],\n\"linecolor\": \"rgb(205,0,0,1)\",\n\"logscale\": false,\n\"max_depth\": \"1607.3\",\n\"min_depth\": \"1598.3\",\n\"null_value\": -999.25,\n\"step\": 0.1,\n\"units\": \"g/cc\",\n\"x_max\": \"3\",\n\"x_min\": \"2\",\n}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2328,"value":"function createDepthArray(min,max,step){\n // Returns an array of depth values from min to max, including both, with each being different by step value\n let depth = []\n min = parseFloat(min)\n max = parseFloat(max)\n step = parseFloat(step)\n let number_of_points = ((max-min)/step) +1\n let temp_depth = min\n for (let i = 0; i < number_of_points; i++) {\n temp_depth = (min+(i*step)).toFixed(3)\n depth.push(temp_depth)\n }\n return depth\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2332,"value":"depthArray = createDepthArray(data2[0][\"min_depth\"],data2[0][\"max_depth\"],data2[0][\"step\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2353,"value":"depthArray.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":2355,"value":"data2[0].curve_values.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":2369,"value":"function takeInArraysAndGetObjectOfCurveDataForPlotting(arraysOfCurvesAndNames,CurveName){\n // [{\"depth\":[],\"curveData\":[]}]\n let curveObj = []\n // make sure the curve data arrays are the same lenght, if not add null values\n \n // put them into object\n let lengthOfCurve0 = arraysOfCurvesAndNames[0][\"depth\"].length\n for (let i = 0; i < lengthOfCurve0; i++) {\n let newObj = {\"depth\":0,\"RHOB\":0}\n newObj[\"depth\"] = arraysOfCurvesAndNames[0][\"depth\"][i]\n newObj[\"RHOB\"] = arraysOfCurvesAndNames[0][CurveName][i]\n curveObj.push(newObj)\n }\n return curveObj\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2374,"value":"reformattedForWelliovizCurveData = takeInArraysAndGetObjectOfCurveDataForPlotting([{\"depth\":depthArray,\"RHOB\":data2[0].curve_values}],\"RHOB\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2391,"value":"template3 = [{\"multipleLines\":\"yes\",\"curveNames\":[\"RHOB\"],\"curveColors\":[\"pink\"], \"fill\":[{\"curveName\":\"RHOB\",\"fill\":\"yes\",\"fillDirection\":\"left\",\"cutoffs\":[0.21,2.23,2.24],\"fillColors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\n {\"curveName\":\"RESD\",\"fill\":\"no\",\"fillDirection\":\"left\",\"cutoffs\":[],\"fillColors\":[],\"curve2\":\"\"}],\n \"curveUnits\":[\"units2\",\"other units\"],\n \"data\":[],\"width\":260,\"height\":500,\"margin\":({top: 40, right: 10, bottom: 30, left: 60}),\"depth_curve_name\":\"depth\",\"divID\":\"well_holder3\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2386,"value":"template3[0][\"data\"] = reformattedForWelliovizCurveData","pinned":true,"hidden":false,"mode":"ojs"},{"id":2389,"value":"template3","pinned":true,"hidden":false,"mode":"ojs"},{"id":2408,"value":"plot_RHOB_Test = CurveBox2(template3) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2449,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}