Work on bore profiling

app/three/utils/build-scene.ts

@@ -6,8 +6,6 @@ import {
   DirectionalLight,
   Group,
   Object3D,
-  Vector3,
-  HemisphereLight,
 } from "three";
 
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
@@ -99,27 +97,28 @@ function animate() {
 function buildDefaultLights(scene: Scene, extent: Extent) {
   const center = getCenter3D(extent);
 
+  // Directional light position
   const lightPosition = {
     x: center.x,
-    y: center.y - 200000,
+    y: center.y - 15000,
     z: extent.zmax + 100000,
   };
 
   const lights = [];
 
   // Ambient light
-  const ambient = new AmbientLight(0xffffff, 2);
+  const ambient = new AmbientLight(0xffffff, 1);
   lights.push(ambient);
 
   // Directional lights
-  const directionalLight = new DirectionalLight(0xffffff, 2);
+  const directionalLight = new DirectionalLight(0xffffff, 1.5);
   directionalLight.position.set(
     lightPosition.x,
     lightPosition.y,
     lightPosition.z
   );
 
-  // Create a target for the ligth
+  // Create a target for the directional light
   const target = new Object3D();
   target.position.set(center.x, center.y, center.z);
   scene.add(target);

app/three/utils/create-borehole-svg.ts

@@ -0,0 +1,60 @@
+import * as d3 from "d3";
+import { Extent } from "./build-scene";
+
+// SVG dimensions
+const margin = { top: 20, right: 250, bottom: 20, left: 20 };
+
+interface Data {
+  depthStart: number;
+  depthEnd: number;
+  name: string;
+  color: string;
+}
+
+export function createSVG(
+  data: Data[],
+  width: number = 400,
+  height: number = 800,
+  extent: Extent
+) {
+  console.log(data);
+  const svg = d3
+    .create("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("viewBox", [0, 0, width, height])
+    .attr("style", "max-width: 100%; height: auto;");
+
+  // Scales: Invert Y-axis so depth increases downward
+  const zmax = d3.max(data, (d) => d.depthStart) ?? extent.zmax;
+  const zmin = d3.max(data, (d) => d.depthEnd) ?? extent.zmin;
+  const zScale = d3
+    .scaleLinear()
+    .domain([zmax, zmin])
+    .range([margin.top, height - margin.bottom]);
+
+  // Draw bars (formations)
+  svg
+    .append("g")
+    .selectAll()
+    .data(data)
+    .join("rect")
+    .attr("x", margin.left)
+    .attr("y", (d) => zScale(d.depthStart))
+    .attr("height", (d) => zScale(d.depthEnd) - zScale(d.depthStart))
+    .attr("width", width - margin.left - margin.right)
+    .attr("fill", (d) => d.color);
+
+  // Add labels (formation names)
+  svg
+    .selectAll(".label")
+    .data(data)
+    .enter()
+    .append("text")
+    .attr("class", "label")
+    .attr("x", width - margin.right + 5) // Place text slightly outside the bar
+    .attr("y", (d) => (zScale(d.depthStart) + zScale(d.depthEnd)) / 2) // Center in the bar
+    .text((d) => d.name);
+
+  return svg.node();
+}