31:[] 2f:{"title":"Hello Wellioviz","cells":[{"id":1,"value":"md`# Hello Wellioviz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4881,"value":"html `\n\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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":5145,"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"},{"id":5137,"value":"md `--------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"html `

These curves above are common well logs.

Each is a different type of measurement taken at depth points along a well.

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

By examining logs of different types taken in the same well, a geologist can interpret rock type, depositional environment, time surfaces, etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md `____________`","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":true,"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@0.0.32')","pinned":true,"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":4377,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md `-------------------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"html `

Single Well, multiple curves

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

Loading Data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"md `-----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"html `

There are a couple different ways we can load the data. 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"},{"id":1578,"value":"fileUrltoWellLog = 'https://gist.githubusercontent.com/JustinGOSSES/2685e588d5c2f2a0ba1591ec7b9c9421/raw/415fe8a2f27dc7621f06f60ffd40a62c0d55a0f0/00-01-01-095-19W4-0.las' // provide file location\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"fetched = await fetch(fileUrltoWellLog)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1586,"value":"well_as_string = await fetched.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md `Then call the wellio.las2json function to convert it from LAS text file to a Wellio.js json. We'll call the json that returns \"well_json_01_01_095_19W4\" here. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":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":1595,"value":"well_json_01_01_095_19W4 = wellio.las2json(well_as_string)","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":4754,"value":"depth_curve_name = \"DEPT\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1688,"value":"three_things_2 = wellioviz.fromJSONofWEllGetThingsForPlotting(well_json_01_01_095_19W4,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 = wellioviz.curveBoxTemplateExamples(\"example\")","pinned":true,"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":4899,"value":"gr_plot_template_noFill = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],[\"CALI\"],[\"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,\"DEPT\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3659,"value":"resd_plot_template_1 = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],['ILD'],[\"RED\"],[\"\"],[\n {\"curve_name\":\"ILD\",\"fill\":\"yes\",\"fill_direction\":\"left\",\"cutoffs\":[5,10,25],\"fill_colors\":[\"#ffe6e6\",\"#ffb3b3\",\"red\"],\"curve2\":\"ILD\"}],\"well_holder_1B\",200,400,\"DEPT\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3663,"value":"poro_plot_template_1 = wellioviz.minimumDataIntoTemplateFunc(example_template,well_log_curves_reformatted_for_d3_2,[uwi2],[\"NPHI\",\"DPHI\"],[\"purple\",\"pink\"],[\"\"],[{\n \"curve_name\":\"NPHI\",\n \"fill\":\"yes\",\n \"fill_direction\":\"between\",\n \"cutoffs\":[0],\n \"fill_colors\":[\"lightblue\"],\n \"curve2\":\"DPHI\"\n },\n {\n \"curve_name\":\"DPHI\",\n \"fill\":\"no\",\n \"fill_direction\":\"left\",\n \"cutoffs\":[],\n \"fill_colors\":[],\n \"curve2\":\"\"\n }\n ],\"well_holder_1C\",200,400,\"DEPT\")","pinned":true,"hidden":false,"mode":"ojs"},{"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\":\"right\",\"cutoffs\":[0,ShaleSiltCutOff,SiltSandCutOff],\"fill_colors\":[\"yellow\",\"orange\",\"gray\"],\"curve2\":\"\"}],\"well_holder_1A\",200,400,\"DEPT\")","pinned":true,"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])","pinned":true,"hidden":false,"mode":"ojs"},{"id":4038,"value":"html `\n\n

\n \n

`","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":5093,"value":"html `

...and in this last line we can call it again with a different DIV ID and it will plot on top of this notebook.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5088,"value":"result_1cloneUpTop = wellioviz.multipleLogPlot(\"well_holder2\",[gr_plot_template_noFill,gr_plot_template_1,resd_plot_template_1,poro_plot_template_1])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}