2a:null 2b:["$","title",null,{"children":"First wellioviz notebook with all functions from npm instead of local functions | Justin Gosses | Observable"}] 30:T1dfd,input_sparse_style = [{ "single_curve_box_or_cross_section":"single", "cross_section_title":"", "width": 1040, /// not skippable, check if number // default if blank or missing =250 or autocalculate? "height": 500, /// not skippable, check if number // default if blank or missing=500 //////////////////////////// "curve_boxes":[{ "curve_box":{ "show_well_name":"yes", // not built yet /// Should be skip-able /// default=No "show_depth_type":"no", // not built yet /// Should be skip-able /// default=No "show_curve_units":"yes", // not built yet /// Should be skip-able /// default=No "curve_box_depth_min":-999, // not built yet /// Should be skip-able /// default=skip func if string or -999 "curve_box_depth_max":-999, // not built yet /// Should be skip-able /// default=skip func if string or -999 "take_out_null_or_visualize":"no", // not built yet /// Should be skip-able /// default=No "show_title":"no", // not built into plotting template yet /// Should be skip-able /// default=No "width": 260, /// not skippable, check if number // default if blank or missing =250 "height": 500, /// not skippable, check if number // default if blank or missing=500 "height_multiplier_components":3, // default if missing is 0.95 "margin": {"top": 50, "right": 10, "bottom": 30, "left": 60}, /// not skippable, check if number // defaults used if blank, string, or missing. If string or blank, add message to error message to console stating what default was used. "title": {"text": "", "title_font_size": "10px"}, /// Should be skip-able // default=skip "div_id": "well_holder4", /// Should be skip-able // default=random str? What happens if div doesn't exist? "order_of_component":["curves","rectangles","lines"], // not built yet, default is curve, then line, then rectangle "lines_connected_across_curve_boxes":"no", // not built yet, default is skip function "header_sep_svg_or_not":"yes", "svg_header_height":"4em", "gridlines":"yes", "gridlines_color":'#D3D3D3', "gridlines_stroke_width":0.20, "grouped_or_independent_x_scales":"independent", //// variables for how to draw mouseover of hover box "mouseover_yes_or_no":"yes", //// "yes" or "no" "mouseover_depth_or_depth_and_curve":"depth_and_curve", /// options= "depth_and_curve", "depth", or "curve" "mouseover_curvename":"default", //// default is first curve "mouseover_color_or_default_which_is_curve_color":"default" /// default is default, which then uses curve color or black }, "components":[{ "curves":[ { "data_type":"curve", // not built yet /// requires one of possible strings: curve, line, rectangle if not one of acceptable string it just skips it. "data_id":"placeholder_data_id", // not built yet /// can be anything, just used for tracking & is optional "well_name": "", // not built yet /// Ideally string. Will skip function if "" "curve_type": "RHOB", // should be string. name of curve "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], /// Should be array. If not array, return error message? "step": 0.1, /// Should be number. If not array, return error message? "units": "g/cc", /// should be string but try to plot whatever as string. if greater than X length include error message in console about excessive length will look bad but still plot. "scale_linear_log_or_yours": "linear", ////// Plotting things but need to be next to curve data or will be too confusing. "line_color": "rgb(205,0,0,1)", /// Test for string, if string use. If not string "black" "curve_stroke_dasharray":"5,5", "stroke_linecap":"butt", "stroke_width":0.5, "fill":{"curve_name":"RHOB","fill":"yes","fill_direction":"left","cutoffs":[0.21,2.23,2.24],"fill_colors":["gray","beige","white"],"curve2":""}, "data_ID":"", "max_depth": "1607.3", /// should be number, if not number or doens't exit then "autocalculate" "min_depth": "1598.3", /// should be number, if not number or doens't exit then "autocalculate" "depth_type_string":"TVDSS", /// should be string, if not or doesn't exist, then skip func "depth_units_string":"md", "depth_curve_name":"DEPTH", /// should be string, ideally all depth curve names are the same "null_value": "", // not built yet, can be anything. Skip if blank or "" or "unknown". If not skip, then look for any values that match after d3 style data object is generated and either take them out or give special value based on behavior defined for curvebox in key "take_out_null_or_visualize" above. "x_max": 3, // not built yet /// should be number /// auto-calculate if not number or is "autocalculate" "x_min": 2, // not built yet /// should be number /// auto-calculate if not number or is "autocalculate" } ], "lines":[ { "data_type":"line", /// must be string, will be ignored if not "line", "curve", or "rectangle". "label":"top 1", /// Ideally a string. "depth":1601.4, /// Should be Float or integer, attempt to convert to number if string. Otherwise skip this part entirely! "color":"blue", /// should be string, if not or doesn't exist use "black" "stroke_width":"3px", /// should be string, if not or doesn't exist use "1px" "stroke_linecap":"butt", "stroke_style":"solid", /// should be string, if not or doesn't exist use "solid" "transparency":1.0 /// should be number between 0 and 1, if not or doesn't exist use 1. }, { "data_type":"line", /// must be string, will be ignored if not "line", "curve", or "rectangle". "label":"top 2", /// Ideally a string. "depth":1602.4, /// Should be Float or integer, attempt to convert to number if string. Otherwise skip this part entirely! "color":"orange", /// should be string, if not or doesn't exist use "black" "stroke_width":"5px", /// should be string, if not or doesn't exist use "1px" "stroke_linecap":"butt", "stroke_style":"solid", /// should be string, if not or doesn't exist use "solid" "transparency":0.5 /// should be number between 0 and 1, if not or doesn't exist use 1. } ], "rectangles":[ { "data_type":"rectangle", "depth_top":1601, "x_starting_upper_left_corner":0, "width":100, "height":100, "stroke_width":"2px", "stroke_linecap":"butt", "fill":"red", "opacity":0.5, "label":"Core Example", // not built into plotting template yet "label_orientation":"horizontal", // not built into plotting template yet "lable_position":"right" // not built into plotting template yet } ] }] }] }]31:[{"id":"0bd879e7e9b8d5a789d17784bdbc82f80844c94862db2d2575f9a257cda93a272fdf94d87b6674588f787fb0e40f27eec33cafcd91f8fd9d90ec1896f198a0f9","href":"https://static.observableusercontent.com/files/0bd879e7e9b8d5a789d17784bdbc82f80844c94862db2d2575f9a257cda93a272fdf94d87b6674588f787fb0e40f27eec33cafcd91f8fd9d90ec1896f198a0f9","name":"00-11-18-079-03W5-0.LAS","type":"application/octet-stream","lastModified":1581983451679.425,"size":22633},{"id":"35ce00ef7c874feb6f6bf3a89388f1d21cfcae70feaf249625050cfc3af9793a4a3d95d368a6586128a1eca7c0fcaffbecd1faf1852e644eda83bfece773db43","href":"https://static.observableusercontent.com/files/35ce00ef7c874feb6f6bf3a89388f1d21cfcae70feaf249625050cfc3af9793a4a3d95d368a6586128a1eca7c0fcaffbecd1faf1852e644eda83bfece773db43","name":"00-06-02-076-15W4-0.LAS","type":"application/octet-stream","lastModified":1581983451679.425,"size":40856},{"id":"009e3aaccfea161f9650350e36061f2ae797ac87caadfc38389df0e686c5346b39409c1ccf2c8594cce3df3cff49822da5300ccb0753e7a52ea3398252c3b88d","href":"https://static.observableusercontent.com/files/009e3aaccfea161f9650350e36061f2ae797ac87caadfc38389df0e686c5346b39409c1ccf2c8594cce3df3cff49822da5300ccb0753e7a52ea3398252c3b88d","name":"00-11-22-068-14W4-0.LAS","type":"application/octet-stream","lastModified":1581983451679.425,"size":39539},{"id":"09ba3346f41283f73827379dc5b686ca3b67dc1a7729122b124e863c85954c62f163da6bfdbfa9ac83aff09c212e5bd673308821d58174ef9d5f8360c3e80928","href":"https://static.observableusercontent.com/files/09ba3346f41283f73827379dc5b686ca3b67dc1a7729122b124e863c85954c62f163da6bfdbfa9ac83aff09c212e5bd673308821d58174ef9d5f8360c3e80928","name":"00-16-13-071-01W4-0.LAS","type":"application/octet-stream","lastModified":1581983451679.425,"size":51007},{"id":"bb000e6bb000d523dfc1d642789f7a5c21176aaceb99456f73b1ca41c3c10ee29056962b02f2709ac819344d6f0dde62cc761c6c425dcdfc87c90f6135d57667","href":"https://static.observableusercontent.com/files/bb000e6bb000d523dfc1d642789f7a5c21176aaceb99456f73b1ca41c3c10ee29056962b02f2709ac819344d6f0dde62cc761c6c425dcdfc87c90f6135d57667","name":"00-10-35-081-15W4-0.LAS","type":"application/octet-stream","lastModified":1581983451679.425,"size":44430},{"id":"c2b28c866e74f22161b83378dde80ea1be654b1544acb91c4f40b7a70ace2b9fff6fc3fc4a1825d02d7a96f35234838b59fe4951ff1f85338767203fc3164273","href":"https://static.observableusercontent.com/files/c2b28c866e74f22161b83378dde80ea1be654b1544acb91c4f40b7a70ace2b9fff6fc3fc4a1825d02d7a96f35234838b59fe4951ff1f85338767203fc3164273","name":"00-06-26-075-21W4-0.LAS","type":"application/octet-stream","lastModified":1581983451679.425,"size":48446}] 2e:{"id":"d74c871bbae259ae","slug":"first-wellio-example-with-all-wellioviz-functions-from-npm","title":"First wellioviz notebook with all functions from npm instead of local functions","thumbnail":"fb594a91f12f5d88df3f8e2eb35915eb7e2434dde36880dea9fbd28168aa0c80","access_level":"public","create_time":"$D2020-02-17T23:50:51.679Z","update_time":"$D2024-06-24T03:33:29.201Z","view_time":null,"first_public_time":"$D2020-02-26T04:26:42.081Z","has_unpublished_edits":null,"fork":{"id":"38da9fb3d1fdd6ea","slug":"well-log-in-d3-js-v5-notebook-2","title":"Well Log in D3.js v5 notebook 2 with all functions in notebook","owner":{"id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":"starter_2024"},"version":4963,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null}],"members":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"60edc6e9d1104035","slug":"geology","title":"Geology","owner":{"id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses"}},"type":"notebook","body":{"title":"First wellioviz notebook with all functions from npm instead of local functions","cells":[{"id":1,"value":"md`# First wellioviz notebook with all functions from npm instead of local functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4881,"value":"html `\n\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"md `NOTE: This notebook takes a bit to load......`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4960,"value":"html `

For more informatio on wellioviz.js

The Wellioviz.js code repository on GitHub is here
The Wellioviz.js docs are here
You can see different ways to use wellioviz.js in this notebook with more exposed code.
If you want to work with wells that are in your local computer, this is the main demo and a front-end website, not an Observable notebook.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2736,"value":"html `

Each example is broken down into the same 4 steps:

Loading Data
Data transformation
Putting data into the template for ingestion by the plotting function
plotting

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2776,"value":"html `

There are 3 examples in this notebook: A,B, and C

Each of these brings in data and plots it slightly differently`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2754,"value":"html `

To state it more explicitly:

Example A: brings data in via a single LAS file saved on github gist and converts it to JSON using wellio.js. All the well log information is converted and display choices are default wellioviz values for the most part. 3 different well log curves are displayed from a single well.
Example B: brings data in via multiple LAS files attached to this notebook and converts them to JSON using wellio.js. Similar to A but multiple wells & a single well log curve type.
Example C: Uses a sparse-style JSON of just the information and data needed to make the plot. It is created in this notebook, but could be loaded in from elsewhere.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4329,"value":"html `These ideas have been given more thoughts that are now included in the ARCHITECTURE markdown file of the wellioviz repo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2527,"value":"md `--------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md `____________`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"md `### IMPORTS AND REUSED VARIABLES`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2579,"value":"html `d3.js is a JavaScript plotting library that we'll use to make our well log diagrams. We're importing it here from NPM, which Observable handles for us.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2581,"value":"html `wellio.js is JavaScript program that converts LAS 2.0 files into JSON. We'll use this to convert some of the LAS files we'll use into JSON formatted data. We're importing it here from NPM, which Observable handles for us.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2544,"value":"wellio = require(\"wellio\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4857,"value":"html `wellioviz is built upon d3.js and visualizes the well logs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4894,"value":"wellioviz = require('https://bundle.run/wellioviz@0.0.32')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2601,"value":"html `This imports some code for making an interactive slider & radio buttons from another notebook on Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1949,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4377,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md `-------------------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2693,"value":"html `

EXAMPLE A: Single Well, multiple curves, converted via wellio.js

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2658,"value":"html `

Step A-1: Loading Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"html `These curves are common in the sample LAS files we'll use. Each 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),
and PHIN & PHID (two measurements of rock porosity)

There are other curves available in this well, but we'll ignore them for now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"md `-----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"html `

This 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"fetched = await fetch(fileUrltoWellLog)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"well_as_string = await fetched.text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2687,"value":"html `If you click on the arrow in front of 'object' on the line below, you'll see all the information in the LAS file rewrote into JSON`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"well_json_01_01_095_19W4 = wellio.las2json(well_as_string)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4956,"value":"html `

We can also load in well logs already converted to JSON using d3.js like so:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4029,"value":"well_log_json = \nd3.json(\"https://cdn.rawgit.com/JustinGOSSES/c643e25774aea39556799cc517654d46/raw/db70839e481551dcbadb509fb75c68e3c099de71/00_01-01-073-05W5_0.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2674,"value":"md `-------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2656,"value":"html `

Step A-2: Data Formatting

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md `## Now lets convert one well log curve into a shape that d3.js likes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 or d3.js data visualization libraries.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4754,"value":"depth_curve_name = \"DEPTH\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"three_things_2 = wellioviz.fromJSONofWEllGetThingsForPlotting(well_log_json,depth_curve_name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4693,"value":"wellioviz.fromJSONofWEllGetThingsForPlotting","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2639,"value":"html `These 3 things tell us the well name, what curves are available and returns the depth and curve data in a format that D3.js likes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1676,"value":"curve_names2 = three_things_2[\"curve_names\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"uwi2 = three_things_2[\"uwi\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"well_log_curves_reformatted_for_d3_2 = three_things_2[\"well_log_curves_reformatted_for_d3\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2652,"value":"html `

Step A-3: Putting the data and how we want to plot it into a template

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"html `

The curveBox funtion to be the central plotting function

It acceptss a JSON template. The advantage of it accepting a template is you can (1) establish sensible defaults in the template and (2) only change what is needed in the template (3) have built in descriptions of what each argument does via the key names`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3796,"value":"html `We'll use the curveBoxTemplateExamples function to get a starting template and then change only the basics as we need to...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"html `And now plot a curve using the input template & functions reused from above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3636,"value":"example_template = wellioviz.curveBoxTemplateExamples(\"example\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3799,"value":"html `The minimumDataIntoTemplateFunc takes in the example template and a few things to change. We'll reuse this for three different curveboxes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4154,"value":"html `We'll make three curveboxes from this well, so we'll need three templates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4899,"value":"gr_plot_template_noFill = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],[\"GR\"],[\"black\"],[\"\"],[\n {\"curve_name\":\"GR\",\"fill\":\"no\",\"fill_direction\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fill_colors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"}],\"well_holder_1A\",200,400,\"DEPTH\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3659,"value":"resd_plot_template_1 = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],['RESD'],[\"RED\"],[\"\"],[[\n {\"curve_name\":\"RESD\",\"fill\":\"yes\",\"fill_direction\":\"left\",\"cutoffs\":[0,4,25],\"fill_colors\":[\"#ffe6e6\",\"#ffb3b3\",\"red\"],\"curve2\":\"\"}]],\"well_holder_1B\",200,400,\"DEPTH\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3663,"value":"poro_plot_template_1 = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],[\"PHID\",\"PHIN\"],[\"purple\",\"pink\"],[\"\"],[{\n \"curve_name\":\"PHID\",\n \"fill\":\"yes\",\n \"fill_direction\":\"between\",\n \"cutoffs\":[0],\n \"fill_colors\":[\"lightblue\"],\n \"curve2\":\"PHIN\"\n },\n {\n \"curve_name\":\"PHID\",\n \"fill\":\"no\",\n \"fill_direction\":\"left\",\n \"cutoffs\":[],\n \"fill_colors\":[],\n \"curve2\":\"\"\n }\n ],\"well_holder_1C\",200,400,\"DEPTH\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3646,"value":"gr_plot_template_1 = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],[\"GR\"],[\"black\"],[\"\"],[\n {\"curve_name\":\"GR\",\"fill\":\"yes\",\"fill_direction\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fill_colors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"}],\"well_holder_1A\",200,400,\"DEPTH\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2662,"value":"html `

Step A-4: Making the SVG Plot and Appending it to a Div

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3815,"value":"html `curveBox is the central function. It accepts a JSON template and appends a SVG of a curveBox to a DIV.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3804,"value":"html `We'll then use the multipleLogPlot function to combine the 3 functions and call the curveBox function to plot them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3676,"value":"result_1 = wellioviz.multipleLogPlot(\"well_holder\",[gr_plot_template_noFill,gr_plot_template_1,resd_plot_template_1,poro_plot_template_1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"html `Note: some of the 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),
and PHIN & PHID (two measurements of rock porosity)
and your depth curve is named \"DEPTH\"

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4038,"value":"html `\n\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2524,"value":"viewof ShaleSiltCutOff = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 60,\n format: \",\",\n description:\n \"experimental shale/silt cutoff slider\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2522,"value":"viewof SiltSandCutOff = slider({\n min: 0,\n max: 100,\n step: 2,\n value: 88,\n format: \",\",\n description:\n \"experimental silt/sand cutoff slider\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4839,"value":"html `you can move your cursor over the logs and scroll them up and down.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2763,"value":"md `------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2697,"value":"html `

EXAMPLE B: Multiple Well, Single Curve, converted via wellio.js

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2202,"value":"html `

If we bring in multiple wells, we can do cross-sections:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2699,"value":"html `

Step B-1: Loading Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"html `This time, we'll 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2705,"value":"html `

Step B-2: Data Formatting

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4937,"value":"function fileToJSON(afile) {\n return wellio.las2json(afile)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4935,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2935,"value":"logs2b = turnFilesIntoTextIntoWellioJSON(logs2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2707,"value":"html `

Step B-3: Putting the data and how we want to plot it into a template

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4884,"value":"result1 = wellioviz.putArrayOfLogsIntoSection(logs2b,\"div_id_result1\",example_template,\"GR\",\"black\",\"\",\n {\"curve_name\":\"GR\",\"fill\":\"yes\",\"fill_direction\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fill_colors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\"DEPT\",140,400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"result2 = wellioviz.putArrayOfLogsIntoSection(logs2b,div_id2,example_template,\"GR\",\"black\",\"\",\n {\"curve_name\":\"GR\",\"fill\":\"yes\",\"fill_direction\":\"left\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fill_colors\":[\"gray\",\"orange\",\"yellow\"],\"curve2\":\"\"},\"DEPT\",140,400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2281,"value":"html `This runs the function above:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2218,"value":"div_id2 = \"well_holder2\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2710,"value":"html `

Step B-4: Making the SVG Plot and Appending it to a Div

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2221,"value":"html `\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4142,"value":"html `

NOTE: In this cross-section, all the depths are plotted, meaning the wells are effectively on different scales, and the wells aren't flattened.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2766,"value":"md `------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2769,"value":"md `------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2712,"value":"html `

EXAMPLE C: Single Well, Multiple Curves, just the data to be plotted and how in a JSON

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"html `

Step C-1: Loading Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2303,"value":"md `### What if the data came in from elsewhere and was just the data to be plotted?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3108,"value":"html `input format for sparse style JSONs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3011,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2719,"value":"html `

Step C-2: Data Formatting

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3575,"value":"html `

There are functions mostly to take arrays of depth and curve data and build them into the array objects format that d3.js wants to consume.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2721,"value":"html `

Step C-3: Putting the data in a JSON template that will get consumed by the plotting function(s)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3271,"value":"html `

The function below gives the user some helpful information for populating the JSON template that is used for curveBox plotting that occurs after data transformation steps:

\n Template with definitions instead of values.\n
\n Template with default values.\n
\n List of mandatory things to be changed in template for a curveBox to be plotted!\n

\nWhen the template is used, the first action should be to zero out certain values that relate to actual data as opposed to plotting. These will then be replaced with actual data. Exception to this is when the data fields have a value that is treated as a skip.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"wellioviz.curveBoxTemplateExamples(\"help\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3304,"value":"wellioviz.curveBoxTemplateExamples(\"example\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3306,"value":"wellioviz.curveBoxTemplateExamples(\"defintions\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3314,"value":"wellioviz.curveBoxTemplateExamples(\"mandatories\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3322,"value":"input_sparse_style[0][\"curve_boxes\"][0][\"curve_box\"][\"margin\"][\"left\"] = 90","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3324,"value":"template_example = wellioviz.curveBoxTemplateExamples(\"example\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4929,"value":"wellioviz","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3367,"value":"template_for_plotting = wellioviz.putIncomingSparseJsonIntoPlottingTemplate(input_sparse_style ,template_example)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4292,"value":"template_for_plotting[0][\"curve_box\"][\"margin\"][\"top\"] = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2724,"value":"html `

Step C-4: Making the SVG Plot and Appending it to a Div

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4401,"value":"html `Let's try some different curve x scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4410,"value":"html `We can either provide \"linear\", \"log\", or {\"yours\":\"and_our_own_scale_defined_here\"}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4391,"value":"viewof selected_scale_from_buttons = radio({\n title: 'Change the curve x scale',\n description: '',\n options: [\n { label: 'linear', value: 'linear' },\n { label: 'log', value: 'log' },\n { label: 'myscale', value: {\"yours\":\"myscale\"}},\n ],\n value: 'linear'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4414,"value":"html `To refire the pipeline, hit the makeThisCurveBox function again after selecting a scale option above in the radio buttons.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4441,"value":"function buttonHelper(selected_scale_from_buttons){\n if(selected_scale_from_buttons==\"linear\"){return \"linear\"}\n else if (selected_scale_from_buttons==\"log\"){return \"log\"}\n else{\n let myscale = d3.scaleLinear().domain([2,3]).nice().range([100, 1])\n return {\"yours\":myscale}}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4375,"value":"template_for_plotting[0][\"components\"][0][\"curves\"][0][\"scale_linear_log_or_yours\"] = buttonHelper(selected_scale_from_buttons)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3861,"value":"wellioviz.makeThisCurveBox(template_for_plotting)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3491,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3368,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3468,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3469,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3471,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2847,"value":"md `## EXPERIMENTS BELOW To SAVE WELL LOG PLOT AS SVG FILE `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4788,"value":"wellioviz.saveSvg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2834,"value":"//// uncomment this line and push the arrow button on right to download a saved SVG\n//saveSvg(plot_RHOB_Test, \"test2.svg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"