Skip to content

Instantly share code, notes, and snippets.

@markmarkoh
Created January 27, 2014 21:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markmarkoh/8657832 to your computer and use it in GitHub Desktop.
Save markmarkoh/8657832 to your computer and use it in GitHub Desktop.
Specifying arcs with different colors in Datamaps.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
@thecristen
Copy link

I'm not a Javascript superstar yet, but might there be a way to set one of the options to a variable that's associated with the origins and destinations? Say each O-D pair has a quantitative value associated with it, and I want to set the strokeWidth for each O-D pair to that value.

@markmarkoh
Copy link
Author

Maybe, although I might not be understanding. What would you expect the data to look like in that case?

@thecristen
Copy link

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.

@markmarkoh
Copy link
Author

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.

@thecristen
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment