Specifying arcs with different colors in Datamaps.js

paths.js

var paths = [
  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":35.466872,"longitude":139.622747},
    "options": {"strokeWidth": 2, "strokeColor": "rgba(0,0,255,0.33)"}
  },
  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":39.908617,"longitude":19.581969},
    "options": {"strokeWidth": 1, "strokeColor": "rgba(0,0,255,0.33)"}
  }
  ...
];

// http://datamaps.github.io

Possibly something along the lines of this:

var paths = [
  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":35.466872,"longitude":139.622747},
   "bananas": 2776
  },
  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":39.908617,"longitude":19.581969},
    "bananas": 903
  },
 {
    "origin":{"latitude":40.23462,"longitude":-22.090942},
    "destination":{"latitude":39.908617,"longitude":19.581969},
    "bananas": 1192
  }
//many more pairs of banana-trading
];

var bananatrade = new Datamap({
  element: document.getElementById("container"),
  fills: { defaultFill: "#eeeeee" }
});

bananatrade.arc(paths,{
  strokeWidth: paths.bananas, 
  strokeColor: 'blue'
});

I hope that makes my idea a bit clearer? I will admit that I'm not the best at d3 so maybe there's a different approach to this I hadn't realized.

The only problem with that suggestion is that

  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":35.466872,"longitude":139.622747},
    "bananas": 2776
  }

Isn't that much of an improvement from the already possible:

  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":35.466872,"longitude":139.622747},
    "options": {"strokeWidth": 2776}
  }

Thought I think there is room for something like:

  {
    "origin":{"latitude":42.350939,"longitude":-71.05229},
    "destination":{"latitude":35.466872,"longitude":139.622747},
   "fillKey": "50+"
  }

  var bananatrade = new Datamap({
    element: ...
    fills: {
       "lt10": { strokeColor: "rgba(0,0,255,0.1)", strokeWidth: 1},
       ...
       "50+" { strokeColor: "rgba(0,0,255,0.34)", strokeWidth: 3}
     }
   });

Realistically, you are only going to have a few strokeWidths, zero to four or so before the map starts looking bad.

Hm, that's a fair point.
As for using the fillKey, ah, I hadn't thought to define the arc widths that way! I think that would be really spiffy!