D3 Examples - Swiss Municipality Coordinates

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
th {
  text-align: left;
}
​
.wrap {
  height: 500px;
  overflow-y: auto;
}
​
</style>
<body>
<div class="wrap"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var table = d3.select('.wrap').append('table');
​
table.append('thead').append('tr').selectAll('th')
  .data(['BFS-Nr.', 'Name', 'Longitude', 'Latitude'])
.enter().append('th')
  .text(String);
​
var tbody = table.append('tbody');
​
d3.json("ch-municipalities.json", function(error, municipalities) {
  var features = topojson.feature(municipalities, municipalities.objects.municipalities).features;
​
  var tr = tbody.selectAll('tr')
    .data(features)
  .enter().append('tr');
​
  tr.selectAll('td')
    .data(function(d) {
      var p = d3.geo.centroid(d);
      return [d.id, d.properties.name, p[0], p[1]];
    })
  .enter().append('td')
    .text(String); 
});
​
</script>
    