31:T592,prebuilt_minimal_styles_by_curvename = [{ //// Add your own curvenames and map them to a style, then define the style in second part of JSON. "mapping_curvename_to_stylename":{ "GR":"GammaRay", "GR1":"GammaRay", "GAM(NAT)":"GammaRay", "Gamma-ray":"GammaRay", "Caliper":"Caliper", "Cal":"Caliper", "CALI":"Caliper", "ILD":"Resititivity_1", "ild":"Resititivity_1", "RESD":"Resititivity_1", "RES":"Resititivity_1", "Res":"Resititivity_1", "RHOB":"Caliper", "BS":"BS" }, "styles":{ "GammaRay":{ "line_color":"green", "fill":"yes", "fill_direction":"right", "cutoffs":[0,ShaleSiltCutOff,SiltSandCutOff], "fill_colors":["yellow","orange","gray"] }, "Resititivity_1":{ "line_color":"red", "fill":"yes", "fill_direction":"left", "cutoffs":[5,10,25], "fill_colors":["#ffe6e6","#ffb3b3","red"] }, "Caliper":{ "line_color":"purple", "fill":"yes", "fill_direction":caliper_fill_direction, "cutoffs":[0], "fill_colors":["#dbdbdb"] }, "BS":{ "line_color":"purple", "fill":"yes", "fill_direction":caliper_fill_direction, "cutoffs":[9], "fill_colors":["purple"] }, "all_others":{ "line_color":"black", "fill":"yes", "fill_direction":"left", "cutoffs":[0], "fill_colors":["gray"] } } }]32:T6a2,function forMultipleCurvesMinimumDataIntoTemplateFunc(curves_to_skip,prebuilt_minimal_styles_by_curvename){ var array_of_jsons_for_what_to_plot = [] var array_curvenames = Object.keys(well_log_curves_reformatted_for_d3_2[0]) var UWI_index = array_curvenames.indexOf("UWI") array_curvenames.splice(UWI_index, 1) for (var i = 0; i < array_curvenames.length; i++) { if(curves_to_skip[0]["curves_to_skip_if_present"].includes(array_curvenames[i])){} else{ if(curves_to_skip[0]["only_curves_to_include_if_present"].includes(array_curvenames[i]) || curves_to_skip[0]["only_curves_to_include_if_present"].length == 0 ){ ///// Get Styles if they exist, if not, use "all_others" var style = prebuilt_minimal_styles_by_curvename[0]["styles"]["all_others"] if(prebuilt_minimal_styles_by_curvename[0]["mapping_curvename_to_stylename"][array_curvenames[i]]){ var stylename = prebuilt_minimal_styles_by_curvename[0]["mapping_curvename_to_stylename"][array_curvenames[i]] style = prebuilt_minimal_styles_by_curvename[0]["styles"][stylename] } var json_template_for_plotting = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2], [array_curvenames[i]],[style["line_color"]],[""],[ {"curve_name":array_curvenames[i],"fill":style["fill"],"fill_direction":style["fill_direction"],"cutoffs": style["cutoffs"],"fill_colors": style["fill_colors"],"curve2":""}],"well_holder_1A",200,400,depth_curve_name) /// array_of_jsons_for_what_to_plot.push(json_template_for_plotting) } } } return array_of_jsons_for_what_to_plot }33:[] 2f:{"title":"Hello Wellioviz - Swap Out Log & No Other Changes Required - now also for zipped LAS files","cells":[{"id":1,"value":"md`# Hello Wellioviz - Swap Out Log & No Other Changes Required - now also for zipped LAS files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"md `## This notebook is meant as a very basic example of wellioviz, a JavaScript library for visualizing well logs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4982,"value":"md `You can see different ways to use it here and the main repository here`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5550,"value":"html `

This notebook builds on https://observablehq.com/@justingosses/hello-wellioviz . It was created during the Transform2020 hackathon and seeks to create a simple limited features notebook that delivered one some requested behaviors:

vertical zooming
Not having to know the curve names
Ability to establish a list of curvenames that do not display or only display certain curvenames and have that stay as different wells are loaded in.
loading wells from local computer
scroll working across curveboxes
More GUIs and less code changes to quickly shift style.
Handle different null values.

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

you can horizontal and vertically scroll

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4038,"value":"html `\n\n

\n \n

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

WidgetsJSONs for Changing Style On Fly

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

By modifying the curve name strins inside the arrays of this JSON, you can change what curve names are included if present, what curve names are skipped if present

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5670,"value":"curves_to_skip = [{\n ///// Curves included as an array of strings are onlythat will be plotted. If empty, will plot everything.\n \"only_curves_to_include_if_present\":[], // @lperozzi \"BS\",\"GR\",\"RHOB\",\"CALI\",\"RS\"\n ///// If the array above is empty, all curves will be plotted except for the ones below.[\"Depth\",\"Dep\",\"UWI\"]\n \"curves_to_skip_if_present\":[\"DEPT\",\"DEP\",\"DEPTH\",\"CAL_Y\",\"CAL_Y\",\"CAL_X\"],\n}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5748,"value":"html `

This JSON includes some basic style configuration that is passed to helper functions. The configuration valuables are eventually passed to the plotting JSON that contains all data & style configuration, which is abstracted away in this notebook.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5713,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5137,"value":"md `--------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2658,"value":"html `

Loading Data

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

Single Well, multiple curves

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6287,"value":"viewof which_way = radio({\n title: 'This controls which load method is used to load a well --- AND MUST BE CHANGED IF YOU WANT TO CHANGE HOW WELL IS LOADED',\n description: '',\n options: [\n { label: 'gist', value: 'gist'},\n { label: 'local', value: 'local'},\n { label: 'zip at ulr', value: 'zip'}\n ],\n value: 'gist'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6286,"value":"selected_well_as_string = changeWhichLoadMethod(which_way)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6233,"value":"function changeWhichLoadMethod(which_way){\n if(which_way==\"local\"){return string_of_well_uploaded_from_local_computer}\n else if(which_way==\"zip\"){return string_of_well_from_zip_url}\n else if (which_way==\"gist\"){return well_as_string_from_gist}\n else {return \"NOTHING IS SELECTED !!!! in changeWhichLoadMethod() function\"}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5763,"value":"md `----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5441,"value":"html `

[LOADING OPTION 1. ] Pull A LAS File from A Github Gist

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6086,"value":"html `This method is what is used on page load as default`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"html `

This option loads a LAS file that has been saved in github.com gists and converts it to a string. Please note that URLS other than a gist, or other CORS enabled server, may not work)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6452,"value":"viewof fileUrltoWellLog = text({placeholder: \"https://gist.githubusercontent.com/JustinGOSSES/2685e588d5c2f2a0ba1591ec7b9c9421/raw/415fe8a2f27dc7621f06f60ffd40a62c0d55a0f0/00-01-01-095-19W4-0.las\", value:\"https://gist.githubusercontent.com/JustinGOSSES/2685e588d5c2f2a0ba1591ec7b9c9421/raw/415fe8a2f27dc7621f06f60ffd40a62c0d55a0f0/00-01-01-095-19W4-0.las\", description: \"Paste in URL to gist or raw github link of LAS file & hit 'go'\", submit: \"apply\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"fetched = await fetch(fileUrltoWellLog)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5252,"value":"well_as_string_from_gist = await fetched.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5187,"value":"html `

[ OPTION 2. ] Upload LAS file From Local Computer (these stay in browser)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5792,"value":"viewof string_of_well_uploaded_from_local_computer_file = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6433,"value":"html `

AFTER CLICKING BUTTON ABOVE, YOU ALSO NEED TO SWITCH OUT WHICH LINE IS COMMENTED OUT TO MAKE LOCAL LOAD WORK!!! AND DON'T PUBLISH WITH THIS ONE SELECTION OR NOTHING WILL SHOW!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6363,"value":"string_of_well_uploaded_from_local_computer = \"YOU NEED TO SWITCH OUT WHICH LINE IS COMMENTED OUT, BELOW UNDER LOAD OPTION 2, BEFORE THIS WILL WORK\"\n// string_of_well_uploaded_from_local_computer = await string_of_well_uploaded_from_local_computer_file.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6266,"value":"html `

[ OPTION 3. ] Upload Zipped LAS File From An URL

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

You can get a list of links to zipped LAS files from the Kansas Geological Survey. Normally downloading a well and loading it into a software before you can see what's there would take a while. We wellioviz, you just provide the URL.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6468,"value":"viewof url_for_zipped_las_file = text({placeholder: \"http://www.kgs.ku.edu/WellLogs/kcc_logs_2012/1044165723.zip\", value:\"http://www.kgs.ku.edu/WellLogs/kcc_logs_2012/1044165723.zip\", description: \"Paste in URL to Zipped LAS file & hit 'apply'\", submit: \"apply\",size:\"width:1500\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6210,"value":"string_of_well_from_zip_url = d3\n .buffer('https://cors-anywhere.herokuapp.com/' + url_for_zipped_las_file)\n .then(arrayBuffer=> { \n let zip = JSZip();\n return zip.loadAsync(arrayBuffer);\n })\n .then(zip=>{\n return zip.file(`1044165723.las`).async('string');\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5471,"value":"function seeIfLocalFineLoaded(isLocalFineLoaded){\n try{\n if(isLocalFineLoaded){\n return Files.text(string_of_well_uploaded_from_local_computer)\n }\n else{\n return \"nothing is loaded yet\"\n }\n }\n catch(err){\n console.log(err)\n return \"nothing is loaded yet\"\n }\n return \"nothing is loaded yet\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md `____________`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5446,"value":"html `

This next part uses either a string representation of the LAS file that was brought in via the code above...and converts it into JSON

`","pinned":false,"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_in_json_format\" here. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5497,"value":"function checkIfString(which_log_to_use){\n if(which_log_to_use.length > 60){return wellio.las2json(which_log_to_use)}\n else{return \"seems like you selected to use a log that was from your local computer but haven't uploaded one yet?\"}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5500,"value":"well_in_json_format_0 = checkIfString(selected_well_as_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5799,"value":"function handleNullsForD3(well_in_json_format_01,null_str){\n var well_in_json_format_new = JSON.parse(JSON.stringify( well_in_json_format_01 ));\n var curve_names = Object.keys(well_in_json_format_new[\"CURVES\"])\n for (var i = 0; i < curve_names.length; i++) {\n var curve_data = well_in_json_format_new[\"CURVES\"][curve_names[i]]\n function replaceNulls(data_str){\n return data_str.replace(null_str,0)\n }\n well_in_json_format_new[\"CURVES\"][curve_names[i]] = curve_data.map(replaceNulls)\n }\n return well_in_json_format_new\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5803,"value":"well_in_json_format = handleNullsForD3(well_in_json_format_0,value_for_nulls)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2674,"value":"md `-------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2656,"value":"html `

Step A-2: Data Formatting

`","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 or d3.js data visualization libraries.`","pinned":false,"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":5277,"value":"function findDepthName(well_log_in_json){\n var curve_names_array = Object.keys(well_log_in_json.CURVES)\n var dep = curve_names_array.find(a =>a.includes(\"dep\"));\n var Dep = curve_names_array.find(a =>a.includes(\"Dep\"));\n var DEP = curve_names_array.find(a =>a.includes(\"DEP\"));\n if(dep){return dep}\n if(Dep){return Dep}\n if(DEP){return DEP}\n else{return \"couldn't find depth curve name\"}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5284,"value":"depth_curve_name = findDepthName(well_in_json_format)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1688,"value":"three_things_2 = wellioviz.fromJSONofWEllGetThingsForPlotting(well_in_json_format,depth_curve_name)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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":true,"hidden":false,"mode":"ojs"},{"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"},{"id":333,"value":"html `

The curveBox funtion is the central plotting function of wellioviz

It accepts a JSON template of instructions & data.

The advantage of it accepting a template is you can:

Establish sensible defaults in the template and
Only change what is needed when using the template
Have built in descriptions of what each argument does via the key names

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3636,"value":"example_template_0 = wellioviz.curveBoxTemplateExamples(\"example\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5596,"value":"height_multiplier_components","pinned":true,"hidden":false,"mode":"ojs"},{"id":5561,"value":"function getExampleTemplateWithEdits(height_multiplier){\n var example_template1 = wellioviz.curveBoxTemplateExamples(\"example\")\n var multiplier = parseFloat(height_multiplier)\n var header_sep_svg_or_not = \"yes\"\n example_template1[0][\"curve_box\"][\"height_multiplier_components\"] = multiplier;\n example_template1[0][\"curve_box\"][\"header_sep_svg_or_not\"] = header_sep_svg_or_not\n example_template1[0][\"curve_box\"][\"title\"][\"text\"] = uwi2;\n // example_template1[0][\"curve_box\"][\"show_title\"] = \"yes\"\n // example_template1[0][\"curve_box\"][\"svg_header_height\"] = svg_header_height;\n example_template1[0][\"components\"][0][\"rectangles\"][0][\"depth_top\"] = -9999999;\n example_template1[0][\"components\"][0][\"rectangles\"][0][\"height\"] = 0;\n return example_template1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5571,"value":"example_template = getExampleTemplateWithEdits(height_multiplier_components)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5547,"value":"example_template ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4154,"value":"html `We'll make three curveboxes from this well, so we'll need three templates filled in`","pinned":false,"hidden":false,"mode":"ojs"},{"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. We could also write into the template directly, but for this demo we'll use this helper function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5299,"value":"well_log_curves_reformatted_for_d3_2","pinned":false,"hidden":false,"mode":"ojs"},{"id":5270,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5310,"value":"array_of_plotting_jsons = forMultipleCurvesMinimumDataIntoTemplateFunc(curves_to_skip,prebuilt_minimal_styles_by_curvename)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2662,"value":"html `

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3804,"value":"html `Instead of using curveBox() function directly, we'll use another helper function. This one is called multipleLogPlot(). We pass it as arguments a string for the DIV we want to append the curve boxes to and an array of templates.`","pinned":false,"hidden":false,"mode":"ojs"},{"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])\nresult_1 = wellioviz.multipleLogPlot(\"well_holder\",array_of_plotting_jsons)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4839,"value":"html `you can move your cursor over the logs and scroll them up and down.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"md `### Importing Libraries and Tools`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2544,"value":"wellio = require(\"wellio\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4857,"value":"html `wellioviz is built upon d3.js and visualizes the well logs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5141,"value":"html `

Click on the arrow before \"Object\" in the line below to display all the Wellioviz functions.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4894,"value":"wellioviz = require('https://bundle.run/wellioviz')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6214,"value":"d3=require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6215,"value":"//Works, as in the tutorial\n//Chart = require('chart.js/dist/Chart.min.js') \n\n//Doesnt work, needs to be an AMD / UMD module?\n//yauzl = require('yauzl')\n//yauzl = require('yauzl@2.10.0/index.js')\n//zip = require('jszip')\n//ZipLoader = require('ZipLoader')\n\nJSZip = require('https://bundle.run/jszip@3.1.5')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1949,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5834,"value":"import {text} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4377,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5174,"value":"import {file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}