Skip to content

Instantly share code, notes, and snippets.

@ngzhian
Created August 25, 2014 16:37
Show Gist options
  • Save ngzhian/7e6b65746a85eb11c082 to your computer and use it in GitHub Desktop.
Save ngzhian/7e6b65746a85eb11c082 to your computer and use it in GitHub Desktop.
Data chart js for ez
var data = {
"NED": {
"positions": 16,
"fillKey": "MEDIUM"
},
"IRL": {
"positions": 1,
"fillKey": "LOW"
},
"MEX": {
"positions": 12,
"fillKey": "MEDIUM"
},
"INA": {
"positions": 1,
"fillKey": "LOW"
},
"DC": {
"positions": 20,
"fillKey": "MEDIUM"
},
"GBR": {
"positions": 16,
"fillKey": "MEDIUM"
},
"HI": {
"positions": 1,
"fillKey": "LOW"
},
"COL": {
"positions": 9,
"fillKey": "MEDIUM"
},
"THA": {
"positions": 4,
"fillKey": "LOW"
},
"FL": {
"positions": 2,
"fillKey": "LOW"
},
"NGR": {
"positions": 2,
"fillKey": "LOW"
},
"BRAZIL": {
"positions": 15,
"fillKey": "MEDIUM"
},
"SOUTH KOREA": {
"positions": 1,
"fillKey": "LOW"
},
"saudi arabia": {
"positions": 1,
"fillKey": "LOW"
},
"CZECH REPUBLIC": {
"positions": 1,
"fillKey": "LOW"
},
"LITHUANIA": {
"positions": 1,
"fillKey": "LOW"
},
"LA": {
"positions": 1,
"fillKey": "LOW"
},
"EGYPT": {
"positions": 3,
"fillKey": "LOW"
},
"POLAND": {
"positions": 6,
"fillKey": "LOW"
},
"NC": {
"positions": 2,
"fillKey": "LOW"
},
"IND": {
"positions": 24,
"fillKey": "MEDIUM"
},
"TN": {
"positions": 2,
"fillKey": "LOW"
},
"NY": {
"positions": 9,
"fillKey": "MEDIUM"
},
"SWE": {
"positions": 1,
"fillKey": "LOW"
},
"PA": {
"positions": 2,
"fillKey": "LOW"
},
"GER": {
"positions": 11,
"fillKey": "MEDIUM"
},
"PER": {
"positions": 1,
"fillKey": "LOW"
},
"UAE": {
"positions": 3,
"fillKey": "LOW"
},
"HUN": {
"positions": 2,
"fillKey": "LOW"
},
"PHI": {
"positions": 3,
"fillKey": "LOW"
},
"ESP": {
"positions": 2,
"fillKey": "LOW"
},
"CAN": {
"positions": 4,
"fillKey": "LOW"
},
"CO": {
"positions": 2,
"fillKey": "LOW"
},
"DEN": {
"positions": 2,
"fillKey": "LOW"
},
"CA": {
"positions": 92,
"fillKey": "LOW"
},
"MAL": {
"positions": 6,
"fillKey": "LOW"
},
"IL": {
"positions": 9,
"fillKey": "LOW"
},
"GA": {
"positions": 3,
"fillKey": "LOW"
},
"WA": {
"positions": 3,
"fillKey": "LOW"
},
"SRI": {
"positions": 3,
"fillKey": "LOW"
},
"AZ": {
"positions": 2,
"fillKey": "LOW"
},
"NZL": {
"positions": 4,
"fillKey": "LOW"
},
"TUR": {
"positions": 1,
"fillKey": "LOW"
},
"USA": {
"positions": 166,
"fillKey": "HIGH"
},
"AUS": {
"positions": 8,
"fillKey": "LOW"
},
"MA": {
"positions": 7,
"fillKey": "LOW"
},
"TX": {
"positions": 5,
"fillKey": "LOW"
},
"OH": {
"positions": 3,
"fillKey": "LOW"
},
"VIE": {
"positions": 4,
"fillKey": "LOW"
},
"PAN": {
"positions": 1,
"fillKey": "LOW"
},
"SIN": {
"positions": 12,
"fillKey": "MEDIUM"
},
"FRA": {
"positions": 1,
"fillKey": "LOW"
},
"CHN": {
"positions": 43,
"fillKey": "HIGH"
},
"CHI": {
"positions": 1,
"fillKey": "LOW"
},
"BEL": {
"positions": 1,
"fillKey": "LOW"
},
"JPN": {
"positions": 3,
"fillKey": "LOW"
},
"RUS": {
"positions": 4,
"fillKey": "LOW"
},
"TWN": {
"positions": 8,
"fillKey": "LOW"
},
"BGR": {
"positions": 3,
"fillKey": "LOW"
}
}
var usa = {
"PA": {
"positions": 2,
"fillKey": "LOW"
},
"CO": {
"positions": 2,
"fillKey": "LOW"
},
"TX": {
"positions": 5,
"fillKey": "LOW"
},
"WA": {
"positions": 3,
"fillKey": "LOW"
},
"OH": {
"positions": 3,
"fillKey": "LOW"
},
"CA": {
"positions": 92,
"fillKey": "HIGH"
},
"NC": {
"positions": 2,
"fillKey": "LOW"
},
"DC": {
"positions": 20,
"fillKey": "MEDIUM"
},
"TN": {
"positions": 2,
"fillKey": "LOW"
},
"NY": {
"positions": 9,
"fillKey": "MEDIUM"
},
"HI": {
"positions": 1,
"fillKey": "LOW"
},
"IL": {
"positions": 9,
"fillKey": "MEDIUM"
},
"GA": {
"positions": 3,
"fillKey": "LOW"
},
"MA": {
"positions": 7,
"fillKey": "MEDIUM"
},
"LA": {
"positions": 1,
"fillKey": "LOW"
},
"AZ": {
"positions": 2,
"fillKey": "LOW"
},
"FL": {
"positions": 2,
"fillKey": "LOW"
}
};
var fills = {
HIGH: '#c0392b',
MEDIUM: '#e67e22',
LOW: '#16a085',
UNKNOWN: 'rgb(0,0,0)',
defaultFill: '#95a5a6'
};
var map1 = new Datamap({
element: document.getElementById('map1'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
if (data)
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong> <br />Hiring Positions:' + data.positions + ' </div>'
else
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong> <br />Hiring Positions: 0</div>'
},
highlightBorderWidth: 3
},
fills: fills,
data: data,
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit.usa').on('click', function(geography) {
$('#map1').hide();
$('#map2').show();
});
}
});
var map2 = new Datamap({
element: document.getElementById('map2'),
scope: 'usa',
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
if (data)
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong> <br />Hiring Positions:' + data.positions + ' </div>'
else
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong> <br />Hiring Positions: 0</div>'
},
highlightBorderWidth: 3
},
fills: fills,
data: usa,
});
$('#map2').hide();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment