e9t/README.md

## README.md

      
    Raw
  

              README.md
            
          
    한국 지도 GeoJSON.

Author: Lucy Park
License: Apache v2


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        svg { background-color: lightskyblue; }
        svg text { pointer-events: none; }
        svg .province {
            fill: #fff;
            stroke: #eee;
        }
        svg .province.c11 { fill: #ddd; }
        svg .province.c21 { fill: #dcd; }
        svg .province.c22 { fill: #cdd; }
        svg .province.c23 { fill: #ccd; }
        svg .province.c24 { fill: #cdc; }
        svg .province.c25 { fill: #dcc; }
        svg .province.c26 { fill: #ddc; }
        svg .province:hover {
            fill: orange;
        }
        svg text {
            font-size: 10px;
        }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    var width = 960,
        height = 500;

    var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height);

    // to preserve layer order
    var map = svg.append("g").attr("id", "map"),
        points= svg.append("g").attr("id", "cities");

    var projection = d3.geo.mercator()
        .center([128, 35.9])
        .scale(4000)
        .translate([width/2, height/2]);

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

    // draw map
    d3.json("municipalities-geo-simple.json ", function(error, data) {
      if (error) return console.error(error);

      map.selectAll("path")
          .data(data.features).enter()
        .append("path")
          .attr("class", "province")
          .attr("class", function(d) { return "province c" + d.properties.code; })
          .attr("d", path);
    });

    // draw cities
    d3.csv("cities.csv", function(error, data) {
      points.selectAll(".place-label")
          .data(data)
        .enter().append("text")
          .attr("class", "place-label")
          .attr("transform", function(d) { console.log(projection([d.lon, d.lat])); return "translate(" + projection([d.lon, d.lat]) + ")"; })
          .attr("dy", ".35em")
          .text(function(d) { return d.name; });
    });
    </script>
  </body>
</html>

## municipalities-geo-simple.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              municipalities-geo-simple.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	svg { background-color: lightskyblue; }
	svg text { pointer-events: none; }
	svg .province {
	fill: #fff;
	stroke: #eee;
	}
	svg .province.c11 { fill: #ddd; }
	svg .province.c21 { fill: #dcd; }
	svg .province.c22 { fill: #cdd; }
	svg .province.c23 { fill: #ccd; }
	svg .province.c24 { fill: #cdc; }
	svg .province.c25 { fill: #dcc; }
	svg .province.c26 { fill: #ddc; }
	svg .province:hover {
	fill: orange;
	}
	svg text {
	font-size: 10px;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var width = 960,
	height = 500;

	var svg = d3.select("#chart").append("svg")
	.attr("width", width)
	.attr("height", height);

	// to preserve layer order
	var map = svg.append("g").attr("id", "map"),
	points= svg.append("g").attr("id", "cities");

	var projection = d3.geo.mercator()
	.center([128, 35.9])
	.scale(4000)
	.translate([width/2, height/2]);

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

	// draw map
	d3.json("municipalities-geo-simple.json ", function(error, data) {
	if (error) return console.error(error);

	map.selectAll("path")
	.data(data.features).enter()
	.append("path")
	.attr("class", "province")
	.attr("class", function(d) { return "province c" + d.properties.code; })
	.attr("d", path);
	});

	// draw cities
	d3.csv("cities.csv", function(error, data) {
	points.selectAll(".place-label")
	.data(data)
	.enter().append("text")
	.attr("class", "place-label")
	.attr("transform", function(d) { console.log(projection([d.lon, d.lat])); return "translate(" + projection([d.lon, d.lat]) + ")"; })
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });
	});
	</script>
	</body>
	</html>