Struggling to find a way to connect individual points on a map

Question

Struggling to find a way to connect individual points on a map

Looking for some guidance in d3 as a beginner. My goal is to plot a series of coordinates onto a map.

After starting with Mike Bostock's airports voronoi map, I managed to get the base map set up successfully. The issue arises when trying to display individual points instead of one collective element as showcased by the blue dots on the map.

Here is my current code implementation: https://jsfiddle.net/cerealcommas/ofmz52uu/3/

I have the data available in JSON format but am struggling with correctly manipulating it:

{
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [27.47197, -80.32435]
    },
    "properties": {}
},
...
{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [26.25161, -81.82374]
    },
    "properties": {}
}]
}

javascript json d3.js gis

Answer 1

Answer №1

In order to create a path, you should utilize the type Point instead of MultiPoints and iterate through each point:

Based on the code in your fiddle:

// Adding points
svg.append("path")
    .datum({
        type: "MultiPoint",
        coordinates: lionfish
    })
    .attr("class", "points")
    .attr("d", path);

Here is how you can do it using type Point:

// Adding points
lionfish.forEach(function(d){
    svg.append("path")
        .datum({
            type: "Point",
            coordinates: d
        })
        .attr("class", "points")
        .attr("d", path);
});

Answer 2

In order to create a path, you should utilize the type Point instead of MultiPoints and iterate through each point:

Based on the code in your fiddle:

// Adding points
svg.append("path")
    .datum({
        type: "MultiPoint",
        coordinates: lionfish
    })
    .attr("class", "points")
    .attr("d", path);

Here is how you can do it using type Point:

// Adding points
lionfish.forEach(function(d){
    svg.append("path")
        .datum({
            type: "Point",
            coordinates: d
        })
        .attr("class", "points")
        .attr("d", path);
});

Struggling to find a way to connect individual points on a map

Answer №1

Similar questions

Encountered an issue resolving the module specifier "stimulus-autocomplete"

Change the code from a for-loop to use the Array#map method

Capturing sound with JavaScript

Is it possible to use both interfaces and string union types in TypeScript?

Obtain the data from a different HTML element

The error message "Unexpected TypeError: useSearchParams either does not exist as a function or is not iterable in its return value

Encountering internal server error while utilizing multipart/form-data with Express and KrakenJS

Arrange items according to a different object

Interchanging JSON and XML formats in C/C++ programming

JsonDecodingException was thrown when expecting the beginning of an array '[', but encountered 'EOF' at path: $

Using asynchronous methods to import a Node.js module

Exploring the process of retrieving a JSONArray with Retrofit

SBJsonParser tried to use an invalid method with instance 0x6695330, resulting in an NSInvalidArgumentException error

Unable to transmit data to CodeIgniter controller through ajax communication

Custom TailwindCSS Theme Builder

increasing the size of a picture without resorting to a pop-up window

Delightful Bootstrap Tabs with Dynamic Content via Ajax

The clickable functionality of buttons and text labels in Vue is currently not working

Slider MIA - Where Did it Go?

Ways to conceal submenu when clicking away from the navigation bar