de.json

## de.json

      
          Raw
        
        
              de.json
            
          
      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>
<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>

## script.js
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; });
});


## style.css
.subunit { fill: #ddc; }

.place-label {
  fill: #black;
  fill-opacity: 1;
  font-size: 10px;
  font-weight: 300;
  text-anchor: left;