29:null 2a:["$","title",null,{"children":"Well Log in D3.js v5 notebook 2 with all functions in notebook | Justin Gosses | Observable"}] 2f:T437,md `

Ideas for how to handle separate header SVGs & cross-sections

WANTS:

Want to be able to have both curvebox & header be scrollable & zoomable.
Want to be able to scroll down curvebox & have header stay in place, so you don't have to scroll up to top of curveBox to see which curve is which.
Saving as a single SVG should still be possible.

RESULTING REQUIREMENTS:

Each header & each curveBox & each cross-section need to be in their own div
Need to be either to specify a pre-made div to append to or generate one on the fly.
Need to pick a method for scrollable divs but still enable user to use their own if they already have a standard method.
Any function that builds a cross-section should make new divs and name each div curve box.
For saving as a single SVG should still be possible, need to make separate divs/SVG for header & box of curvebox be optional with the other options being header is build into single curvebox SVG.>

`30:T460,function minimumDataIntoTemplateFunc(example_template,data,well_names,curve_names,curve_colors,curve_units,fill,div_id,width,height,depth_curve_name){ //// remember that all curve components should be an array, even if one item! let example_template_n = JSON.parse(JSON.stringify(example_template)) example_template_n[0]["components"][0]["curves"][0]["data"] = data example_template_n[0]["components"][0]["curves"][0]["well_names"] = well_names example_template_n[0]["components"][0]["curves"][0]["curve_names"] = curve_names example_template_n[0]["components"][0]["curves"][0]["curve_colors"] = curve_colors example_template_n[0]["components"][0]["curves"][0]["curve_units"] = curve_units example_template_n[0]["components"][0]["curves"][0]["fill"] = fill example_template_n[0]["components"][0]["curves"][0]["depth_curve_name"] = depth_curve_name example_template_n[0]["curve_box"]["div_id"] = div_id example_template_n[0]["curve_box"]["width"] = width example_template_n[0]["curve_box"]["height"] = height example_template_n[0]["curve_box"]["margin"]["top"] = 20 return example_template_n }31:T743d,function curveBox(template_for_plotting){ ////////////// DEFINING VARIABLES so the longer name doesn't have to be used ////////////// //// These parts of the function establish variables from the config JSON in shorter variable names //// If they are necessary for plotting & there is a chance the template might not include them, then default values might be defined here for cases where they are accidentally not defined let template_overall = template_for_plotting[0]["curve_box"] let template_components = template_for_plotting[0]["components"] let template_curves = template_components[0]["curves"][0] let template_lines = template_components[0]["lines"] let template_rectangles = template_components[0]["rectangles"] let title = "" //// Determine if title exists for the curve_box. if(template_overall["show_title"] != "yes"){let title = ""} else{title=template_overall["title"]["text"]} /// Parameters that define shape & size of overall curve box let width = template_overall["width"] let height_multiplier_components = 0.95 if (template_overall["height_multiplier_components"]){ height_multiplier_components = template_overall["height_multiplier_components"] } let height = template_overall["height"]*height_multiplier_components let height_components = template_overall["height"] let margin = template_overall["margin"] let header_sep_svg_or_not = template_overall["header_sep_svg_or_not"] let svg_header_height = template_overall["svg_header_height"] let gridlines = template_overall["gridlines"] let gridlines_color = template_overall["gridlines_color"] let gridlines_stroke_width = template_overall["gridlines_stroke_width"] //// variables for how to draw mouseover of hover box let mouseover_yes_or_no = template_overall["mouseover_yes_or_no"] let mouseover_depth_or_depth_and_curve = template_overall["mouseover_depth_or_depth_and_curve"] let mouseover_curvename = template_overall["mouseover_curvename"] //// default is first curve let mouseover_color_or_default_which_is_curve_color = template_overall["mouseover_color_or_default_which_is_curve_color"] let secondary_depth_exist = "no" // THIS IS NOT YET EXISTING IN PLOTTING INPUT JSON SO HARDCODING FOR NOW //// Data is in d3.js form. An array of objects consisting of single level key:value pairs let data = template_curves["data"] //// Variables related to curves, these should all be arrays with one or more values! let curve_names = template_curves["curve_names"] let curve_colors = template_curves["curve_colors"] let curve_stroke_dasharray = template_curves["curve_stroke_dasharray"] let curve_name = curve_names[0] let curve_color = curve_colors[0] let curve_units = template_curves["curve_units"]; let scale_linear_log_or_yours = template_curves["scale_linear_log_or_yours"]; if(template_curves["curve_units"]){curve_units = template_curves["curve_units"]} else{curve_units = ""} //////// NEED TO MAKE THIS FLAG IN INPUT PLOTTING JSON let flag_for_single_scale_or_independent_scales = template_overall["grouped_or_independent_x_scales"] let grouped_or_independent_x_scale = template_overall["grouped_or_independent_x_scales"] //// The depth_curve_name needs to be the same for all curves plotted! let depth_curve_name = "" if (template_curves["depth_curve_name"].length > 1 && typeof(template_curves["depth_curve_name"]) == "object" && template_curves["depth_curve_name"][0] !== template_curves["depth_curve_name"][1] ){ depth_curve_name = "depth_curve_name is not the same in two or more curves" } else{ depth_curve_name = template_curves["depth_curve_name"] } let depth_type_string = "" if( template_curves["depth_type_string"].length > 1 && typeof(template_curves["depth_type_string"]) == "object" && template_curves["depth_type_string"][0] != template_curves["depth_type_string"][1] ){ depth_type_string = "depth type string is not the same in two or more curves" } else if (template_curves["depth_type_string"][0] == ""){depth_type_string = ""} else if (template_curves["depth_type_string"]){depth_type_string = "- "+template_curves["depth_type_string"]} let depth_units_string = "" if(template_curves["depth_units_string"] && template_curves["depth_units_string"][0] !== ""){ depth_units_string = "- " + template_curves["depth_units_string"] } ///// THIS LINE BELOW DOESN"T MAKE ANY SENSE, CHANGE //// let div_id = template_overall["div_id"] if(template_overall["div_id"]){div_id = template_overall["div_id"]} else{return "there_was_no_div_id_in_the_template"} d3.select("#"+div_id).selectAll("*").remove(); ///////// NEED TO FIX DEPTHS AS THERE ARE MULTIPLE DEPTH LIMITS AND THEY NEED TO BE CALCULATED PROPERLY !!!!! ////////////////////////// // //// Calculate depth min and max if depth min and/or max is not given explicitly in the template let depth_min let depth_max if(!template_curves["depth_limits"] || template_curves["depth_limits"][0]["min"] == "autocalculate") {depth_min = d3.min(data, function(d) { return +d[depth_curve_name];})} else {depth_min = template_curves["depth_limits"][0]["min"]} //// max depth if(!template_curves["depth_limits"] || template_curves["depth_limits"][0]["max"] == "autocalculate") {depth_max = d3.max(data, function(d) { return +d[depth_curve_name];})} else {depth_max = template_curves["depth_limits"][0]["max"]} // [depth_max,depth_min] //// Apply depth min and max to incoming well log data //// To save time, we'll first check if the first object in the array had as depth that is smaller than min //// and check if the last object in the array has a depth that is larger than the max, if not. we do nothing. if(data[0][depth_curve_name] > depth_min && data[-1][depth_curve_name] < depth_max){} else{data = data.filter(function(objects){ return objects[depth_curve_name] > depth_min && objects[depth_curve_name] < depth_max; })} // let depth_min = -1000000 // let depth_max = 1000000 if(template_curves["min_depth"][0] == "autocalculate" || template_curves["min_depth"] == "autocalculate"){ depth_min = data[0][depth_curve_name] } else{depth_min = template_curves["min_depth"]} if(template_curves["max_depth"][0] == "autocalculate" || template_curves["max_depth"] == "autocalculate"){ depth_max = data[data.length-1][depth_curve_name] } else{depth_max = template_curves["max_depth"]} // let depth_min = template_curves["min_depth"][0] // let depth_max = template_curves["max_depth"][0] ///////// <=== NEED TO FIX DEPTHS. THEY NEED TO BE CALCULATED PROPERLY !!!!! ////////////////////////// ////////////// Initiate Divs + SVGs. Different depending single SVG or header separate =>////////////// let svg = "" let svg_holder = "" let svg_header = "" if (header_sep_svg_or_not == "yes"){ svg_holder = d3.select("#"+div_id).append("div") .attr("class","svg_holder") .style("overflow-x","auto") svg_header = d3.select("#"+div_id+" div.svg_holder").append("svg") svg_header.attr("class","header") svg_header.attr("width",width) .attr("height",svg_header_height); ///// THIS SHOULD BE CHANGED TO A KEY:VALUE PAIR IN TEMPLATES!!! svg_header.append("g") svg_header.style("display","block"); let depth_string_on_top = "" if(depth_type_string == ""){ depth_string_on_top = depth_curve_name } else{depth_string_on_top = depth_type_string.replace("- ","")} svg_header.append("text") .attr("x", (margin.left)/2) .attr("y", "1em") .attr("text-anchor", "middle") .style("font-size", "10px") .style("text-decoration", "underline") .text(depth_curve_name); if(depth_type_string != ""){ let depth_type_string_x_pos = 0 let depth_type_string_x_pos_anch = "start" if(secondary_depth_exist == "no"){ depth_type_string_x_pos = margin.left/2 depth_type_string_x_pos_anch = "middle" } svg_header.append("text") .attr("x", depth_type_string_x_pos) .attr("y", "3em") .attr("text-anchor", depth_type_string_x_pos_anch) .style("font-size", "8px") .style("text-decoration", "underline") .text(depth_string_on_top); } //svg_header.append("text") // .attr("x", margin.left) // .attr("y", "4em") // .attr("text-anchor", "end") // .style("font-size", "6px") // .style("text-decoration", "underline") // .text("2nd TVD"); ///////// change this!!!!! if(title !== "" && header_sep_svg_or_not == "yes"){ let distance_from_top = -15 svg_header.append("text") // .attr("x", (margin.left/3+(width/2))) .attr("y", 0 + (- distance_from_top)) .attr("text-anchor", "middle") .style("font-size", template_overall["title"]["title_font_size"]) .text(title); } const curveBox_main_div = d3.select("#"+div_id).append("div") curveBox_main_div .attr("height",height_components+"px") .attr("class","component_outter") .style('display','flex') .style('position','relative') .style('box-sizing','border-box') const curveBox_sub_div = d3.select("#"+div_id+" div.component_outter").append("div") curveBox_sub_div .attr("class","component_inner") .style('overflow-y',"auto") .style('position','absolute') .style('max-height',height_components+"px") svg = d3.select("#"+div_id+" div.component_outter div.component_inner").append("svg") } else{ svg = d3.select("#"+div_id).append("svg") } ////////////// Calculate Axis & Scales =>////////////// //// Need to handle: zero curves, arbitrary number of curves, and min/max of all curves in single axis. //// For zero curves, need to look into rectange and lines for x scales maybe? //// Need to handle scales in linear, log, or arbitary user-provided scale. //// Also, need x function for gridlines! so....? ////////////// Calculate x domain extent for one or more than one curve, used in scaling =>////////////// let mins = [] let maxes = [] for (let i = 0; i < curve_names.length; i++) { let min_this = d3.min(data, function(d) { return +d[curve_names[i]]}) let max_this = d3.max(data, function(d) { return +d[curve_names[i]]}) mins.push(min_this) maxes.push(max_this) } let min_all_curves = d3.min(mins) let max_all_curves = d3.max(maxes) if (curve_names.length == 0){ //// THIS NEEDS TO CHANGE TO LOOK AT RECTANGLE AT SOME POINT!!!!!! min_all_curves = 0 max_all_curves = 100 } ////////////// Calculate x domain extent for one or more than one curve, used in scaling =>////////////// let x_func let x let xAxis_header let xAxis if (flag_for_single_scale_or_independent_scales = "single"){ for (let i = 0; i < curve_names.length; i++) { let min_this = d3.min(data, function(d) { return +d[curve_names[i]]}) let max_this = d3.max(data, function(d) { return +d[curve_names[i]]}) mins.push(min_this) maxes.push(max_this) } min_all_curves = d3.min(mins) max_all_curves = d3.max(maxes) x = d3.scaleLinear().domain([min_all_curves,max_all_curves]).nice().range([margin.left, width - margin.right]) if(scale_linear_log_or_yours == "log"){ x = d3.scaleLog().domain([min_all_curves,max_all_curves]).nice().range([margin.left, width - margin.right]) } else if(scale_linear_log_or_yours == "linear"){} else if(typeof(scale_linear_log_or_yours) !== "string"){ x = scale_linear_log_or_yours["yours"] } xAxis_header = g => g.attr("transform", "translate(0,45)").call(d3.axisBottom(x).ticks((width-margin.left-margin.right)/25).tickSizeOuter(0)) } //////////////////// define y scale, aka the one for the depth //////////////////// // let y = d3.scaleLinear().domain([depth_max, depth_min]).nice().range([height - margin.bottom,margin.top]) let y = d3.scaleLinear().domain([depth_max, depth_min]).range([height - margin.bottom,margin.top]) //let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain").remove()) let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain")) let yAxis2 = g => g.attr("transform", `translate(${margin.left-35},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain")) ////////////// Building curvebox parts that aren't header. First define size & title =>////////////// svg.attr("class","components") svg.attr("width",width) .attr("height",height); svg.style("margin","0 auto"); svg.style('overflow',"scroll") if (header_sep_svg_or_not == "no"){ let xAxis = xAxis_header svg.append("g") .call(xAxis) .append("text") .text("test svg") } let y_axis_text = depth_curve_name+" "+depth_units_string+" "+depth_type_string svg.append("g") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("dy", ".75em") .attr("y", 0 - (margin.left*0.6)) .attr("x",((height)/-2)+margin.top) .style("text-anchor", "end") .text(y_axis_text) .style("fill","#2b2929") //// // svg.append("g") // .call(yAxis2) // .append("text") // .attr("transform", "rotate(-90)") // .attr("dy", ".75em") // .attr("y", -35) // .attr("x",((height)/-2)+margin.top) // .style("text-anchor", "end") // .text(y_axis_text+"THIS IS THE SECOND ONE") // .style("fill","#2b2929") //// //svg.append("g") //// Code that assumes multiple curves are plotted in same curvebox let distance_from_top = 40 if(title !== "" && header_sep_svg_or_not == "no"){ svg.append("text") // .attr("x", (margin.left/3+(width/2))) .attr("y", 0 + (- distance_from_top)) .attr("text-anchor", "middle") .style("font-size", template_overall["title"]["title_font_size"]) .text(title); } if(gridlines == "yes"){ var gridlines_obj = d3.axisTop() .ticks((width-margin.left-margin.right)/25) .tickFormat("") .tickSize(-height+margin.top+10) .scale(x); svg.append("g") .attr("class", "grid") .call(gridlines_obj) .style("stroke",gridlines_color) .style("stroke-width",gridlines_stroke_width) } // //// This will help save the x axis function for first curve if there are more than one curve // /// and they are at different scales. We need this in order to use the 'between' method of fill! // let x_for_k_is_0 // //// This will help save the x axis function for second curve if there are more than one curve // /// and they are at different scales. We need this in order to use the 'between' method of fill! // let x_for_k_is_1 // //// This will help save the x axis function for third curve if there are more than one curve // /// and they are at different scales. We need this in order to use the 'between' method of fill! // let x_for_k_is_2 // //// This will help save the x axis function for fourth curve if there are more than one curve // /// and they are at different scales. We need this in order to use the 'between' method of fill! // let x_for_k_is_3 let x_functions_for_each_curvename = {} //// populate with {"curvename":curvename,"x_func":func} ////////////// Building curves within curvebox =>////////////// for (let k = 0; k < curve_names.length; k++) { //// code that creates a line for each Curve in order provided and applies //// the color in the color array in order provided let curveUnit = ""; if (curve_units[k]){curveUnit = curve_units[k]} let min = mins[k] let max = maxes[k] let header_text_line = min.toFixed(1)+" - "+curve_names[k]+" "+curveUnit+" - "+max.toFixed(1) let min_this = d3.min(data, function(d) { return +d[curve_names[k]]}) let max_this = d3.max(data, function(d) { return +d[curve_names[k]]}) let x = d3.scaleLinear().domain([min_this,max_this]).nice().range([margin.left, width - margin.right]) if(scale_linear_log_or_yours == "log"){ x = d3.scaleLog().domain([min_this,max_this]).nice().range([margin.left, width - margin.right]) } else if(scale_linear_log_or_yours == "linear"){} else if(typeof(scale_linear_log_or_yours) !== "string"){ x = scale_linear_log_or_yours["yours"] } if(k==0){ x_func == x } //// This creates an object to hold multiple x axis scale functions //// that will be used if 'between' style fill is selected. x_functions_for_each_curvename[curve_names[k]] = x ////////////// Header text, two way depending on =>////////////// if (header_sep_svg_or_not == "yes"){ let distance_from_top = (1+(k*2.7)).toString()+"em" svg_header.append("text") .attr("x", (margin.left+width)/2) .attr("y", 0 + distance_from_top) .attr("text-anchor", "middle") .style("font-size", "11px") .style("text-decoration", "underline") .style('fill',curve_colors[k]) .text(header_text_line); let translate_string = "translate(0,"+(45-(30*k)).toString()+")" xAxis_header = g => g.attr("transform", translate_string).call(d3.axisBottom(x).ticks((width-margin.left-margin.right)/25).tickSizeOuter(0)) svg_header.append("g") .call(xAxis_header) .append("text") } let another_line = d3.line().x(d => x(d[curve_names[k]])).y(d => y(d[depth_curve_name])); ////////////// Appends a curve line but doesn't include fill yet =>////////////// svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", curve_colors[k]) .attr("stroke-width", template_curves["stroke_width"][k]) .attr("stroke-linecap", template_curves["stroke_linecap"][k]) .attr("stroke-dasharray",curve_stroke_dasharray[k]) .attr("d", another_line); } ////////////// define the area filled under the curve =>////////////// for (let i = 0; i < template_curves["fill"].length; i++) { //let i = k if (template_curves["fill"][i]["fill"] == "yes"){ let number_colors = template_curves["fill"][i]["fill_colors"].length let curve_name1 = template_curves["fill"][i]["curve_name"] let threshold = -99999999 let fill_color = "gray" for (let j = 0; j < number_colors; j++) { let area1 = d3.area() if (number_colors != 0){ threshold = template_curves["fill"][i]["cutoffs"][j] fill_color = template_curves["fill"][i]["fill_colors"][j] } if(template_curves["fill"][i]["fill_direction"] == "left"){ let start_from_left = template_overall["margin"]["left"] area1 .x1(d => x(d[curve_name1])) .x0(d => start_from_left) .defined(d => ((d[curve_name1])>threshold)) .y(d => y(d[depth_curve_name])); } if(template_curves["fill"][i]["fill_direction"] == "right"){ let start_from_right = template_overall["margin"]["right"] let start_from_left = template_overall["margin"]["left"] area1 .x1(d => width-start_from_right) .defined(d => ((d[curve_name1])>threshold)) .x0(d => x(d[curve_name1])) .y(d => y(d[depth_curve_name])); } if(template_curves["fill"][i]["fill_direction"] == "between"){ let between_2_curve = template_curves["fill"][i]["curve2"] //// for through x_functions_for_each_curvename object and find the key that //// matches between_2_curve which should be a curvename //// get the x function for the second curve and the curve that is curvenames[k] let second_curve_x_func = x_functions_for_each_curvename[between_2_curve] let first_curve_x_func = x_functions_for_each_curvename[curve_name1] area1 .x1(d => first_curve_x_func(d[curve_name1])) .x0(d => second_curve_x_func(d[between_2_curve])) // .defined(d => ((d[curve_name1])<=d[between_2_curve])) .y(d => y(d[depth_curve_name])); } svg.append("path") .datum(data) .attr("class", "area") .attr("d", area1) .attr("stroke", "none") .attr("fill",fill_color) .attr("fill-opacity",0.8); } } } //////////////// TOOLTIP Part 1 /////////////////// if(mouseover_yes_or_no == "no"){ console.log("mouseover_yes_or_no = 'no' so no mouseover or hover of depth or curve value will be shown") } else{ //// statements to make sure the mouseover_curvename is a present curve and if not use first curve if(mouseover_curvename == "default"){mouseover_curvename = curve_names[0]} else if (curve_names.includes(mouseover_curvename)){mouseover_curvename = mouseover_curvename} else{mouseover_curvename = curve_names[0]} //// statement to handle color of curve text and circle on hover let curve_on_mouseover_color = curve_colors[0] if(mouseover_color_or_default_which_is_curve_color != "default"){ curve_on_mouseover_color = mouseover_color_or_default_which_is_curve_color } //// appends start of mouseover rectange used for showing hover content var focus = svg.append("g") .style("display", "none"); var bisectDate = d3.bisector(function(d) { return d[depth_curve_name]; }).left; // ** //// function called to change hover style & contents when mouseover rectangle appended to svg svg function mousemove() { var y0 = y.invert(d3.mouse(this)[1]), i = bisectDate(data, y0, 1), d0 = data[i - 1], d1 = data[i], d = y0 - d0[depth_curve_name] > d1[depth_curve_name] - y0 ? d1 : d0; //// fixed value along y axis let fixed_x_value = width*0.8 //// depth value focus.select("text.y2") .attr("transform", "translate(" + fixed_x_value + "," + y(d[depth_curve_name]) + ")") .text(d[depth_curve_name]); //// curve value focus.select("text.y4") .attr("transform", // "translate(" + x(d[mouseover_curvename]) + "," + "translate(" + fixed_x_value + "," + y(d[depth_curve_name]) + ")") .text(d[curve_names[0]]); focus.select(".x") .attr("transform", "translate(" + x(d[mouseover_curvename]) + "," + 0+ ")") .attr("y2", height); //// circle y class part 2 focus.select(".y") .attr("transform", "translate(" + x(d[mouseover_curvename]) + "," + y(d[depth_curve_name]) + ")") .text(d[mouseover_curvename]); focus.select(".yl") .attr("transform", "translate(" + 0 + "," + y(d[depth_curve_name]) + ")") .text(d[mouseover_curvename]); } // append the x line focus.append("line") .attr("class", "x") .style("stroke", "blue") .style("stroke-dasharray", "3,3") .style("opacity", 0.5) .attr("y1", 0) .attr("y2", width); // append the y line focus.append("line") .attr("class", "yl") .style("stroke", "blue") .style("stroke-dasharray", "3,3") .style("opacity", 0.5) .attr("x1", 0) .attr("x2", height); // append the circle at the intersection focus.append("circle") .attr("class", "y") .style("fill", "none") .style("stroke", curve_on_mouseover_color) .attr("r", 3); //// depth value on hover if(mouseover_depth_or_depth_and_curve == "depth" || mouseover_depth_or_depth_and_curve == "depth_and_curve"){ focus.append("text") .attr("class", "y2") .attr("dx", 6) .attr("dy", "-.3em") .style("font-size","0.55em") } //// curve value on hover if(mouseover_depth_or_depth_and_curve == "curve" || mouseover_depth_or_depth_and_curve == "depth_and_curve"){ focus.append("text") .attr("class", "y4") .attr("dx", 1) .attr("dy", "0.5em") .style("font-size","0.55em") .style("fill", "black") .style("stroke", curve_on_mouseover_color) .style("stroke-width", "0.5px"); } // append the rectangle to capture mouse // ********** svg.append("rect") // ********** .attr("width", width) // ********** .attr("height", height) // ********** .style("fill", "none") // ********** .style("pointer-events", "all") // ********** .on("mouseover", function() { focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); // ********** } ////////////// Horizontal Lines AKA tops =>////////////// try { for (let i = 0; i < template_lines.length; i++) { let this_line = template_lines[i] svg.append("line") .attr("x1", 0+margin.left) .attr("y1", y(this_line["depth"])) .attr("x2", width*0.75) .attr("y2", y(this_line["depth"])) .style("stroke-width", this_line["stroke_width"]) .style("stroke", this_line["color"]) .style("stroke-dasharray", this_line["stroke-dasharray"]) .style("stroke-linecap", this_line["stroke_linecap"]) .style("fill", "none"); svg.append("text") .attr("x", width*0.75) .attr("y", y(this_line["depth"])) .attr("text-anchor", "start") .style("font-size", "12px") .text(this_line["label"]); } } catch{ console.log("could not do lines for tops in curveBox function") } ////////////// Rectangles for things like cores & sample locations =>////////////// try { for (let i = 0; i < template_rectangles.length; i++) { let this_rectangle = template_rectangles[i] let rectangle_bottom = this_rectangle.depth_top+this_rectangle.height svg.append('rect') .attr("x", 50+margin.left) .attr("y", y(this_rectangle.depth_top)) .attr("width", this_rectangle.width) .attr("y2",y(rectangle_bottom)) .style("stroke-width", this_rectangle.stroke_width) .style("stroke-linecap", this_rectangle.stroke_linecap) .style("stroke", "purple") .style("fill", this_rectangle.fill) .style("opacity", this_rectangle.opacity); svg.append("text") .attr("x", width*0.75) .attr("y", y(this_rectangle.depth_top)) .attr("text-anchor", "start") .style("font-size", "12px") .text(this_rectangle.label); } } catch{ console.log("could not do rectangle in curveBox function for some reason") } ////////////// Calling node. Only returning svg node for saving single SVG file purposes =>////////////// svg_holder.node() svg_header.node() return svg.node(); } 32:T6a2,function putArrayOfLogsIntoSection(logs_in_json,div_id,example_template,curve_name,curve_color,curve_unit,fill,depth_name, width, height){ const noSVG = d3.select("#"+div_id).selectAll("svg").remove() // let logs_in_json = turnFilesIntoTextIntoWellioJSON(logs) let new_templates = [] for (let i = 0; i < logs_in_json.length; i++) { let three_things2 = fromJSONofWEllGetThingsForPlotting(logs_in_json[i],depth_name) let new_data =three_things2["well_log_curves_reformatted_for_d3"] let example_template_n = JSON.parse(JSON.stringify(example_template)) example_template_n[0]["components"][0]["curves"][0]["data"] = new_data example_template_n[0]["components"][0]["curves"][0]["well_names"] = [three_things2["uwi"]] example_template_n[0]["components"][0]["curves"][0]["curve_names"] = [curve_name] example_template_n[0]["components"][0]["curves"][0]["curve_colors"] = [curve_color] example_template_n[0]["components"][0]["curves"][0]["curve_units"] = [curve_unit] example_template_n[0]["components"][0]["curves"][0]["fill"] = [fill] example_template_n[0]["components"][0]["curves"][0]["depth_curve_name"] = depth_name let svg_holder = d3.select("#"+div_id).append("div") svg_holder.style("vertical-align","middle") .attr("id",div_id+"svg_holder"+i) .style("display","inline-block") example_template_n[0]["curve_box"]["div_id"] = div_id+"svg_holder"+i example_template_n[0]["curve_box"]["width"] = width example_template_n[0]["curve_box"]["height"] = height example_template_n[0]["curve_box"]["margin"]["top"] = 5 new_templates.push(example_template_n) curveBox(example_template_n) } return new_templates }33:T4b8,html `

Separating data and formatting is harder than it sounds for several reasons

Certain information is not obviously in data or format, like max depth. Separating them might cause confusion or lead to certain keys moving around resulting in breaking changes.
If you separate data and format, then you have to combine them by the time they get to d3.js in order to tell the code what to plot. If you have to combine them at a later point, why did you bother keeping them separate?
If you separate at data vs. format first and then separate into components of the curveBox at a second deeper split, you have to have some sort of unique field to know which format to combine with which data. Seems easier and faster to just put them in the same object? Trying to keep track of which data and formatting goes together adds complication and requires extra code.

My perspective on this is that information should be kept at the level it is used. Code shouldn't have to look for things to exist and combine them if at all possible. Information related to a single plotting component should all be in the same place.

Cross-section wide settings
Multiple curveBoxes
- One Curvebox Object, with inside..
- Another CurveBox Object

max and min depth information from explicit max/mins as well as autocalculated from curves, lines, and rectanges in multiple curve components.
Number of curveBoxes might need to be tracked for calculating widths & height of both overall DIV, whether curveboxes are stacked purely horizontally, and heights of header SVGs, which will possibly need to change if number of curves inside a curveBox is more than 1 or 2.

Questions for combining curves, lines, and rectanges within a single curveBox or multiple curveBoxes:

Where a curveBox wide max and min depth isn't given, should the max and min of the combined components for each curveBox be used?
1. and there are multiple cureBoxes, then each curveBox will have a different vertical scale if each has a different min and max depth.
2. and multiple curveboxes should have the same min and max depth, then how to generate and share that information across curveboxes. Would it have to be explicit? Could it be autocalculated? Could you use the max and min of all components as the multiple curvebox min and max?
If we specify that the min and max of each curveBox should be a given distance above and given distance below a given top in each well, how do we hanle wells without said top?
1. Take the distance between max and min that was given relative to the top and use that distance from the top of each curve?
2. Other options?
For tops or curves or rectanges that are excluded from view due to explicity or autocalculated top, should there be any visual sign that they exist but out of view? What would said indicator be? How would it not get in the way?

What is the best way to handle the following in the JSON templates give to the plotting functions? Thinking in terms of what to use as starter values before template populated with actual data.

An expected key left out entirely?
A value with the wrong type, like string instead of float or not an expected string like "yes" or "no"?
How to put a value into a key as an example in the template that is then either skipped or used for default behavior?

Related.... how do users know what types of values are allowed? What strings, integers vs. floats, etc.?

If value has to be integer or float, how to make that clear to end users? Should initial template value also be float but one unlikely to occur like -999 or should it be something like "this_needs_to_be_float_or_integer" and then if it is a string just gets skipped?

Some numerical values can start with numerical values if decent defaults exist & the default behavior should be that that part is used and not ignore. For example, width should use a default value as it has to have a value!

This notebook is being used to build/test Wellioviz.js

Each example is broken down into the same 4 steps:

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

ARCHITECTURE markdown file

There are 3 examples: A,B, and C

To state it more explicitly:

Example A: brings data in via a single LAS file saved on github gist and converts it to JSON using wellio.js
Example B: brings data in via multiple LAS file saved in a github repository and converts them to JSON using wellio.js
Example C: Uses a JSON of just the information needed for plotting. It is created in this notebook, but could be loaded in from elsewhere.

The examples below bring in well log data in two different manners.

wellio.js style JSON that transforms all the data in a LAS file into a JSON
and another style of JSON formatted to have just the information needed for plotting

Method 1 is used in example A & B. Method 2 is used in example C.

Some ideas on what we would like to accomplish

Fill in the curve from left margin to curve
Fill in curve from right margin
Fill in between two curves
Color fill differently based on value of curve, all curves under points > X colored differently than points < X.
Fill in parts where curve X is greater than curve Y or the inverse or overlap in both directions
Change fill to svg pattern and not just color

Several different ways of plotting should be possible

One Curve in one box [GR]
Multiple curves in one box [PHID & PHIN]
Multiple curve boxes from one well [[GR],[RSD],[PHI]]
Multiple curve boxes from different wells showing same curve (cross-section) [[GR],[GR],[GR],[GR]]

Also would be nice to have tops, perhaps interactive

Show top as line in curve box
Show multiple tops with colors and/or labels to distinguish
Be able to select a top name via dropdown or create a top name via form input an then click to place it
Be able to visualize tops both as a point deterministically and as a curve for probabilitic representation

ARCHITECTURE markdown file

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

Step A-1: Loading Data

GR (gamma-ray measurement affected by mineral content),
RESD (resititivity to flow of electricity which can be driven by water content),
and PHIN & PHID (two measurements of rock porosity)

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.

LAS

Step A-2: Data Formatting

This function

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

The curveBox funtion to be the central plotting function

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

GR (gamma-ray measurement affected by mineral content),
RESD (resititivity to flow of electricity which can be driven by water content),
and PHIN & PHID (two measurements of rock porosity)
and your depth curve is named \"DEPTH\"

\n \n

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

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

Step B-1: Loading Data

You can swap them out by clicking on the little paper clip icon in the upper right corner of the cell.

Step B-2: Data Formatting

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

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

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

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

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

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

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

Step C-1: Loading Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2303,"value":"md `### What if the data came in from elsewhere and was just the data to be plotted?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"md `### Questions & Comments About how to format sparse style json input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3063,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3209,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3223,"value":"html `

If you aren't re-generated the full visualization everytime and are trying to change state incrementally, then you might need to IDs:

In order to tell the difference between different curves or different lines. In both cases it is possible to have two lines or two curves with the same label (aka name). Hence, there needs to be a ID field that is ideally unique. That being said, not everyone using it will have a unique ID field, so it must be optional!

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3096,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3236,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3241,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3108,"value":"html `A potential input format for sparse style JSONs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3580,"value":"html ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3011,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4913,"value":"// input_sparse_style =FileAttachment(\"completejson.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2719,"value":"html `

Step C-2: Data Formatting

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

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2328,"value":"function createDepthArray(min,max,step){\n // Returns an array of depth values from min to max, including both, with each being different by step value\n let depth = []\n min = parseFloat(min)\n max = parseFloat(max)\n step = parseFloat(step)\n let number_of_points = ((max-min)/step) +1\n let temp_depth = min\n for (let i = 0; i < number_of_points; i++) {\n temp_depth = (min+(i*step)).toFixed(7)\n depth.push(parseFloat(temp_depth))\n }\n return depth\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2369,"value":"function takeInArraysAndGetObjectOfCurveDataForPlotting(arraysOfCurvesAndNames,CurveName, DepthName){\n // [{\"depth\":[],\"curveData\":[]}]\n let curveObj = []\n // make sure the curve data arrays are the same lenght, if not add null values\n \n // put them into object\n let lengthOfCurve0 = arraysOfCurvesAndNames[0][DepthName].length\n for (let i = 0; i < lengthOfCurve0; i++) {\n let newObj = {[DepthName]:0,\"RHOB\":0}\n newObj[DepthName] = arraysOfCurvesAndNames[0][DepthName][i]\n newObj[CurveName] = arraysOfCurvesAndNames[0][CurveName][i]\n curveObj.push(newObj)\n }\n return curveObj\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3289,"value":"// JSON.stringify(reformattedForWelliovizCurveData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2721,"value":"html `

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

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

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

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

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

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

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

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3368,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3468,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3469,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3471,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3601,"value":"// ?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2847,"value":"md `## EXPERIMENTS BELOW To SAVE WELL LOG PLOT AS SVG FILE `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2829,"value":"function saveSvg(svgEl, name) {\n svgEl.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n var svgData = svgEl.outerHTML;\n var preface = '\\r\\n';\n var svgBlob = new Blob([preface, svgData], {type:\"image/svg+xml;charset=utf-8\"});\n var svgUrl = URL.createObjectURL(svgBlob);\n var downloadLink = document.createElement(\"a\");\n downloadLink.href = svgUrl;\n downloadLink.download = name;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2834,"value":"//// uncomment this line and push the arrow button on right to download a saved SVG\n//saveSvg(plot_RHOB_Test, \"test2.svg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 2e:"$2d:body"