Work on bore profiling

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();
+}