Parsing json data using d3.js and plotly.js

Question

I am new to JavaScript, and I am trying to build a front-end for my API. I am using Plotly.Js to visualize a map.

This is an example of the data I want to visualize:

{
    "wh_loc": [
        {
            "latitude": 40.728483 ,
            "longitude": -73.990585,
            "t": "new"
        },
        {
            "latitude": 40.729934,
            "longitude": -73.984978,
            "t": "new"
        },
          ....

The examples in the docs are straight forward

var url = "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson";


d3.json(url, (err, raw) => {

  var lon = raw.features.map(f => f.geometry.coordinates[0]);

  var lat = raw.features.map(f => f.geometry.coordinates[1]);

  var z = raw.features.map(f => f.properties.mag);


  var data = [

    { type: "scattermapbox", lon: lon, lat: lat, z: z, hoverinfo: "y" }

  ];


  var layout = {

    mapbox: { style: "dark", zoom: 2, center: { lon: -150, lat: 60 } },

    margin: { t: 0, b: 0 }

  };


  var config = {

    mapboxAccessToken: "your access token"

  };


  Plotly.newPlot('myDiv', data, layout, config);

});

But nothing seems to work. Which means I am missing something.

Here's what I've tried


d3.json(data, (err, raw) => {

  var lon = raw.map(f => f.wh_loc.latitude);

  var lat = raw.map(f => f.wh_loc.longitude);

  var z = raw.map(f => f.wh_loc.t);


  var data = [

    { type: "scattermapbox", lon: lon, lat: lat, z: z, }

  ];

Neither this or other variations of this worked, the error raw was not defined, which I don't understand, since it seems to be working well in the example.

I've also tried using a csv with d3.csv() like so:

d3.csv(

    data1,

    function(err, rows) {

        function unpack(rows, key) {

            return rows.map(function(row) {

                return row[key];

            });

        }


var data = [

    {

        type: "scattermapbox",

        text: unpack(rows, "t"),

        lon: unpack(rows, "longitude"),

        lat: unpack(rows, "latitude"),

        marker: { color: "fuchsia", size: 4 }

    }

Which also give me an error, rows is undefined. Which I also don't understand since this was taken from another example that used the same code.

How do I access the JSON file in order to display it on a map??

Parsing json data using d3.js and plotly.js

0 Answers0