e9t/README.md

## README.md

      
    Raw
  

              README.md
            
          
    우리나라 특별시와 광역시.

Author: Lucy Park
License: Apache v2


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        svg {
            background-color: #a8daf7;
        }
        svg text {
            pointer-events: none;
        }
        svg .province {
            fill: #efefef;
            stroke: #ddd;
        }
        svg .province.c11 { fill: #ccc; }
        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.c29 { fill: #ddc; }
        svg .province:hover {
            opacity: 0.8;
        }
        svg .region-label {
          fill: #777;
          font-size: 12px;
          font-weight: 300;
          text-anchor: middle;
        }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    var width = 960,
        height = 500;

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

    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);

    d3.json("provinces-topo-simple.json", function(error, data) {
      var features = topojson.feature(data, data.objects['provinces-geo']).features;
      map.selectAll('path')
          .data(features)
        .enter().append('path')
          .attr('class', function(d) { return 'province c' + d.properties.code })
          .attr('d', path)

      map.selectAll("text")
          .data(features.filter(function(d){ return d.properties.name.indexOf("도") === -1; }))
        .enter().append("text")
          .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
          .attr("dy", ".35em")
          .attr("class", "region-label")
          .text(function(d) { return d.properties.name; });
    });
    </script>
  </body>
</html>

## provinces-topo-simple.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              provinces-topo-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: #a8daf7;
	}
	svg text {
	pointer-events: none;
	}
	svg .province {
	fill: #efefef;
	stroke: #ddd;
	}
	svg .province.c11 { fill: #ccc; }
	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.c29 { fill: #ddc; }
	svg .province:hover {
	opacity: 0.8;
	}
	svg .region-label {
	fill: #777;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	var width = 960,
	height = 500;

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

	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);

	d3.json("provinces-topo-simple.json", function(error, data) {
	var features = topojson.feature(data, data.objects['provinces-geo']).features;
	map.selectAll('path')
	.data(features)
	.enter().append('path')
	.attr('class', function(d) { return 'province c' + d.properties.code })
	.attr('d', path)

	map.selectAll("text")
	.data(features.filter(function(d){ return d.properties.name.indexOf("도") === -1; }))
	.enter().append("text")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.attr("class", "region-label")
	.text(function(d) { return d.properties.name; });
	});
	</script>
	</body>
	</html>