{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Multi Well Correlation","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":"multi-well-correlation","__idx":0},"children":["Multi Well Correlation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog–Multi Well Correlation widget demonstrates how to create and display correlated well logs. By default, a WellLog–Multi Well Correlation widget has a track container, header and footer containers, and default tools. A track container can display different well tracks, correlation panels, or log tracks. The wells can be visualized with different depth scales and offsets. The well track is based on WellLog widget functionality and supports all visuals and templates supported for single well visualization."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial assumes familiarity with the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/introduction"},"children":["WellLog Introduction"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget"},"children":["WellLog Widget"]}," tutorials."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-a-widget","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Introduction/multiWellCorrelation#createWidget"},"children":["#"]}," Create a Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first step is to create an empty widget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-wells","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Introduction/multiWellCorrelation#addWells"},"children":["#"]}," Add Wells"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The next step is to add wells to the empty widget and correlation panels between the wells. The code below adds three well tracks and two correlation panels."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fill-wells-with-data","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Introduction/multiWellCorrelation#fillWellsWithData"},"children":["#"]}," Fill Wells with Data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the next step, add tracks with curves to the three well tracks. The well track API is very similar to the WellLog Widget. The well track API supports adding and removing tracks and provides options to initialize the well from the JSON template. See the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/DataConnection/dataConnection"},"children":["WellLog–Data Connection"]}," tutorial."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-tops","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Introduction/multiWellCorrelation#addTops"},"children":["#"]}," Add Tops"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the next step, add tops for each well. A top is an instance of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/welllog/LogMarker"]}," to be added to the marker layer of the well. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Markers/markers"},"children":["WellLog–Markers"]}," ."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-tops-correlation","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Introduction/multiWellCorrelation#addTopsCorrelation"},"children":["#"]}," Add Tops Correlation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The last step is to display the correlation between the three well tops. The code below manually creates correlations and specifies which tops are to be connected on the left and right well tracks. Tops correlation will be added to the created correlation panels."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Polygon correlation, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/welllog/multiwell/correlation/CorrelationRange"]},", can be used to connect two ranges of depths on different wells, which is not covered in this tutorial."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"result","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Introduction/multiWellCorrelation#fullExample"},"children":["#"]}," Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog–Multi Well Correlation widget builds upon ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/firstSteps"},"children":["Getting Started"]}," . This tutorial walks through how to create a basic Multi Well Correlation widget (shown below) with three well tracks and two curves inside each track. The correlation panels are added in between the well tracks."]},{"$$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 { MultiWellWidget } from \"@int/geotoolkit/welllog/multiwell/MultiWellWidget.ts\";\nimport { TrackType as MultiWellTrackType } from \"@int/geotoolkit/welllog/multiwell/TrackType.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogMarker } from \"@int/geotoolkit/welllog/LogMarker.ts\";\nimport { CorrelationMarker } from \"@int/geotoolkit/welllog/multiwell/correlation/CorrelationMarker.ts\";\nimport { LineStyle } from \"@int/geotoolkit/attributes/LineStyle.ts\";\nimport { AlignmentStyle, TextStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport curvesData from \"/src/code/WellLog/MultiWell/data/data.json?import\";\nfunction createWidget() {\n  const widget = new MultiWellWidget({\n    \"verticalscrollable\": \"auto\",\n    \"horizontalscrollable\": \"auto\",\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  });\n  const well1 = widget.addTrack(MultiWellTrackType.WellTrack, {\n    \"range\": new Range(0, 500),\n    \"welllog\": {\n      \"range\": new Range(4500, 5e3)\n    },\n    \"name\": \"Well #1\",\n    \"title\": '${name}<br/><span style=\"background-color: #DCDCDC\">1 ${deviceUnit} : ${scaleValue} ${scaleUnit}</span>',\n    \"tools\": {\n      \"navigation\": true\n    }\n  });\n  const correlationTrack1 = widget.addTrack(MultiWellTrackType.CorrelationTrack, {\n    \"width\": 50\n  });\n  const well2 = widget.addTrack(MultiWellTrackType.WellTrack, {\n    \"range\": new Range(50, 300),\n    \"welllog\": {\n      \"range\": new Range(2500, 5e3)\n    },\n    \"name\": \"Well #2\",\n    \"title\": '${name}<br/><span style=\"background-color: #DCDCDC\">1 ${deviceUnit} : ${scaleValue} ${scaleUnit}</span>',\n    \"tools\": {\n      \"navigation\": true\n    }\n  });\n  const correlationTrack2 = widget.addTrack(MultiWellTrackType.CorrelationTrack, {\n    \"width\": 50\n  });\n  const well3 = widget.addTrack(MultiWellTrackType.WellTrack, {\n    \"range\": new Range(25, 400),\n    \"welllog\": {\n      \"range\": new Range(4700, 5e3)\n    },\n    \"name\": \"Well #3\",\n    \"title\": '${name}<br/><span style=\"background-color: #DCDCDC\">1 ${deviceUnit} : ${scaleValue} ${scaleUnit}</span>',\n    \"tools\": {\n      \"navigation\": true\n    }\n  });\n  addWellData(well1, 4500);\n  addWellData(well2, 2500);\n  addWellData(well3, 4700);\n  function addWellData(well, startDepth) {\n    well.addTrack(WellLogTrackType.IndexTrack);\n    well.addTrack(WellLogTrackType.LinearTrack).addChild([\n      createCurve(createTestData(startDepth, 10, \"GR\")).setLineStyle(KnownColors.Green),\n      createCurve(createTestData(startDepth, 10, \"CALI\")).setLineStyle(KnownColors.Orange)\n    ]);\n  }\n  addTops(well1, \"Tarbert\", 4750, KnownColors.DarkRed);\n  addTops(well2, \"Tarbert\", 3e3, KnownColors.DarkRed);\n  addTops(well3, \"Tarbert\", 4800, KnownColors.DarkRed);\n  function addTops(well, name, depth, color) {\n    const top = new LogMarker(depth);\n    top.setLineStyle(LineStyle.fromObject({ \"color\": color }));\n    top.setTextStyle(TextStyle.fromObject({\n      \"color\": color,\n      \"alignment\": AlignmentStyle.Left,\n      \"font\": \"12px sans-serif\"\n    }));\n    top.setNameLabel(name);\n    top.setNameLabelPosition(AnchorType.TopCenter);\n    top.setDepthLabel(depth + \"\");\n    top.setDepthLabelPosition(AnchorType.BottomCenter);\n    well.getMarkerLayer().addChild(top);\n  }\n  addTopsCorrelation(correlationTrack1, 4750, 3e3, KnownColors.DarkRed);\n  addTopsCorrelation(correlationTrack2, 3e3, 4800, KnownColors.DarkRed);\n  function addTopsCorrelation(track, leftDepth, rightDepth, color) {\n    track.addChild(new CorrelationMarker({\n      \"linestyle\": {\n        \"color\": color,\n        \"width\": 2,\n        \"pixelsnapmode\": { \"x\": true, \"y\": true }\n      },\n      \"leftdepth\": leftDepth,\n      \"rightdepth\": rightDepth\n    }));\n  }\n  return widget;\n}\nfunction createCurve(dataSource) {\n  const limits = MathUtil.calculateNeatLimits(dataSource.getMinValue(), dataSource.getMaxValue(), false, false);\n  return new LogCurve(dataSource).setLineStyle({\n    color: KnownColors.Blue,\n    width: 2\n  }).setNormalizationLimits(limits.getLow(), limits.getHigh());\n}\nfunction createScene(canvas) {\n  const widget = createWidget();\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\").fitToHeight();\n  return plot;\n}\nfunction getCurveData(curveMnemonic) {\n  const curveNames = curvesData.curveNames;\n  const curveData = curvesData.curveData;\n  for (let i = 0; i < curveNames.length; i++) {\n    if (curveNames[i] === curveMnemonic)\n      return curveData[i];\n  }\n  return null;\n}\nfunction createTestData(from, step, curveMnemonic) {\n  const data = new LogData(curveMnemonic);\n  const depths = [];\n  const values = [];\n  const curveData = getCurveData(curveMnemonic);\n  const amountOfPoints = curveData.length;\n  for (let i = 0; i < amountOfPoints; i++) {\n    depths.push(i * step + from);\n    values.push(curveData[i]);\n  }\n  data.setValues(depths, values);\n  return data;\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/MultiWell/Introduction/multiWellCorrelation?section=fullExample&extract=true","width":"100%","height":"613.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Multi Well Correlation","id":"multi-well-correlation","depth":1},{"value":"Create a Widget","id":"create-a-widget","depth":3},{"value":"Add Wells","id":"add-wells","depth":3},{"value":"Fill Wells with Data","id":"fill-wells-with-data","depth":3},{"value":"Add Tops","id":"add-tops","depth":3},{"value":"Add Tops Correlation","id":"add-tops-correlation","depth":3},{"value":"Result","id":"result","depth":3}],"frontmatter":{"title":"Multi Well Correlation","seo":{"title":"Multi Well Correlation"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/multi-well/multi-well-correlation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}