Skip to content

Instantly share code, notes, and snippets.

@markmarkoh

markmarkoh/arcs.js

Last active December 19, 2015 09:09
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/5931021 to your computer and use it in GitHub Desktop.
Save markmarkoh/5931021 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
arcs.js
var election = new Datamap({
scope: 'world',
element: document.getElementById('arcs'),
projection: 'mercator'
});
var presidentialTrips = [
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 32.066667,
longitude: 34.783333
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 19.433333,
longitude: -99.133333
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 9.933333,
longitude: -84.083333
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 54.597 ,
longitude: -5.93
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 52.516667,
longitude: 13.383333
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 14.692778,
longitude: -17.446667
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: -26.204444,
longitude: 28.045556
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: -6.8,
longitude: 39.283333
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 59.329444,
longitude: 18.068611
}
},
{
origin: {
latitude: 38.895111,
longitude: -77.036667
},
destination: {
latitude: 59.95 ,
longitude: 30.3
}
}
];
election.arc( presidentialTrips, {strokeWidth: 2});
Raw
bomb.js
var bombs = [{
name: 'Joe 4',
radius: 25,
yeild: 400,
country: 'USSR',
fillKey: 'RUS',
significance: 'First fusion weapon test by the USSR (not "staged")',
date: '1953-08-12',
latitude: 50.07,
longitude: 78.43
},{
name: 'RDS-37',
radius: 40,
yeild: 1600,
country: 'USSR',
fillKey: 'RUS',
significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
date: '1955-11-22',
latitude: 50.07,
longitude: 78.43
},{
name: 'Tsar Bomba',
radius: 75,
yeild: 50000,
country: 'USSR',
fillKey: 'RUS',
significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
date: '1961-10-31',
latitude: 73.482,
longitude: 54.5854
}
];
var bombMap = new Datamap({
element: document.getElementById('map_bombs'),
scope: 'world',
geographyConfig: {
popupOnHover: false,
highlightOnHover: false
},
fills: {
'USA': '#1f77b4',
'RUS': '#9467bd',
'PRK': '#ff7f0e',
'PRC': '#2ca02c',
'IND': '#e377c2',
'GBR': '#8c564b',
'FRA': '#d62728',
'PAK': '#7f7f7f',
defaultFill: '#EDDC4E'
},
data: {
'RUS': {fillKey: 'RUS'},
'PRK': {fillKey: 'PRK'},
'PRC': {fillKey: 'PRC'},
'IND': {fillKey: 'IND'},
'GBR': {fillKey: 'GBR'},
'FRA': {fillKey: 'FRA'},
'PAK': {fillKey: 'PAK'},
'USA': {fillKey: 'USA'}
}
});
//draw bubbles for bombs
bombMap.bubbles(bombs, {
popupTemplate:function (geography, data) {
return ['<div class="hoverinfo"><strong>' + data.name + '</strong>',
'<br/>Payload: ' + data.yeild + ' kilotons',
'<br/>Country: ' + data.country + '',
'<br/>Date: ' + data.date + '',
'</div>'].join('');
}
});
Raw
custom.js
new Datamap({
element: document.getElementById('map_custom'),
scope: 'subunits',
setProjection: function(element, options) {
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(2000)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
},
geographyConfig: {
dataUrl: '/data/uk.topo.json'
},
fills: {
defaultFill: '#ABDDA4',
HIGH: '#3288BD',
LOW: '#D53E4F'
},
data:{
"IRL": {
"fillKey": "HIGH",
},
"NIR": {
"fillKey": "HIGH",
},
"SCT": {
"fillKey": "LOW",
}
}
});
Raw
elections.js
var election = new Datamap({
scope: 'usa',
element: document.getElementById('container1'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong> <br />Electoral Votes:' + data.electoralVotes + ' </div>'
},
highlightBorderWidth: 3
},
fills: {
'Republican': '#CC4731',
'Democrat': '#306596',
'Heavy Democrat': '#667FAF',
'Light Democrat': '#A9C0DE',
'Heavy Republican': '#CA5E5B',
'Light Republican': '#EAA9A8',
defaultFill: '#EDDC4E'
},
data:{
"AZ": {
"fillKey": "Republican",
"electoralVotes": 5
},
"CO": {
"fillKey": "Light Democrat",
"electoralVotes": 5
},
"DE": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"FL": {
"fillKey": "UNDECIDED",
"electoralVotes": 29
},
"GA": {
"fillKey": "Republican",
"electoralVotes": 32
},
"HI": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"ID": {
"fillKey": "Republican",
"electoralVotes": 32
},
"IL": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"IN": {
"fillKey": "Republican",
"electoralVotes": 11
},
"IA": {
"fillKey": "Light Democrat",
"electoralVotes": 11
},
"KS": {
"fillKey": "Republican",
"electoralVotes": 32
},
"KY": {
"fillKey": "Republican",
"electoralVotes": 32
},
"LA": {
"fillKey": "Republican",
"electoralVotes": 32
},
"MD": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"ME": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"MA": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"MN": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"MI": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"MS": {
"fillKey": "Republican",
"electoralVotes": 32
},
"MO": {
"fillKey": "Republican",
"electoralVotes": 13
},
"MT": {
"fillKey": "Republican",
"electoralVotes": 32
},
"NC": {
"fillKey": "Light Republican",
"electoralVotes": 32
},
"NE": {
"fillKey": "Republican",
"electoralVotes": 32
},
"NV": {
"fillKey": "Heavy Democrat",
"electoralVotes": 32
},
"NH": {
"fillKey": "Light Democrat",
"electoralVotes": 32
},
"NJ": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"NY": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"ND": {
"fillKey": "Republican",
"electoralVotes": 32
},
"NM": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"OH": {
"fillKey": "UNDECIDED",
"electoralVotes": 32
},
"OK": {
"fillKey": "Republican",
"electoralVotes": 32
},
"OR": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"PA": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"RI": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"SC": {
"fillKey": "Republican",
"electoralVotes": 32
},
"SD": {
"fillKey": "Republican",
"electoralVotes": 32
},
"TN": {
"fillKey": "Republican",
"electoralVotes": 32
},
"TX": {
"fillKey": "Republican",
"electoralVotes": 32
},
"UT": {
"fillKey": "Republican",
"electoralVotes": 32
},
"WI": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"VA": {
"fillKey": "Light Democrat",
"electoralVotes": 32
},
"VT": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"WA": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"WV": {
"fillKey": "Republican",
"electoralVotes": 32
},
"WY": {
"fillKey": "Republican",
"electoralVotes": 32
},
"CA": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"CT": {
"fillKey": "Democrat",
"electoralVotes": 32
},
"AK": {
"fillKey": "Republican",
"electoralVotes": 32
},
"AR": {
"fillKey": "Republican",
"electoralVotes": 32
},
"AL": {
"fillKey": "Republican",
"electoralVotes": 32
}
}
});
//add a map legend using the 'legend' plugin
election.legend();
Raw
options.js
var defaultOptions = {
scope: 'world', //currently supports 'usa' and 'world', however with custom map data you can specify your own
setProjection: setProjection, //returns a d3 path and projection functions
projection: 'equirectangular', //style of projection to be used. try "mercator"
done: function() {}, //callback when the map is done drawing
fills: {
defaultFill: '#ABDDA4' //the keys in this object map to the "fillKey" of [data] or [bubbles]
},
geographyConfig: {
dataUrl: null, //if not null, datamaps will fetch the map JSON (currently only supports topojson)
hideAntarctica: true,
borderWidth: 1,
borderColor: '#FDFDFD',
popupTemplate: function(geography, data) { //this function should just return a string
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
},
popupOnHover: true, //disable the popup while hovering
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2
},
bubblesConfig: {
borderWidth: 2,
borderColor: '#FFFFFF',
popupOnHover: true,
popupTemplate: function(geography, data) {
return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
},
fillOpacity: 0.75,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightFillOpacity: 0.85
},
arcConfig: {
strokeColor: '#DD1C77',
strokeWidth: 1,
arcSharpness: 1,
animationSpeed: 600
}
};
Raw
start.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- I recommend you host this file on your own, since this will change without warning -->
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
new Datamap({
element: document.getElementById('container')
});
//or, with jQuery on the page
$('#container').datamaps();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment