ZacharyDinerstein/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://datamaps.github.io/scripts/datamaps.all.min.js"></script>
	<title>Earthquake!</title>
</head>
<body>

<!-- ============================ Container Div for our World Map =============================
 -->

 <!-- 	<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
 -->
	<div id="map_bombs" style="position: relative; width: 500px; height: 300px;"></div>

	<script>
//========================== Map w/o Bombs ==================================

   //  var map = new Datamap({
	  //   element: document.getElementById('container'),
	  //   scope: 'usa',
	  //   fills: {
	  //   	defaultFill: 'rgba(200,148,210,0.9)'
	  //   }
  	// });


//========================== Map w/ Bombs ===================================

    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'}
    }
});

     var bombs = [{
        name: 'Canada, no more',
        radius: 25,
        yeild: 400,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'Syrup was everywhere. Cheap pirscription drugs littered the land.',
        date: '2000-08-12',
        latitude: 45.50,
        longitude: -73.56
      },{
        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: 15.50,
        longitude: -73.56

      },{
        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: 45.482,
        longitude: 54.5854
      }
    ];


//-------------------------- draw bubbles for bombs -----------------------------------

bombMap.bubbles(bombs, {
    popupTemplate: function (geo, data) {
            return ['<div class="hoverinfo">' +  data.name,
            '<br/>Payload: ' +  data.yeild + ' kilotons',
            '<br/>Country: ' +  data.country + '',
            '<br/>Date: ' +  data.date + '',
            '</div>'].join('');
    }
});
	</script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://datamaps.github.io/scripts/datamaps.all.min.js"></script>
	<title>Earthquake!</title>
	</head>
	<body>

	<!-- ============================ Container Div for our World Map =============================
	-->

	<!-- <div id="container" style="position: relative; width: 500px; height: 300px;"></div>
	-->
	<div id="map_bombs" style="position: relative; width: 500px; height: 300px;"></div>

	<script>
	//========================== Map w/o Bombs ==================================

	// var map = new Datamap({
	// element: document.getElementById('container'),
	// scope: 'usa',
	// fills: {
	// defaultFill: 'rgba(200,148,210,0.9)'
	// }
	// });


	//========================== Map w/ Bombs ===================================

	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'}
	}
	});

	var bombs = [{
	name: 'Canada, no more',
	radius: 25,
	yeild: 400,
	country: 'USSR',
	fillKey: 'RUS',
	significance: 'Syrup was everywhere. Cheap pirscription drugs littered the land.',
	date: '2000-08-12',
	latitude: 45.50,
	longitude: -73.56
	},{
	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: 15.50,
	longitude: -73.56

	},{
	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: 45.482,
	longitude: 54.5854
	}
	];


	//-------------------------- draw bubbles for bombs -----------------------------------

	bombMap.bubbles(bombs, {
	popupTemplate: function (geo, data) {
	return ['<div class="hoverinfo">' + data.name,
	'<br/>Payload: ' + data.yeild + ' kilotons',
	'<br/>Country: ' + data.country + '',
	'<br/>Date: ' + data.date + '',
	'</div>'].join('');
	}
	});
	</script>

	</body>
	</html>