1

tl;dr

I'm creating arcs between two points on a map as shown here, but I want to save that huge array of coordinates in a json/csv file. How should I save that file and what should I change in the script so it correctly parses the json/csv file.

Long version

I'm trying to draw arcs between two points on a map as shown here.

Here's what I did.

First I defined my coordinates (hard-coded). Notice that they are lon/lat.

var trainRoutes = [
       {sourceLocation: [94.91542,27.485983],targetLocation: [77.549934,8.079252]}
];

Then I defined my arcs.

var arcs = svg.append("g").attr("class","arcs"); // adding a class for CSS stuff

And finally the code for drawing them.

arcs.selectAll("path")
                    .data(trainRoutes)
                    .enter()
                    .append("path")
                    .attr('d', function(d) { 
                    return makeArc(d, 'sourceLocation', 'targetLocation', 1); 
});

makeArc is just a function that returns a string for the path to be drawn, again, as shown here.

As you can see, I'm just creating one arc with two sets of coordinates (say city A and city B). I would like to draw more arcs but not clutter my index.html. I want to put the coordinates in a JSON file and create arcs from there rather than declaring coordinates within index.html.

I did try putting the coordinates in a JSON file and used d3.json to do the same.

d3.json("trainRoutes.json", function(json){
arcs.selectAll("path")
                        .data(json)
                        .enter()
                        .append("path")
                        .attr('d', function(d) { 
                        return makeArc(d, d.sourceLocation, d.targetLocation, 1); });
    });

But this didn't work and the console says arcs.selectAll("path") is not a function. How do I solve this issue? I'm open to using both d3.csv/d3.json, just want to move the coordinates to another file.

Here's what my JSON file (trainRoutes.json) looked like in case my declaration of JSON was wrong.

[
    {sourceLocation: [94.91542,27.485983],targetLocation: [77.549934,8.079252]}
]
Hyperbola
  • 466
  • 1
  • 6
  • 20
  • You have to nest your asynchronous function. To show how to do it, please post the basic structure of **all** your code (showing all asynchronous functions). – Gerardo Furtado Mar 07 '17 at 02:43
  • Here's the code (question starting from line 264): https://gist.github.com/anonymous/4b179600dbee2175c88141005f378be4 – Hyperbola Mar 07 '17 at 02:53
  • And here's the JSON file, https://gist.github.com/anonymous/e604628ec0d21b6bc9a34c6bdcc04794 – Hyperbola Mar 07 '17 at 02:55
  • You have the same variable `json` in two different callbacks, and also the same variable `data` in two different callbacks. Rename then, and nest **all** your asynchronous function before painting the chart. It's a lot of work, I doubt anyone here will do it for you. I suggest you use `d3.queue`, have a look here: https://github.com/d3/d3-queue – Gerardo Furtado Mar 07 '17 at 03:01
  • Can I put the entire arc thing outside of all other callbacks? – Hyperbola Mar 07 '17 at 03:03
  • Also, is my JSON file and makeArc function declaration correct? – Hyperbola Mar 07 '17 at 03:04
  • 2
    Not outside, **inside**. If you don't want to use `d3.queue`, nest all the callbacks and put all the code inside the innermost one. Have a look at this answer: http://stackoverflow.com/a/21842647/5768908 – Gerardo Furtado Mar 07 '17 at 03:55
  • 1
    I'm tight for time at the moment, but would this help: https://bl.ocks.org/andrew-reid/df9dfa52f7ca020439b03047d29ce9c3 ? – Andrew Reid Mar 07 '17 at 05:31
  • Thanks a ton @AndrewReid – Hyperbola Mar 07 '17 at 06:58

0 Answers0