{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Log2D","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"log2d","__idx":0},"children":["Log2D"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog – Log2D tutorial describes how to add the Log2D visual to the track. It represents data between 0–360 degrees/2PI along a 2D plane. Data along a horizontal cross section at a unique depth is represented by a 2D row. The depth and a list of 'angles' with corresponding 'values' is used to generate each ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Log2DDataRow"]},". ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Log2DDataRow"]}," is then added to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Log2DVisualData"]},", which is used by the Log2DVisual to generate the graphic display. The color provider is called for each unique value to provide the color."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Log2D has different display modes: the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["discrete"]}," mode, where the color is assigned to the color of that interval and the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["interpolated"]}," mode where the color is interpolated depending on the exact value in the color interval."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Log2D can be used to display FMI logs (Acoustic/Optic borehole imaging) or density logs."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"log2d-data","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Log2D/log2D#log2DData"},"children":["#"]}," Log2D Data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Log2D supports two types of data sources: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ArrayLogDataSource"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Log2DVisualData"]},". ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ArrayLogDataSource"]}," is an adapter for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DataTable"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DataTableView"]}," and allows sharing the same data."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Angle Limits"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["0"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["360"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["0"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["360"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Offset"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["0"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["0°"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["​"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Alignment Type"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Right"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flip Colors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Wrap Interpolation"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { ScalingOptions } from \"@int/geotoolkit/scene/exports/ScalingOptions.ts\";\nimport { FontSubType } from \"@int/geotoolkit/pdf/FontSubType.ts\";\nimport { HeaderComponent } from \"@int/geotoolkit/scene/exports/HeaderComponent.ts\";\nimport { ImageCompression } from \"@int/geotoolkit/pdf/ImageCompression.ts\";\nimport { SpeedCompression } from \"@int/geotoolkit/pdf/SpeedCompression.ts\";\nimport { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { ColumnAlignment, Log2DVisual, PlotTypes } from \"@int/geotoolkit/welllog/Log2DVisual.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { CompositeLog2DVisualHeader } from \"@int/geotoolkit/welllog/header/CompositeLog2DVisualHeader.ts\";\nimport { ArrayLogDataSource } from \"@int/geotoolkit/welllog/data/ArrayLogDataSource.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { HttpClient } from \"@int/geotoolkit/http/HttpClient.ts\";\nimport { create2DVisual } from \"/src/code/WellLog/utils/util.ts\";\nimport font from \"/src/assets/fonts/roboto.ttf?import\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst httpClient = HttpClient.getInstance().getHttp();\nconst alignmentTypes = [\"Left\", \"Center\", \"Table\", \"Right\"];\nlet base64Font = \"\";\nfunction generateData() {\n  const minDepth = 100, maxDepth = 500;\n  const depthStep = (maxDepth - minDepth) / 10;\n  const table = new DataTable({\n    \"cols\": [{\n      \"name\": \"depth\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val1\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val2\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val3\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val4\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val5\",\n      \"type\": \"number\"\n    }]\n  });\n  for (let i = 1; i < 10; i++) {\n    const depth = minDepth + depthStep * i;\n    table.addRow([depth, -2, -1, 0, 1, -2]);\n  }\n  return new ArrayLogDataSource({\n    \"datatable\": table,\n    \"angles\": {\n      \"values\": [0, Math.PI / 2, Math.PI, Math.PI * 3 / 2, Math.PI * 2]\n    }\n  });\n}\nfunction createScene(canvas) {\n  const data = generateData();\n  const widget = createWellLogWidget({\n    \"range\": new Range(data.getMinDepth(), data.getMaxDepth())\n  }).setOrientation(Orientation.Vertical).setAxisHeaderType(HeaderType.Simple).scale(2);\n  const headerProvider = widget.getHeaderContainer().getHeaderProvider();\n  headerProvider.registerHeaderProvider(Log2DVisual.getClassName(), new CompositeLog2DVisualHeader());\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(data, \"Dataset #1\", 0, \"#fff9c4\", true).setPlotType(PlotTypes.Step)\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(data, \"Dataset #2\", 0, \"#fff9c4\").setPlotType(PlotTypes.Linear)\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction setOffset(plot, value) {\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    log2d.setOffsets(value * Math.PI / 180);\n  });\n}\nfunction setAngle(plot, value) {\n  const minAngle = value[0] * Math.PI / 180;\n  const maxAngle = value[1] * Math.PI / 180;\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    log2d.setAnglesLimits(minAngle, maxAngle);\n  });\n}\nfunction setAlignment(plot, value) {\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    switch (value) {\n      case \"Left\":\n        log2d.setAlignment(ColumnAlignment.Left);\n        break;\n      case \"Center\":\n        log2d.setAlignment(ColumnAlignment.Center);\n        break;\n      case \"Table\":\n        log2d.setAlignment(ColumnAlignment.Table);\n      case \"Right\":\n        log2d.setAlignment(ColumnAlignment.Right);\n        break;\n    }\n  });\n}\nfunction flipColors(plot) {\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    if (log2d.getColorProvider() instanceof DefaultColorProvider) {\n      log2d.getColorProvider().reverse();\n    }\n  });\n}\nfunction toggleWrap(plot) {\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    log2d.setWrapInterpolation(!log2d.getWrapInterpolation());\n  });\n}\nfunction exportToPdf(plot) {\n  new Promise((resolve, reject) => {\n    if (base64Font.length > 0) {\n      resolve(null);\n      return;\n    }\n    httpClient.get(font, {\n      \"responsetype\": \"blob\"\n    }).then((result) => {\n      const reader = new FileReader();\n      reader.readAsDataURL(result[\"data\"]);\n      reader.onloadend = () => {\n        base64Font = reader.result.split(\",\")[1];\n        resolve(null);\n      };\n      reader.onerror = reject;\n    }, reject);\n  }).then(() => {\n    const widget = plot.getRoot();\n    const limits = widget.getDepthLimits();\n    widget.exportToPdf({\n      \"output\": \"Widget\",\n      \"printsettings\": {\n        \"scaling\": ScalingOptions.FitWidth,\n        \"continuous\": true\n      },\n      \"embededfonts\": [{\n        \"subtype\": FontSubType.TrueType,\n        \"fontname\": \"roboto\",\n        \"fontweight\": \"normal\",\n        \"fontstyle\": \"normal\",\n        \"fontbase64encodedfile\": base64Font,\n        \"encoding\": \"Identity-H\"\n      }],\n      \"limits\": {\n        \"start\": limits.getLow(),\n        \"end\": limits.getHigh()\n      },\n      \"header\": new HeaderComponent(500, 20),\n      \"footer\": null,\n      \"imagecompression\": {\n        \"mode\": ImageCompression.PNG,\n        \"quality\": 1,\n        \"speed\": SpeedCompression.FAST\n      },\n      \"imagescalefactor\": 4\n    });\n  });\n}\nexport { alignmentTypes, createScene, exportToPdf, flipColors, setAlignment, setAngle, setOffset, toggleWrap };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/Log2D/log2D?section=log2DData&extract=true","width":"100%","height":"48px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"log2d-visual","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Log2D/log2D#log2DVisual"},"children":["#"]}," Log2D Visual"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Log2DVisualData"]}," is a simple data source that keeps all values and angles organized as a set of rows."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Offset"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["0"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["0°"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flip Colors"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Log2DDataRow } from \"@int/geotoolkit/welllog/data/Log2DDataRow.ts\";\nimport { Log2DVisualData } from \"@int/geotoolkit/welllog/data/Log2DVisualData.ts\";\nimport { ScalingOptions } from \"@int/geotoolkit/scene/exports/ScalingOptions.ts\";\nimport { FontSubType } from \"@int/geotoolkit/pdf/FontSubType.ts\";\nimport { HeaderComponent } from \"@int/geotoolkit/scene/exports/HeaderComponent.ts\";\nimport { ImageCompression } from \"@int/geotoolkit/pdf/ImageCompression.ts\";\nimport { SpeedCompression } from \"@int/geotoolkit/pdf/SpeedCompression.ts\";\nimport { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { Log2DVisual, PlotTypes } from \"@int/geotoolkit/welllog/Log2DVisual.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { CompositeLog2DVisualHeader } from \"@int/geotoolkit/welllog/header/CompositeLog2DVisualHeader.ts\";\nimport { HttpClient } from \"@int/geotoolkit/http/HttpClient.ts\";\nimport { create2DVisual } from \"/src/code/WellLog/utils/util.ts\";\nimport data from \"/src/code/WellLog/utils/log2DData.json?import\";\nimport font from \"/src/assets/fonts/roboto.ttf?import\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst httpClient = HttpClient.getInstance().getHttp();\nlet base64Font = \"\";\nfunction generateData() {\n  const log2dData = new Log2DVisualData();\n  for (let i = 0; i < data.length; i++) {\n    if (data[i].depth < 4780 || data[i].depth > 5040)\n      continue;\n    log2dData.getRows().push(new Log2DDataRow(data[i][\"depth\"], data[i][\"values\"], data[i][\"angles\"]));\n  }\n  log2dData.updateLimits();\n  return log2dData;\n}\nfunction createScene(canvas) {\n  const data2 = generateData();\n  const widget = createWellLogWidget({\n    \"range\": new Range(data2.getMinDepth(), data2.getMaxDepth())\n  }).setOrientation(Orientation.Horizontal).setAxisHeaderType(HeaderType.Simple).scale(2);\n  const headerProvider = widget.getHeaderContainer().getHeaderProvider();\n  headerProvider.registerHeaderProvider(Log2DVisual.getClassName(), new CompositeLog2DVisualHeader());\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(data2, \"Dataset #1\", 0, \"#7cb342\", true).setPlotType(PlotTypes.Step)\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(data2, \"Dataset #2\", 0, \"#7cb342\").setPlotType(PlotTypes.Linear)\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction setOffset(plot, value) {\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    log2d.setOffsets(value * Math.PI / 180);\n  });\n}\nfunction flipColors(plot) {\n  const widget = plot.getRoot();\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.Log2DVisual\"').select((log2d) => {\n    if (log2d.getColorProvider() instanceof DefaultColorProvider) {\n      log2d.getColorProvider().reverse();\n    }\n  });\n}\nfunction exportToPdf(plot) {\n  new Promise((resolve, reject) => {\n    if (base64Font.length > 0) {\n      resolve(null);\n      return;\n    }\n    httpClient.get(font, {\n      \"responsetype\": \"blob\"\n    }).then((result) => {\n      const reader = new FileReader();\n      reader.readAsDataURL(result[\"data\"]);\n      reader.onloadend = () => {\n        base64Font = reader.result.split(\",\")[1];\n        resolve(null);\n      };\n      reader.onerror = reject;\n    }, reject);\n  }).then(() => {\n    const widget = plot.getRoot();\n    const limits = widget.getDepthLimits();\n    widget.exportToPdf({\n      \"output\": \"Widget\",\n      \"printsettings\": {\n        \"scaling\": ScalingOptions.FitWidth,\n        \"continuous\": true\n      },\n      \"embededfonts\": [{\n        \"subtype\": FontSubType.TrueType,\n        \"fontname\": \"roboto\",\n        \"fontweight\": \"normal\",\n        \"fontstyle\": \"normal\",\n        \"fontbase64encodedfile\": base64Font,\n        \"encoding\": \"Identity-H\"\n      }],\n      \"limits\": {\n        \"start\": limits.getLow(),\n        \"end\": limits.getHigh()\n      },\n      \"header\": new HeaderComponent(500, 20),\n      \"footer\": null,\n      \"imagecompression\": {\n        \"mode\": ImageCompression.PNG,\n        \"quality\": 1,\n        \"speed\": SpeedCompression.FAST\n      },\n      \"imagescalefactor\": 4\n    });\n  });\n}\nexport { createScene, exportToPdf, flipColors, setOffset };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/Log2D/log2D?section=log2DVisual&extract=true","width":"100%","height":"48px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"nan-values-and-cut-off-values","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Log2D/log2D#nanValuesAndCutOffValues"},"children":["#"]}," NaN Values and Cut-off Values"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to create a log2d NaN (Not a Number) values and cut-off values."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["orange"]}," curve is displayed without NaN values on top of Log2D with same values for each column. The other curves have NaN values in depths: 27, 30, 35 and the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["GapFillCutoffValue"]}," is specified as 20."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["blue"]}," curve displays NaN values as gap."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["green"]}," curve enables an option to specify cutoff for NaN values by depths. If depth interval is less than specified cutoff value, which is 20 in this example, then interpolation is applied in such a way that the interval is connected and NaN values between are removed."]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { CompositeLog2DVisualHeader } from \"@int/geotoolkit/welllog/header/CompositeLog2DVisualHeader.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { ArrayLogDataSource } from \"@int/geotoolkit/welllog/data/ArrayLogDataSource.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { Log2DVisual, PlotTypes } from \"@int/geotoolkit/welllog/Log2DVisual.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { create2DVisual } from \"/src/code/WellLog/utils/util.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction generateData(withNaN) {\n  const table = new DataTable({\n    \"cols\": [{\n      \"name\": \"depth\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val1\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val2\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val3\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val4\",\n      \"type\": \"number\"\n    }, {\n      \"name\": \"val5\",\n      \"type\": \"number\"\n    }]\n  });\n  const depths = [10, 12, 20, 27, 30, 35, 40, 42, 50, 55, 60, 67, 70, 75];\n  const values = withNaN ? [75, 100, 90, NaN, NaN, NaN, 60, 75, 80, 100, 40, 67, 40, 80] : [75, 100, 90, 50, 60, 95, 60, 75, 80, 100, 40, 67, 40, 80];\n  values.forEach((val, i) => {\n    table.addRow([depths[i], val, val, val, val, val]);\n  });\n  return new ArrayLogDataSource({\n    \"datatable\": table,\n    \"angles\": {\n      \"values\": [0, Math.PI / 2, Math.PI, Math.PI * 3 / 2, Math.PI * 2]\n    }\n  });\n}\nfunction createLogCurve(withNaN, color) {\n  const data = new LogData({\n    \"name\": \"First Column\",\n    \"depths\": [10, 12, 20, 27, 30, 35, 40, 42, 50, 55, 60, 67, 70, 75],\n    \"values\": withNaN ? [75, 100, 90, NaN, NaN, NaN, 60, 75, 80, 100, 40, 67, 40, 80] : [75, 100, 90, 50, 60, 95, 60, 75, 80, 100, 40, 67, 40, 80],\n    \"indexunit\": \"ft\"\n  });\n  return new LogCurve(data).setLineStyle({\n    \"color\": color,\n    \"width\": 2\n  });\n}\nfunction createScene(canvas) {\n  const data = generateData(false);\n  const widget = createWellLogWidget({\n    \"range\": new Range(data.getMinDepth(), data.getMaxDepth())\n  }).setAxisHeaderType(HeaderType.Simple);\n  const headerProvider = widget.getHeaderContainer().getHeaderProvider();\n  headerProvider.registerHeaderProvider(Log2DVisual.getClassName(), new CompositeLog2DVisualHeader());\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(data, \"No Null\", 0, \"#fff9c4\", true).setPlotType(PlotTypes.Step),\n    createLogCurve(false, \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  let dataWithNullValues = generateData(true);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(dataWithNullValues, \"Null\", 0, \"#fff9c4\", true).setPlotType(PlotTypes.Step),\n    createLogCurve(true, \"#2196f3\")\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  dataWithNullValues = generateData(true);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    create2DVisual(dataWithNullValues, \"Gap Fill\", 0, \"#fff9c4\", true).setPlotType(PlotTypes.Step).setGapFillCutoffValue(20),\n    createLogCurve(true, \"#7cb342\").setGapFillCutoffValue(20)\n  ]);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setDepthLimits(5, 80).setHeaderHeight(\"auto\").fitToHeight();\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/Log2D/log2D?section=nanValuesAndCutOffValues&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Log2D","id":"log2d","depth":1},{"value":"Log2D Data","id":"log2d-data","depth":3},{"value":"Log2D Visual","id":"log2d-visual","depth":3},{"value":"NaN Values and Cut-off Values","id":"nan-values-and-cut-off-values","depth":3}],"frontmatter":{"title":"Log2D","seo":{"title":"Log2D"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/visuals/log-2-d","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}