Created
January 27, 2014 21:35
-
-
Save markmarkoh/8657832 to your computer and use it in GitHub Desktop.
Specifying arcs with different colors in Datamaps.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Maybe, although I might not be understanding. What would you expect the data to look like in that case?
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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.