welldotdocs
@welldot/render

@welldot/render

A D3 renderer that draws a .well file as a technical well profile in SVG, with lithology patterns, construction, fractures, caves, labels, zoom and tooltips.

@welldot/render draws a .well file as a well profile: the lithological column with FGDC patterns, the borehole and its construction, the current pump, fractures, caves, depth labels and unit strips, at true depth scale. It renders into an <svg> element with D3 and works in any web framework or none.

Live previewbelem-pa-pirabas-abastecimento.well

The profile above is drawn by this package from a 265 m example well. The same renderer draws the welldot.org editor and the PDF reports of @welldot/pdf.

import { INTERACTIVE_RENDER_CONFIG, WellRenderer } from '@welldot/render';

const renderer = new WellRenderer(
  [
    {
      selector: '#profile',
      width: 420,
      height: 640,
      margins: { top: 24, right: 16, bottom: 20, left: 48 },
    },
  ],
  { renderConfig: INTERACTIVE_RENDER_CONFIG },
);

await renderer.prepareSvg(); // once, after the <svg> is in the page
renderer.draw(well); // again whenever the data changes

Features

  • Lithology with FGDC texture patterns and layer colors, geologic and aquifer unit strips, and description annotations.
  • Construction drawn as built: telescoping holes, casing and screens, reductions, gravel pack and seals in the annulus, centralizers, casing shoes, stick-up and the wellhead pad.
  • The current pump, from pump_installations.
  • Fractures and caves, with dip and water-intake markers.
  • Several panels for long wells, with chosen depth windows and repeated bands for paged output.
  • Interaction: zoom, pan, tooltips and highlights, driven by the mouse or by your own toolbar.
  • Themes, units and locale: every color is configurable, lengths in meters or feet, diameters in millimeters or inches, labels in English or Portuguese.

Next

Installation