32:T8dc,viewof widget_object_A = form(html``)33:T576,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", "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":"pink", "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"] } } }]34: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 }35:[] 30:{"title":"Hello Wellioviz - transform2020 hackathon notebook vC","cells":[{"id":1,"value":"md`# Hello Wellioviz - transform2020 hackathon notebook vC `","pinned":false,"hidden":false,"mode":"ojs"},{"id":6483,"value":"html `

(changes since last version: 3 loading methods & horizontal scrolling)

`","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
No hard coded 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.
Ability to load zipped LAS files from the Kansas geological survey

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

you can horizontal and vertically scroll

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

\n \n

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

JSONs for Changing Style On Fly

`","pinned":false,"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. The download button saves a local copy of any changes to this JSON so you don't have to remake styles every time.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6732,"value":"DOM.download(serialize(prebuilt_minimal_styles_by_curvename), null, \"Download Curve Style Config JSON\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5713,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":6503,"value":"widget_object_A","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":6704,"value":"curves_to_skip_if_present = curves_to_skip_if_present_function()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":6714,"value":"only_curves_to_include_if_present = only_curves_to_include_if_present_function()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6572,"value":"SiltSandCutOff = widget_object_A[\"SiltSandCutOff\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6576,"value":"ShaleSiltCutOff = widget_object_A[\"ShaleSiltCutOff\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6583,"value":"height_multiplier_components = widget_object_A[\"height_multiplier_components\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6588,"value":"caliper_fill_direction = widget_object_A[\"caliper_fill_direction\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6590,"value":"value_for_nulls = widget_object_A[\"value_for_nulls\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6592,"value":"which_way = widget_object_A[\"which_way\"]","pinned":false,"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":6632,"value":"html `

Which method of the 3 below works is controlled by the radio button above!`","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 saved in github.com gists. Please note that URLS not on a CORS anomynous enabled server may not work. Gists and raw github links should 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 'apply'\", submit: \"apply\"})","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 BELOW TO MAKE LOCAL LOAD WORK!!! AND DON'T PUBLISH WITHOUT COMMENTED BACK OR FUNCTIONS WILL BE RED AS THE LOCAL FILE WON'T EXIST YET BUT FUNCTIONS WILL TRY TO USE IT!

`","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, go to link add nothing to form and hit enter. You'll be shown a list of wells with zipped las files. 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. It assumes the file inside the zip has the name at the end of 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":6644,"value":"md `---- `","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":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"},{"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":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":6286,"value":"selected_well_as_string = changeWhichLoadMethod(which_way)","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":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":true,"hidden":false,"mode":"ojs"},{"id":5571,"value":"example_template = getExampleTemplateWithEdits(height_multiplier_components)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5547,"value":"example_template ","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":5299,"value":"well_log_curves_reformatted_for_d3_2","pinned":true,"hidden":false,"mode":"ojs"},{"id":5270,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":5310,"value":"array_of_plotting_jsons = forMultipleCurvesMinimumDataIntoTemplateFunc(curves_to_skip,prebuilt_minimal_styles_by_curvename)","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])\nresult_1 = wellioviz.multipleLogPlot(\"well_holder\",array_of_plotting_jsons)","pinned":true,"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":6618,"value":"md `### Previous form inputs that we might go back to`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5351,"value":"// viewof SiltSandCutOff = slider({\n// min: 0,\n// max: 100,\n// step: 1,\n// value: 97,\n// format: \",\",\n// description:\n// \"experimental shale/silt cutoff slider\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5352,"value":"// viewof ShaleSiltCutOff = 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":5554,"value":"// viewof height_multiplier_components = slider({\n// min: 1,\n// max: 10,\n// step: 0.25,\n// value: 2,\n// // format: \",\",\n// description:\n// \"vertical scaler\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5753,"value":"// viewof caliper_fill_direction = radio({\n// title: 'Change direction of fill for any curve name grouped in caliper log style',\n// description: '',\n// options: [\n// { label: 'left', value: 'left'},\n// { label: 'right', value: 'right'},\n// ],\n// value: 'left'\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5831,"value":"// viewof value_for_nulls = text({placeholder: 'example -999.2500 default is \"\"', description: \"Input a value for nulls. These will be convered to empty strings so D3.js handles them properly\", submit: \"Apply\"})","pinned":true,"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":true,"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')\nwellioviz = require('https://bundle.run/wellioviz@0.0.24')","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"},{"id":6493,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}