Skip to content

Instantly share code, notes, and snippets.

@letanure
Forked from wangeleile/de.json
Created February 23, 2016 08:59
Show Gist options
  • Save letanure/7b11cb8c352a6bcc9642 to your computer and use it in GitHub Desktop.
Save letanure/7b11cb8c352a6bcc9642 to your computer and use it in GitHub Desktop.
Germany as Topo.json file
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<html>
<head>
<title>Schland Map Example</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var width = 960,
height = 1160;
var projection = d3.geo.albers()
.center([9, 50])
.rotate([0, 0])
.scale(1200 * 5)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("de.json", function(error, de) {
console.log(de);
svg.append("path")
.datum(topojson.object(de, de.objects.subunits))
.attr("class", function(d) { return "subunit"})
.attr("d", path);
svg.append("path")
.datum(topojson.object(de, de.objects.places))
.attr("d", path)
.attr("class", "place");
svg.selectAll(".place-label")
.data(topojson.object(de, de.objects.places).geometries)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
.attr("dx", "0.75em")
.text(function(d) { return d.properties.name; });
});
.subunit { fill: #ddc; }
.place-label {
fill: #black;
fill-opacity: 1;
font-size: 10px;
font-weight: 300;
text-anchor: left;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment