cornchz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Description


Level: Provinces (시도)
Data format: TopoJSON
Data source: GADM


The data download script can be found here.

Author

Lucy Park, Team POPONG

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .province {
        fill: #eee;
        stroke: #999;
    }
    text {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 10px;
        text-anchor: middle;
    }
  </style>
</head>
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>

  <script>

    var w = 800, h = 800;

    var proj = d3.geo.mercator()
      .center([128.0, 35.9])
      .scale(6500)
      .translate([w/2, h/2]);

    var path = d3.geo.path().projection(proj);

    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);

    d3.json("skorea-provinces-topo.json", function(error, kor) {

      var provinces = topojson.object(kor, kor.objects['skorea-provinces-geo']);

      svg.append("path")
          .datum(provinces)
          .attr("class", "province")
          .attr("d", path);

      svg.selectAll("text")
          .data(provinces.geometries)
        .enter().append("text")
          .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
          .attr("dy", ".35em")
          .text(function(d) { return d.properties.NAME_1; });

    });
  </script>
</body>
</html>

## skorea-provinces-topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              skorea-provinces-topo.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.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	.province {
	fill: #eee;
	stroke: #999;
	}
	text {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	text-anchor: middle;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>

	<script>

	var w = 800, h = 800;

	var proj = d3.geo.mercator()
	.center([128.0, 35.9])
	.scale(6500)
	.translate([w/2, h/2]);

	var path = d3.geo.path().projection(proj);

	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	d3.json("skorea-provinces-topo.json", function(error, kor) {

	var provinces = topojson.object(kor, kor.objects['skorea-provinces-geo']);

	svg.append("path")
	.datum(provinces)
	.attr("class", "province")
	.attr("d", path);

	svg.selectAll("text")
	.data(provinces.geometries)
	.enter().append("text")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.text(function(d) { return d.properties.NAME_1; });

	});
	</script>
	</body>
	</html>