{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Histogram","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":"histogram","__idx":0},"children":["Histogram"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to connect the seismic widget and multi histogram widget to show histograms for selected areas on seismic data. The user can select polygonal or rectangular areas on 2d seismic received from remote server. These areas can be moved and extended. Multiple areas are supported and displayed with different colors in seismic overlay and histogram widget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"seismic-component","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/Histogram/histogram#SeismicComponent"},"children":["#"]}," Seismic Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Seismic component encapsulates ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/seismic/widgets/SeismicViewWidget"]}," and adds an overlay to keep the geometry of the selected areas, which is called ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["geometry layer"]}," and code to retrieve an array of samples from a polygonal area in seismic model coordinates. The code below shows how to initialize widget and create a geometry layer."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"gets-samples-for-selected-area","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/Histogram/histogram#GetSamples"},"children":["#"]}," Gets Samples for Selected Area"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The most important part of Seismic Component code gets samples for selected area in 2d seismic. It requests samples in asynchronous mode from seismic pipeline. Pipeline requests samples from server via reader if they are not in the local cache. The code below shows this method."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-selected-area-to-seismic","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/Histogram/histogram#AddArea"},"children":["#"]}," Add Selected Area to Seismic"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Seismic Component has a method to add selected area to geometry overlay. The area is a rectangle to two arrays of x and y coordinates of polygon. Coordinates are provided in manipulator layer, which has different transformation from geometry layer. The code below transforms to device coordinate and device to geometry layer and add a new shape to geometry layer."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"histogram-component","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/Histogram/histogram#HistogramComponent"},"children":["#"]}," Histogram Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Histogram component is based on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/widgets/MultiHistograms"]}," and a new histogram in the stacked order for selected area. If the user moves or changes geometry of the existing area the method ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createOrUpdateHistogram"]}," updates data and recalculates histogram."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"area-tool","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/Histogram/histogram#AreaTool"},"children":["#"]}," Area Tool"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Area tool allows creating polygon or rectangle in geometry layer, modifying geometry or position of shapes. It uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RectangularShapeAdapter"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PolyLineShapeAdapter"]}," to display handles to change geometry of shapes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"result","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/Histogram/histogram#Result"},"children":["#"]}," Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example contains seismic component, histogram component, area selection and editing tool, and code to combine these components together. Use any of the selection tools from the toolbar to select an area in the 2dSeicmic. The histogram will be displayed automatically."]},{"$$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 { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { HorizontalBoxLayout } from \"@int/geotoolkit/layout/HorizontalBoxLayout.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { Polygon } from \"@int/geotoolkit/scene/shapes/Polygon.ts\";\nimport { Events as RubberBandEvents, RubberBand } from \"@int/geotoolkit/controls/tools/RubberBand.ts\";\nimport { Events as PolygonSelectionEvents, PolygonSelection } from \"@int/geotoolkit/controls/tools/PolygonSelection.ts\";\nimport { RemoteSeismicDataSource } from \"@int/geotoolkit/seismic/data/RemoteSeismicDataSource.ts\";\nimport { Events as HistogramComponentEvents, HistogramComponent } from \"/src/code/Seismic/ImagesAndLayers/Histogram/histogramcomponent.ts\";\nimport { SeismicComponent } from \"/src/code/Seismic/ImagesAndLayers/Histogram/seismiccomponent.ts\";\nimport { AreaTool, Events as AreaToolEvents } from \"/src/code/Seismic/ImagesAndLayers/Histogram/areatool.ts\";\nimport { warn } from \"@int/geotoolkit/base.js\";\nlet seismicComponent = null;\nlet histogramComponent = null;\nconst POLYGON_SELECTION_TOOL_NAME = \"SeismicPolygonSelectionTool\";\nconst BOX_SELECTION_TOOL_NAME = \"SeismicBoxSelectionTool\";\nconst AREA_TOOL_NAME = \"AreaTool\";\nconst HISTOGRAM_WIDTH = \"30%\";\nconst SEISMIC_WIDTH = \"70%\";\nlet group;\nlet plot;\nlet setRubberBandSelection = null;\nfunction createSectionQuery(position, key, oppositeKey) {\n  const selectKeys = [];\n  selectKeys[0] = {\n    \"name\": key[\"key\"],\n    \"min\": position,\n    \"max\": position,\n    \"step\": key[\"increment\"],\n    \"order\": \"asc\"\n  };\n  selectKeys[1] = {\n    \"name\": oppositeKey[\"key\"],\n    \"min\": oppositeKey[\"min\"],\n    \"max\": oppositeKey[\"max\"],\n    \"step\": oppositeKey[\"increment\"],\n    \"order\": \"asc\"\n  };\n  return {\n    \"keys\": selectKeys,\n    \"emptyTracesKey\": {\n      \"name\": oppositeKey[\"key\"],\n      \"min\": oppositeKey[\"min\"],\n      \"max\": oppositeKey[\"max\"]\n    }\n  };\n}\nconst createReader = function(onready) {\n  const host = \"https://demo.int.com/INTGeoServer/json\";\n  const data = new RemoteSeismicDataSource({\n    \"host\": host,\n    \"file\": \"data/seismic/Gullfaks_Amplitude.xgy\",\n    \"version\": 2\n  });\n  data.open(\n    () => {\n      const keys = data.getKeys();\n      const key = keys[0];\n      const oppositeKey = keys[1];\n      const query = createSectionQuery(key[\"min\"], key, oppositeKey);\n      data.select(query, (reader) => {\n        onready(reader);\n      });\n    },\n    (err) => {\n      warn(\"Data can't be loaded from server!\");\n    }\n  );\n};\nconst disableTools = function(activeTool) {\n  let tool = seismicComponent.getWidget().getToolByName(BOX_SELECTION_TOOL_NAME);\n  if (activeTool !== tool) {\n    tool.setEnabled(false);\n  }\n  tool = seismicComponent.getWidget().getToolByName(POLYGON_SELECTION_TOOL_NAME);\n  if (activeTool !== tool) {\n    tool.setEnabled(false);\n  }\n  tool = seismicComponent.getWidget().getToolByName(AREA_TOOL_NAME);\n  if (activeTool !== tool) {\n    tool.setEnabled(activeTool === null);\n  }\n};\nconst initializePolygonSelection = function(manipulatorLayer) {\n  return new PolygonSelection(manipulatorLayer).setName(POLYGON_SELECTION_TOOL_NAME).setEnabled(false).on(PolygonSelectionEvents.onSelectionEnd, (evt, object, eventArgs) => {\n    setRubberBandSelection(false);\n    const x = eventArgs.getCoordinates()[\"x\"];\n    const y = eventArgs.getCoordinates()[\"y\"];\n    const area = seismicComponent.addSelectedArea(x, y);\n    seismicComponent.getTraceData(area[\"x\"], area[\"y\"]).then((data) => {\n      histogramComponent.createOrUpdateHistogram(area[\"id\"], area[\"id\"].toString(), data, area[\"color\"]);\n      histogramComponent.getWidget().setDesiredWidth(HISTOGRAM_WIDTH);\n      seismicComponent.getWidget().setDesiredWidth(SEISMIC_WIDTH);\n      group.updateLayout();\n    });\n  });\n};\nconst initializeRubberBandSelection = function(manipulatorLayer) {\n  return new RubberBand(manipulatorLayer).setName(BOX_SELECTION_TOOL_NAME).setEnabled(false).on(RubberBandEvents.onZoomEnd, (eventType, sender, eventArgs) => {\n    const rect = eventArgs.getArea();\n    const area = seismicComponent.addSelectedArea(rect);\n    seismicComponent.getTraceData(area[\"x\"], area[\"y\"]).then((data) => {\n      histogramComponent.createOrUpdateHistogram(area[\"id\"], area[\"id\"].toString(), data, area[\"color\"]);\n      histogramComponent.getWidget().setDesiredWidth(HISTOGRAM_WIDTH);\n      seismicComponent.getWidget().setDesiredWidth(SEISMIC_WIDTH);\n      group.updateLayout();\n    });\n    disableTools(null);\n  });\n};\nconst initializeAreaTool = function(manipulatorLayer, geometryLayer) {\n  const areaTool = new AreaTool(manipulatorLayer, geometryLayer).setName(AREA_TOOL_NAME).setEnabled(true).on(AreaToolEvents.AreaChanged, (evt, object, eventArgs) => {\n    const shape = eventArgs[\"shape\"];\n    if (!shape)\n      return;\n    let x, y;\n    const id = shape.getId();\n    if (shape instanceof Polygon) {\n      x = shape.getPointsX().slice();\n      y = shape.getPointsY().slice();\n      if (shape.getLocalTransform()) {\n        shape.getLocalTransform().transformPoints(x, y, x.length);\n      }\n    } else {\n      let rect = shape.getBounds();\n      if (shape.getLocalTransform()) {\n        rect = shape.getLocalTransform().transformRect(rect);\n      }\n      x = [rect.getLeft(), rect.getRight(), rect.getRight(), rect.getLeft(), rect.getLeft()];\n      y = [rect.getTop(), rect.getTop(), rect.getBottom(), rect.getBottom(), rect.getTop()];\n    }\n    seismicComponent.getTraceData(x, y).then((data) => {\n      histogramComponent.createOrUpdateHistogram(id, id, data);\n    });\n  });\n  return areaTool;\n};\nfunction initializeSeismic(seismicReader) {\n  const component = new SeismicComponent(seismicReader);\n  component.getPipeline().setOptions({\n    \"normalization\": {\n      \"type\": NormalizationType.RMS,\n      \"scale\": 1\n    },\n    \"plot\": {\n      \"type\": {\n        \"wiggle\": false,\n        \"interpolateddensity\": true\n      },\n      \"decimationspacing\": 5\n    },\n    \"colors\": {\n      \"colormap\": SeismicColors.getDefault().createNamedColorMap(\"WhiteBlack\", 32)\n    }\n  });\n  const manipulatorLayer = component.getManipulatorLayer();\n  const geometryLayer = component.getGeometryLayer();\n  const polygonSelectionTool = initializePolygonSelection(manipulatorLayer);\n  component.getWidget().getTool().insert(0, polygonSelectionTool);\n  const rubberBancSelectionTool = initializeRubberBandSelection(manipulatorLayer);\n  component.getWidget().getTool().insert(0, rubberBancSelectionTool);\n  const areaTool = initializeAreaTool(manipulatorLayer, geometryLayer);\n  component.getWidget().getTool().insert(0, areaTool);\n  return component;\n}\nconst activatePolygonSelectionTool = function() {\n  if (seismicComponent.getWidget() == null) {\n    return;\n  }\n  const tool = seismicComponent.getWidget().getToolByName(POLYGON_SELECTION_TOOL_NAME);\n  tool.setEnabled(!tool.isEnabled());\n  disableTools(tool);\n};\nconst activateRubberBandSelectionTool = function() {\n  if (seismicComponent.getWidget() == null) {\n    return;\n  }\n  const tool = seismicComponent.getWidget().getToolByName(BOX_SELECTION_TOOL_NAME);\n  tool.setEnabled(!tool.isEnabled());\n  disableTools(tool);\n};\nconst activatePointSelectionTool = function() {\n  if (seismicComponent.getWidget() == null) {\n    return;\n  }\n  const tool = seismicComponent.getWidget().getToolByName(AREA_TOOL_NAME);\n  tool.setEnabled(true);\n  disableTools(tool);\n};\nfunction resetSelection() {\n  if (seismicComponent.getWidget() == null) {\n    return;\n  }\n  let tool = seismicComponent.getWidget().getToolByName(POLYGON_SELECTION_TOOL_NAME);\n  tool.setEnabled(false);\n  tool = seismicComponent.getWidget().getToolByName(BOX_SELECTION_TOOL_NAME);\n  tool.setEnabled(false);\n  tool = seismicComponent.getWidget().getToolByName(AREA_TOOL_NAME);\n  tool.setEnabled(false);\n  const layer = seismicComponent.getGeometryLayer();\n  layer.clearChildren();\n  histogramComponent.removeHistograms();\n  histogramComponent.getWidget().setDesiredWidth(\"0%\");\n  seismicComponent.getWidget().setDesiredWidth(\"100%\");\n  group.updateLayout();\n}\nfunction resetZoom() {\n  if (seismicComponent.getWidget() == null) {\n    return;\n  }\n  seismicComponent.getWidget().resetZoom();\n}\nconst zoomIn = function() {\n  if (seismicComponent == null) {\n    return;\n  }\n  seismicComponent.zoomIn();\n};\nconst zoomOut = function() {\n  if (seismicComponent == null) {\n    return;\n  }\n  seismicComponent.zoomOut();\n};\nfunction initializeHistogram() {\n  const histogram = new HistogramComponent();\n  histogram.on(HistogramComponentEvents.HistogramSelected, (eventName, sender, eventArgs) => {\n    const id = +eventArgs[\"id\"];\n    activatePointSelectionTool();\n    const tool = seismicComponent.getWidget().getToolByName(AREA_TOOL_NAME);\n    const geometryLayer = seismicComponent.getGeometryLayer();\n    const shape = from(geometryLayer).where((node) => node.getId() === id).selectFirst();\n    tool.selectShape(shape);\n  });\n  return histogram;\n}\nfunction initialize(canvas, setRubberBandSelectionEnabled) {\n  setRubberBandSelection = setRubberBandSelectionEnabled;\n  createReader((reader) => {\n    seismicComponent = initializeSeismic(reader);\n    histogramComponent = initializeHistogram();\n    group = new Group().setAutoModelLimitsMode(true).setLayout(new HorizontalBoxLayout()).addChild([\n      seismicComponent.getWidget().setDesiredWidth(\"100%\"),\n      histogramComponent.getWidget().setDesiredWidth(\"0%\")\n    ]);\n    plot = new Plot({\n      \"canvaselement\": canvas,\n      \"root\": group\n    });\n  });\n}\nfunction dispose() {\n  if (plot) {\n    plot.dispose();\n  }\n}\nexport {\n  activatePointSelectionTool,\n  activatePolygonSelectionTool,\n  activateRubberBandSelectionTool,\n  dispose,\n  initialize,\n  resetSelection,\n  resetZoom,\n  zoomIn,\n  zoomOut\n};\n\ncreateScene();\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#/Seismic/ImagesAndLayers/Histogram/histogram?section=Result&extract=true","width":"100%","height":"548.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Histogram","id":"histogram","depth":1},{"value":"Seismic Component","id":"seismic-component","depth":3},{"value":"Gets Samples for Selected Area","id":"gets-samples-for-selected-area","depth":3},{"value":"Add Selected Area to Seismic","id":"add-selected-area-to-seismic","depth":3},{"value":"Histogram Component","id":"histogram-component","depth":3},{"value":"Area Tool","id":"area-tool","depth":3},{"value":"Result","id":"result","depth":3}],"frontmatter":{"title":"Histogram","seo":{"title":"Histogram"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/seismic/images-and-layers/histogram","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}