2a:null 2b:["$","title",null,{"children":"Wellio.js & Wellioviz.js for quick looks of LAS formated well logs found on the web without having to download or use proprietary software | Justin Gosses | Observable"}] 30:T9a4,viewof widget_object_A = form(html`

GammaRaySiltSandCutOff

0 100

GammaRayShaleSiltCutOff

0 100

caliper_fill_direction left right

track_height

100 1000

track_width

100 500

height_multiplier_components

1 10

Input a value for nulls. These will be convered to empty strings so D3.js handles them properly

Only curves to keep if they're present. Example: "GR","ILD"

Curves to skip if present Example: "CALI","ILD"

`)31:Tb29,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", "Gamma-ray":"GammaRay", "GAM(NAT)":"GammaRay", "GAMMA(NAT)":"GammaRay", "GAMMA":"GammaRay", "Caliper":"Caliper", "Cal":"Caliper", "CALI":"Caliper", "CALIPER":"Caliper", "ILD":"Resititivity_1", "ild":"Resititivity_1", "RESD":"Resititivity_1", "RES":"Resititivity_1", "Res":"Resititivity_1", "RES(16N)":"Resititivity_1", "RES(64N)":"Resititivity_1", "RES(FL)":"Resititivity_1", "LATERAL":"LATERAL_1", "RHOB":"Caliper", "RHOC":"Caliper", "BS":"BS", "SP":"SpontaneousPotential_1", "SP_COND":"SpontaneousPotential_1", "SPR":"SpontaneousPotential_1", "TEMP":"Temperature_1", "Temp":"Temperature_1", "TEMPERATURE":"Temperature_1", "TENSION":"Tension_1", "NPHI":"neutron_porosity_1" }, "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"] }, "LATERAL_1":{ "line_color":"BLACK", "fill":"yes", "fill_direction":"left", "cutoffs":[5,1000,2000], "fill_colors":["TAN","#e29d76","PURPLE"] }, "Tension_1":{ "line_color":"green", "fill":"yes", "fill_direction":"right", "cutoffs":[35,45,60], "fill_colors":["#60995a","#44cc33","#00ff11"] }, "Temperature_1":{ "line_color":"orange", "fill":"yes", "fill_direction":"left", "cutoffs":[10,40,57], "fill_colors":["#eced4a","#edc94a","#eda74a"] }, "SpontaneousPotential_1":{ "line_color":"blue", "fill":"no", "fill_direction":"left", "cutoffs":[5,10,25], "fill_colors":["#ffe6e6","#ff9934","red"] }, "Caliper":{ "line_color":"purple", "fill":"yes", "fill_direction":caliper_fill_direction, "cutoffs":[0], "fill_colors":["#dbdbdb"] }, "neutron_porosity_1":{ "line_color":"#004673", "fill":"yes", "fill_direction":"left", "cutoffs":[0.2,0.4,0.7], "fill_colors":["#acd4ee","#87c5ed","#29a0ed"] }, "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:T6b3,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",track_width,track_height,depth_curve_name) /// array_of_jsons_for_what_to_plot.push(json_template_for_plotting) } } } return array_of_jsons_for_what_to_plot }33:[] 2e:{"id":"73cd31e15d6886eb","slug":"a-notebook-using-wellio-js-wellioviz-js-for-quick-looks-of-la","title":"Wellio.js & Wellioviz.js for quick looks of LAS formated well logs found on the web without having to download or use proprietary software","thumbnail":"73cc2cff0234a44851ce3a489fd883ed9358bd1e9f53f1968d99d5823b9807ce","access_level":"public","create_time":"$D2020-12-06T05:30:52.334Z","update_time":"$D2023-09-09T03:09:57.602Z","view_time":null,"first_public_time":"$D2020-12-06T07:35:27.740Z","has_unpublished_edits":null,"fork":{"id":"60ee5d78ef4a0575","slug":"hello-wellioviz-swap-out-log-no-other-changes-required-now-a","title":"Hello Wellioviz - transform2020 hackathon notebook vC","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":7294,"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":6,"collection":null,"type":"notebook","body":{"title":"Wellio.js & Wellioviz.js for quick looks of LAS formated well logs found on the web without having to download or use proprietary software","cells":[{"id":1,"value":"md`# Wellio.js & Wellioviz.js for quick looks of LAS formated well logs found on the web without having to download or use proprietary software `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"md ` PURPOSE - While several government agencies offer well logs as open data on the web, they often don't let you visualize the wells on their sites but require you to download them and visualize them with your own software, which you may not have. This notebook enables quick looks of well logs from United States Geological Survey, Kansas Geological Survey, and others without having to download the files locally or install software, just paste a link to a LAS file or zip file that holds a LAS file.`","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":7112,"value":"\"uwi or well name is: \"+three_things_2[\"uwi\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6448,"value":"html `

