tmayer/.gitignore

## .gitignore
.DS_Store

## 3_mittel.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              3_mittel.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>German dialects visualization</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			#map {
				position: absolute;
				top: 10px;
				left: 10px;
			}
		</style>
	</head>
	<body>
	<div id="map"></div>
		<script type="text/javascript">

			//Width and height
			var w = 500;
			var h = 500;


			//Define map projection
			var projection = d3.geo.mercator()
                  .center([5, 55.2])
								   .translate([w/100, h/1000])
								   .scale([2200]);

			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

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

			//Load in GeoJSON data
			d3.json("3_mittel.geojson", function(json) {

			//Bind data and create one path per GeoJSON feature
			svg.selectAll("path")
				 .data(json.features)
				 .enter()
				 .append("path")
				 .attr("d", path)
				 .style("fill", "#eee")
				 .style("stroke","#bbb")
				 .style("stroke-width",0.2)
				 .append("title")
				 .text(function(d,i){
				 	console.log(d);
				 	return d.properties.NAME_2;
				 })
				 ;


			});


		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>German dialects visualization</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	#map {
	position: absolute;
	top: 10px;
	left: 10px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript">

	//Width and height
	var w = 500;
	var h = 500;


	//Define map projection
	var projection = d3.geo.mercator()
	.center([5, 55.2])
	.translate([w/100, h/1000])
	.scale([2200]);

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

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

	//Load in GeoJSON data
	d3.json("3_mittel.geojson", function(json) {

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", "#eee")
	.style("stroke","#bbb")
	.style("stroke-width",0.2)
	.append("title")
	.text(function(d,i){
	console.log(d);
	return d.properties.NAME_2;
	})
	;


	});



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