ThomasG77/index.html

## index.html
<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
        <link rel="stylesheet" href="style.css">
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
<script src="script.js"></script>
</body>

## script.js
d3.csv(
	"https://raw.githubusercontent.com/plotly/datasets/master/2015_06_30_precipitation.csv",
	function(err, rows) {
		function unpack(rows, key) {
			return rows.map(function(row) {
				return row[key];
			});
		}

		var data = [
			{
				type: "scattermapbox",
				text: unpack(rows, "Globvalue"),
				lon: unpack(rows, "Lon"),
				lat: unpack(rows, "Lat"),
				marker: { color: "fuchsia", size: 4 }
			}
		];

		var layout = {
			dragmode: "zoom",
			mapbox: { style: "open-street-map", center: { lat: 38, lon: -90 }, zoom: 3 },
			margin: { r: 0, t: 0, b: 0, l: 0 }
		};

		Plotly.newPlot("myDiv", data, layout);
	}
);

## style.css
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
#myDiv {
    /* configure the size of the map */
    width: 100%;
    height: 100%;
}
	<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
	<script src="script.js"></script>
	</body>
	d3.csv(
	"https://raw.githubusercontent.com/plotly/datasets/master/2015_06_30_precipitation.csv",
	function(err, rows) {
	function unpack(rows, key) {
	return rows.map(function(row) {
	return row[key];
	});
	}

	var data = [
	{
	type: "scattermapbox",
	text: unpack(rows, "Globvalue"),
	lon: unpack(rows, "Lon"),
	lat: unpack(rows, "Lat"),
	marker: { color: "fuchsia", size: 4 }
	}
	];

	var layout = {
	dragmode: "zoom",
	mapbox: { style: "open-street-map", center: { lat: 38, lon: -90 }, zoom: 3 },
	margin: { r: 0, t: 0, b: 0, l: 0 }
	};

	Plotly.newPlot("myDiv", data, layout);
	}
	);
	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#myDiv {
	/* configure the size of the map */
	width: 100%;
	height: 100%;
	}