ssdatar · March 8, 2016 05:41
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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="http://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">

 		<script src="https://code.jquery.com/jquery-2.0.0.js"></script>
 		<style>
 			#map {
 				width: 960px;
 				height: 500px;
 			}
 			#map g {
 				stroke-width: 1px;
 			}
 			circle {
 				fill: #ff6666;
 				fill-opacity: .5;
 				stroke: black;
 				stroke-width: .1px;
 			}
 			circle:hover{
 				cursor: pointer;
 			}
 			#countries {
 				fill: #cde;
 			}
 		</style>
 	</head>

 	<body>
 		<div class="container">
 			<div class="row">
 				<h1> Unicorns </h1>
 				<div id="map"></div>
 					<script src="http://d3js.org/d3.v3.min.js"></script>
 					<script src="http://d3js.org/topojson.v1.min.js"></script>
 					<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.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="http://openstreetmap.org">OpenStreetMap</a>';
 								
 						L.tileLayer(
 				            'http://{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);
 						
 						//http://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>
diff --git a/unicorns.csv b/unicorns.csv
	<!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="http://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">

	<script src="https://code.jquery.com/jquery-2.0.0.js"></script>
	<style>
	#map {
	width: 960px;
	height: 500px;
	}
	#map g {
	stroke-width: 1px;
	}
	circle {
	fill: #ff6666;
	fill-opacity: .5;
	stroke: black;
	stroke-width: .1px;
	}
	circle:hover{
	cursor: pointer;
	}
	#countries {
	fill: #cde;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="row">
	<h1> Unicorns </h1>
	<div id="map"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.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="http://openstreetmap.org">OpenStreetMap</a>';

	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© ' + 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);

	//http://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>