Soy nuevo en JavaScript y estoy tratando de crear un front-end para mi API. Estoy usando Plotly.Js para visualizar un mapa.

Este es un ejemplo de los datos que quiero visualizar:

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

Los ejemplos en los documentos son sencillos.

 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); });

Pero nada parece funcionar. Lo que significa que me estoy perdiendo algo.

Esto es lo que he probado

 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, } ];

Ni esta ni otras variaciones de esto funcionaron, no se definió el error raw , lo cual no entiendo, ya que parece estar funcionando bien en el ejemplo.

También intenté usar un csv con d3.csv() así:

 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 } }

Lo que también me da un error, las rows is undefined . Lo cual tampoco entiendo ya que esto fue tomado de otro ejemplo que usaba el mismo código.

¿Cómo accedo al archivo JSON para mostrarlo en un mapa?