I have this ascii file and couldnot convert it to d3 contour require array

[DAmrGharieb]

surface.txt

this is a file contain contour data x y z col row and want to draw as contour map i tried alot like the code below but unfortunately didnot reach any thing

this is my code

  function parseDataFn(data) {
    const values = [];
    data.split('\n').forEach((line) => {
      if (line.startsWith('#') || line.trim() === '') {
        return;
      }
  
      const lineValues = line.split(' ');
      if (lineValues.length !== 5) {
        return;
      }
  
      // Check if the values are all numbers
      const areNumbers = lineValues.every((value) => !isNaN(parseFloat(value)));
      if (!areNumbers) {
        return;
      }
  
      // Convert the values to numbers
      const x = parseFloat(lineValues[0]);
      const y = parseFloat(lineValues[1]);
      const z = parseFloat(lineValues[2]);
      values.push([x, y, z]);
    });
  
    return values;
  }

[Fil]

Here's a way to get the data and format it into a typed array. Note that for missing values I had to impute some value (I arbitrarily chose 8000, lower than the minimum).
https://observablehq.com/@recifs/contour-file-66

If you have further questions please don't open an issue but instead a d3 discussion

[DAmrGharieb]

thanks for your reply but after digging waht i want is like tri-contour library but still face issues when do this in angular

 import {
  AfterViewInit,
  Component,
  ElementRef,
  OnInit,
  ViewChild,
} from "@angular/core";
import * as d3 from "d3-tricontour";
import * as d from "d3";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit, AfterViewInit {
  ngAfterViewInit(): void {
    const dropZone = document.getElementById("drop-zone");
  }
  ngOnInit(): void {}

  handleDragOver(event) {
    event.preventDefault();

    event.dataTransfer.dropEffect = "copy";
  }

  readData = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = (event) => {
        resolve(event.target.result);
      };

      reader.onerror = (error) => {
        reject(error);
      };

      reader.readAsText(file);
    });
  };

  async handleFileSelect(event) {
    event.preventDefault();

    const file = event.dataTransfer.files[0];
    let data = this.parseDataFn(await this.readData(file));

    
    let contours = d3.tricontour()(data)

    const svg = d
      .select("body")
      .append("svg")
      .attr("width", 600)
      .attr("height", 600);

    svg
      .selectAll("path")
      .data(contours)
      .enter()
      .append("path")
      .attr("d", d.geoPath())
      .attr("fill", "none")
      .attr("stroke", "black");
  }

  parseDataFn(data) {
    const surface = [];

    data.split("\n").forEach((line) => {
      if (line.startsWith("#") || line.trim() === "") {
        return;
      }

      const lineValues = line.split(" ");

      if (lineValues.length !== 5) {
        return;
      }

      // Check if the values are all numbers

      const areNumbers = lineValues.every((value) => !isNaN(parseFloat(value)));

      if (!areNumbers) {
        return;
      }

      // Convert the values to numbers

      const x = parseFloat(lineValues[0]);

      const y = parseFloat(lineValues[1]);

      const z = parseFloat(lineValues[2]);

      const col = parseFloat(lineValues[3]);

      const row = parseFloat(lineValues[4]);

      surface.push([x, y, z]);
    });

    return surface;
  }
}

it gave me nothing in the page white screen

package.json

{
    "d3": "^7.8.0",
    "d3-tricontour": "^1.0.2",
}