Skip to content

Instantly share code, notes, and snippets.

@tmayer tmayer/.gitignore
Last active Aug 29, 2015

Embed
What would you like to do?
German dialects visualization
.DS_Store
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
You can’t perform that action at this time.