Stream local file to draw map with d3

Question

I found several useful pieces of information to solve my problem, but I can't solve the puzzle by myself.

My project has to draw a map with d3. The main problem (as for many others) is that the files to be displayed are huge. After some tests with topojson files, I think the best way to handle my situation is to use geojsonl files.

The idea is to update the map as the files are streamed so that the visualization for the user is fluid, but I can't make it work.

I'm trying to use ndjson, but when I try to run it I get the error fs.createReadStream is not a function.

Here is my code:

import { select, geoPath, geoMercator} from "d3";
import fs from "file-system";
import ndjson from "ndjson";

function GeoChart() {
  const [selectedCountry, setSelectedCountry] = useState(null);

  /*********************** MAIN PROBLEM *****************************/
  /******************************************************************/
  fs.createReadStream('./pathtomyfile/europe.geojsonl')
  .pipe(ndjson.parse())
  .on('data', function(obj) {
    // obj is a javascript object
  })

  //........
  //Anyone here?
  //........

  var europe = // How can i update this variable with the stream???
  /******************************************************************/

  // will be called initially and on every data change
  useEffect(() => {
    const svg = select(svgRef.current);

    // use resized dimensions
    const { width, height } = dimensions;

    // projects geo-coordinates on a 2D plane
    const projection = geoMercator();

    // takes geojson data,
    // transforms that into the d attribute of a path element
    const pathGenerator = geoPath().projection(projection);

    // render each state
    svg
      .selectAll(".state")
      .data(europe.features)
      .join("path")
      .attr("class", "state")
      .attr("d", feature => pathGenerator(feature));

  }, [europe, dimensions, selectedCountry]);

  return (
    <div className={"map-container"} ref={wrapperRef}>
      <svg className={"map"} ref={svgRef}></svg>
    </div>
  );
}

export default GeoChart;

Can someone please write the code that I'm missing? And why did I encounter that error, even though file-system is installed?

Stream local file to draw map with d3

0 Answers0