tyranja/gist:6271027

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Loading GeoJSON data and generating SVG paths</title>
		<script type="text/javascript" src="../d3/d3.v3.js"></script>
		<style type="text/css">

		div.tooltip {
				position: absolute;
				text-align: center;
				width: 100px;
				padding: 5px;
				color: white;
				font: 14px sans-serif;
				background: #222;
				border: 0px;
				border-radius: 2px;
				pointer-events: none;
}
		</style>
	</head>
	<body>
		<script type="text/javascript">

			//Width and height
			var w = 1200;
			var h = 800;
			var color_germany = d3.scale.category10();     //builtin range of colors

			//Define default path generator
			var path = d3.geo.path()
			     .projection(d3.geo.mercator()
            .center([10.93, 52.21])
            .scale(16000)
            .translate([w/2, h/2]));

			var div = d3.select("body").append("div")
    			.attr("class", "tooltip")
    			.style("opacity", 0);

			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			//Load in GeoJSON data
			d3.json("country_germany_states.json", function(json) {

				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				  .data(json.features)
				  .enter()
				  .append("path")
				  .attr("d", path)
				  .on("mouseover", function(d) {
            		div
            				.transition()
                		.duration(200)
                		.style("opacity", .9);
            		div
            				.html(d.properties.NAME_1)
                		.style("left", (d3.event.pageX) + "px")
                		.style("top", (d3.event.pageY - 28) + "px");
            	})
        			.on("mouseout", function(d) {
            		div
            			.transition()
                	.duration(500)
                  .	style("opacity", 0);
        			})
				  .style("fill", function(d, i) { return color_germany(i); })
					.style("stroke", 'rgb(256,256,256)');

          d3.csv("berlin.csv", function(data) {

                svg.selectAll("circle")
                   .data(data)
                   .enter()
                   .append("circle")
                   .attr("cx", function(d) {
                     return projection([d.lon, d.lat])[0];
                   })
                   .attr("cy", function(d) {
                     return projection([d.lon, d.lat])[1];
                   })
                   .attr("r", 5)
                   .style("fill", "yellow")
                   .style("opacity", 0.75);
              });
        });


		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3: Loading GeoJSON data and generating SVG paths</title>
	<script type="text/javascript" src="../d3/d3.v3.js"></script>
	<style type="text/css">

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 100px;
	padding: 5px;
	color: white;
	font: 14px sans-serif;
	background: #222;
	border: 0px;
	border-radius: 2px;
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	//Width and height
	var w = 1200;
	var h = 800;
	var color_germany = d3.scale.category10(); //builtin range of colors

	//Define default path generator
	var path = d3.geo.path()
	.projection(d3.geo.mercator()
	.center([10.93, 52.21])
	.scale(16000)
	.translate([w/2, h/2]));

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Load in GeoJSON data
	d3.json("country_germany_states.json", function(json) {

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.on("mouseover", function(d) {
	div
	.transition()
	.duration(200)
	.style("opacity", .9);
	div
	.html(d.properties.NAME_1)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	div
	.transition()
	.duration(500)
	. style("opacity", 0);
	})
	.style("fill", function(d, i) { return color_germany(i); })
	.style("stroke", 'rgb(256,256,256)');

	d3.csv("berlin.csv", function(data) {

	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("r", 5)
	.style("fill", "yellow")
	.style("opacity", 0.75);
	});
	});


	</script>
	</body>
	</html>