Unicorns of the world

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Where the Unicorns are</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<body>
		<div class="container">
			<div class="row">
				<h1> Unicorns </h1>
				<div id="map"></div>
					<script src="https://d3js.org/d3.v3.min.js"></script>
					<script src="https://d3js.org/topojson.v1.min.js"></script>
					<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
					<script>
						var width = 960,
							height = 600,
							country,
							device_width = $("#map").width();
						var map = new L.Map("map", { 
									center: [37.153379, -15.463745],
									zoom: 2});
						var mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
								
						L.tileLayer(
				            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				            attribution: '&copy; ' + mapLink + ' Contributors',
				            maxZoom: 18,
				            }).addTo(map);
						map._initPathRoot();		
						var svg = d3.select("#map")
							.select("svg");
						var group = svg.append("g")
									//.attr("class", "leaflet-zoom-hide");
						// var tooltip = d3.select("body")
						//     .append("div")
						//     .style("position", "absolute")
						//     .style("z-index", "10")
						//     .style("visibility", "hidden")
						//     .style("color", "white")
						//     .style("padding", "8px")
						//     .style("background-color", "rgba(0, 0, 0, 0.75)")
						//     .style("border-radius", "6px")
						//     .style("font", "12px sans-serif")
						//     .text("tooltip");
						// d3.json("./countries.topo.json", function(error, data) {
						// 	group.append("g")
						// 		.attr("id", "countries")
						// 		.selectAll("path")
						// 		.data(topojson.feature(data, data.objects.countries).features)
						// 			.enter()
						// 			.append("path")
						// 			.attr("id", function(d){ return d.id; })
						// 			.attr("d", path)
						// 			.style("fill", "#9c9c9c")
						// 			.style("stroke", "#fff")
						// 			.on("click", zoom);
						// });
						var radius = d3.scale.sqrt()
									    .domain([1, 51])
									    .range([2, 15]);
						d3.csv("unicorns.csv", function(error, uni) {
							//console.log(uni);
							uni.forEach(function(d){
								d.LatLng = new L.LatLng(d["latitude"], d["longitude"])
							});
						var feature = group.selectAll("circle")
								.data(uni)
								.enter()
									.append("circle")
									.style("stroke", "black")  
									.style("opacity", .6) 
									.style("fill", "#CD2626")
									.attr("r", function(d) {
										return radius(d.Valuation);
									})
									.on("click", function (d, i) {
										//console.log(d, i);
										map.openPopup(d.Company, 
											L.latLng(d.latitude, d.longitude));
									});
									// // .bindPopup(function(d) {
									// // 	return "<b>" + d.Company + "</b>";
									// // })
									// .openPopup();
						map.on("viewreset", update);
						update();
						function update() {
							feature.attr("transform",
								function(d) {
									return "translate(" + 
										map.latLngToLayerPoint(d.LatLng).x +","+ 
										map.latLngToLayerPoint(d.LatLng).y +")";
								});
						}  
							// group.append("g")
							// .selectAll("circle")
							// .data(uni)
							// .enter()
							// .append("circle")
							// .attr("class", "bubble")
							// 	.attr("cx", function(d,i) { 
							// 		return projection([+d["longitude"], +d["latitude"] ])[0];
							// 	})
							// 	.attr("cy", function(d,i) { 
							// 		return projection([+d["longitude"], +d["latitude"] ])[1];
							// 	})
							// 	.attr("r", "3")
							// 	// .attr("r", function(d) {
							// 	// 	return radius(d.Valuation);
							// 	// })
							// 	.on("mouseover", function(d) {
				   //                    tooltip.text(d.Company);
				   //                    tooltip.style("visibility", "visible");
				   //            })
				   //            .on("mousemove", function() {
				   //                return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
				   //            })
				   //            .on("mouseout", function(){return tooltip.style("visibility", "hidden");});;
						
						});
						//svg.call(zoom);
						
						//https://www.tnoda.com/blog/2013-12-07
						$(window).resize(function() {
							  var w = $("#map").width();
							  svg.attr("width", w);
							  svg.attr("height", w * height / width);
							});
					</script>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

https://code.jquery.com/jquery-2.0.0.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js