Skip to content

Instantly share code, notes, and snippets.

@tmayer
Last active Aug 29, 2015
Embed
What would you like to do?
German dialects visualization
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment