Skip to content

Instantly share code, notes, and snippets.

@suminb

suminb/aws_latency_map.html

Last active June 18, 2017 06:57
Show Gist options
  • Save suminb/328bbccae44aa8ab4f316b732d40797a to your computer and use it in GitHub Desktop.
Save suminb/328bbccae44aa8ab4f316b732d40797a to your computer and use it in GitHub Desktop.
Download ZIP
WIP: AWS world latency map
Raw
aws_latency_map.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="datamaps.world.hires.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
var aws = {
// Tokyo
ap_northeast_1: {
latitude: 35.6895,
longitude: 139.6917
},
// Sydney
ap_southeast_2: {
latitude: -33.8688,
longitude: 151.2093
},
// London
eu_west_1: {
latitude: 51.5074,
longitude: -0.1278
},
// São Paulo
sa_east_1: {
latitude: -23.5505,
longitude: -46.6333
},
// CA
us_west_1: {
latitude: 36.7783,
longitude: -119.4197
},
// VA
us_east_1: {
latitude: 37.4316,
longitude: -78.6569,
}
};
var map = new Datamap({
element: document.getElementById('container'),
width: 1200,
height: 600,
// fills: {
// defaultFill: "#ABDDA4",
// win: '#0fa0fa'
// },
// data: {
// 'TX': { fillKey: 'win' },
// 'FL': { fillKey: 'win' },
// 'NC': { fillKey: 'win' },
// 'CA': { fillKey: 'win' },
// 'NY': { fillKey: 'win' },
// 'CO': { fillKey: 'win' }
// }
});
map.arc([
{
origin: aws.ap_northeast_1,
destination: aws.us_east_1,
},
{
origin: aws.ap_northeast_1,
destination: aws.us_west_1,
},
{
origin: aws.ap_northeast_1,
destination: aws.eu_west_1,
},
{
origin: aws.ap_northeast_1,
destination: aws.ap_southeast_2,
},
{
origin: aws.ap_northeast_1,
destination: aws.sa_east_1,
},
{
origin: aws.us_west_1,
destination: aws.us_east_1,
options: {
// strokeWidth: 2,
strokeColor: 'rgba(100, 10, 200, 0.4)',
greatArc: true
}
}
], { strokeWidth: 0.75, arcSharpness: 1.8 });
</script>
<style>
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment