60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
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();
|
|
}
|