jstcki/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Extract and list Swiss municipality coordinates from TopoJSON.

  
## ch-municipalities.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ch-municipalities.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 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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
	<!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="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://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>