You can horizontal and vertically scroll. A few sliders are provided below to illustrate a few configuration options in wellioviz

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

2 ways to Load a LAS file without downloading it.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7127,"value":"md `First, use the radio buttons in the green bar to select a download method, then past link in input below and hit apply.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7155,"value":"viewof widget_object_B = form(html `

\n\n

Which way to load LAS file:\n URL to LAS file\n URL to zip file of LAS file\n

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 direct URL to a LAS file, check gray radio button above is selected for this method, & hit 'apply'. This works for USGS logs.\", submit: \"apply\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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, check radio gray radio button above, & hit 'apply'. Works for Kandas Geological Survey logs.\", submit: \"apply\",size:\"width:1500\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7174,"value":"html `

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

NOTE: If the well log doesn't load, it might be because the format is less than exact in following the LAS 2.0 standard. This is relatively common. Check below for red text that a function isn't work, if you see it, please add an issue with links to example files to the wellio project repository here: https://github.com/JustinGOSSES/wellio.js/issues.

Wellio handles LAS to JSON conversion. Wellioviz does the visualization.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7098,"value":"three_things_2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6805,"value":"md `------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6807,"value":"html `

Where to get well logs?

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

USGS has a geophysical log search page here An iframe of the page is below.

If you click on a red circle representing a well and then in the pop-up click on the \"View File\" button it will open a new tab in your browser with text representation of the LAS file. Copy the URL of that tab into the first input above under 2 ways to Load a LAS file. The well should load after 0.25-2 seconds.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7254,"value":" If the page doesn't appear, it is because USGS changed their page set up again. Boo! Use the direct link above and click through their pop-up","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6814,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6265,"value":"html `

The Kansas Geological Survey provides their LAS files as zip files

Unfortunately, their page is http and not https, so I can't included it as iframe for security reasons. Go to this link , and hit the \"select wells\" button. You'll be shown a list of wells with zipped las files. Right click to copy the URL to a zipped well log and put it into the input form above for URLs to zipped LAS files.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6800,"value":"md `------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7215,"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":6849,"value":"md `### Configurable Plotting Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5748,"value":"html `

The JSON below includes some basic style configuration that is passed to helper functions. It is a small subset of all wellioviz configuration available to change. The configuration valuables are eventually passed to the plotting JSON that contains all data & style configuration, which is abstracted away in this notebook. Any changes you make here are live in the visualization. You can also use the download button to save a local copy of any changes to styles, so you don't have to remake styles every time.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7021,"value":"html `If you create many styles for specific types of logs that you'd like to share them with the users of this notebook, you can fork this notebook, make edits in your own version, and suggest changes back to this notebook using this process. If you have a much larger range of configuration you'd like to integrate as options pre-built into wellioviz, please check out the wellioviz issues as there's active work to make more style configuration built-in as opposed to configurable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6732,"value":"DOM.download(serialize(prebuilt_minimal_styles_by_curvename), null, \"Download Curve Style Config JSON\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5713,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7039,"value":"md `### Fetched LAS files as strings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7067,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7226,"value":"fileUrltoWellLog","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7247,"value":" fetched = fetch(fileUrltoWellLog, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@justingosses/a-notebook-using-wellio-js-wellioviz-js-for-quick-looks-of-la',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n}).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response;\n}).catch(error => {return error;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7230,"value":"proxy = select({\n title: 'proxy',\n description: 'select CORS proxy if fetch fails',\n options: ['',\n 'https://observable-cors.glitch.me/',\n 'https://cors-proxy.htmldriven.com/?url=',\n 'https://cors-anywhere.herokuapp.com/', \n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7085,"value":"html `which_way is a variable for whether the radio button above is selected for the direct url to a LAS file or to a zipped LAS file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6592,"value":"which_way = widget_object_B[\"which_way\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5252,"value":"well_as_string_from_gist = await fetched.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 let well_name_if_end_is_well_name = url_for_zipped_las_file.split(\"/\").pop().replace(\"zip\",\"las\")\n return zip.file(well_name_if_end_is_well_name).async('string');\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7090,"value":"html `This is the selected well in string format read from the LAS file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6286,"value":"selected_well_as_string = changeWhichLoadMethod(which_way)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4982,"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":7034,"value":"html `

Everything below is code and not necessary to read to use the notebook...

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5137,"value":"md `--------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7053,"value":"md `--------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7056,"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":6729,"value":"function serialize (data) {\n let s = JSON.stringify(data);\n return new Blob([s], {type: \"application/json\"}) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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\":only_curves_to_include_if_present, // \"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\":curves_to_skip_if_present\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6503,"value":"widget_object_A","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6717,"value":"function curves_to_skip_if_present_function(){\n if(widget_object_A[\"curves_to_skip_if_present\"].split('\\\"').join(\"\").split(\",\")==\"\"){return []}\n else{return widget_object_A[\"curves_to_skip_if_present\"].split('\\\"').join(\"\").split(\",\")}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6704,"value":"curves_to_skip_if_present = curves_to_skip_if_present_function()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6708,"value":"function only_curves_to_include_if_present_function(){\n if(widget_object_A[\"only_curves_to_include_if_present\"].split('\\\"').join(\"\").split(\",\")==\"\"){return []}\n else{return widget_object_A[\"only_curves_to_include_if_present\"].split('\\\"').join(\"\").split(\",\")}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6714,"value":"only_curves_to_include_if_present = only_curves_to_include_if_present_function()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6576,"value":"ShaleSiltCutOff = widget_object_A[\"ShaleSiltCutOff\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6572,"value":"SiltSandCutOff = widget_object_A[\"SiltSandCutOff\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6991,"value":"track_width = widget_object_A[\"track_width\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6994,"value":"track_height = widget_object_A[\"track_height\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6583,"value":"height_multiplier_components = widget_object_A[\"height_multiplier_components\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6588,"value":"caliper_fill_direction = widget_object_A[\"caliper_fill_direction\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6590,"value":"value_for_nulls = widget_object_A[\"value_for_nulls\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6644,"value":"md `---- `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","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_in_json_format\" 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":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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5500,"value":"well_in_json_format_0 = checkIfString(selected_well_as_string)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5803,"value":"well_in_json_format = handleNullsForD3(well_in_json_format_0,value_for_nulls)","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":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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5284,"value":"depth_curve_name = findDepthName(well_in_json_format)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"three_things_2 = wellioviz.fromJSONofWEllGetThingsForPlotting(well_in_json_format,depth_curve_name)","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 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","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":3636,"value":"example_template_0 = wellioviz.curveBoxTemplateExamples(\"example\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5571,"value":"example_template = getExampleTemplateWithEdits(height_multiplier_components)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5547,"value":"example_template ","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 filled in`","pinned":false,"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. We could also write into the template directly, but for this demo we'll use this helper function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5299,"value":"well_log_curves_reformatted_for_d3_2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6985,"value":"track_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5270,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5310,"value":"array_of_plotting_jsons = forMultipleCurvesMinimumDataIntoTemplateFunc(curves_to_skip,prebuilt_minimal_styles_by_curvename)","pinned":false,"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 `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","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])\nresult_1 = wellioviz.multipleLogPlot(\"well_holder\",array_of_plotting_jsons)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"md `### Importing Libraries and Tools`","pinned":false,"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":false,"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":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","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":6214,"value":"d3=require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","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":5834,"value":"import {text} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7292,"value":"import { select} 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":5174,"value":"import {file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6493,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"