junkwhinger/competition.csv

## competition.csv

          
            area
            competition

            
              종로구
              0.014057261

            
              중구
              0.016305876

            
              용산구
              0.005194476

            
              성동구
              0.003196639

            
              광진구
              0.003711292

            
              동대문구
              0.001992068

            
              중랑구
              0.001828583

            
              성북구
              0.00254072

            
              강북구
              0.002527748

            
              도봉구
              0.001471411

            
              노원구
              0.002073361

            
              은평구
              0.001867785

            
              서대문구
              0.003366204

            
              마포구
              0.006135281

            
              양천구
              0.002136133

            
              강서구
              0.002601028

            
              구로구
              0.002890274

            
              금천구
              0.003499211

            
              영등포구
              0.005707556

            
              동작구
              0.002380397

            
              관악구
              0.002012815

            
              서초구
              0.004787962

            
              강남구
              0.009785455

            
              송파구
              0.003786877

            
              강동구
              0.002383972

## index.html
<!DOCTYPE html>
<html>
  <head><h1>알바취업 경쟁률 - 구별 알바몬 포스팅 수 / 구별 20대 인구 수</h1></head>
    <meta charset="utf-8">
    <style>
        body {
        font: 10px sans-serif;
        }
        svg circle {
          fill: orange;
          opacity: .5;
          stroke: white;
        }
        svg circle:hover {
          fill: red;
          stroke: #333;
        }
        svg text {
          pointer-events: none;
        }
        svg .municipality {
          fill: #efefef;
          stroke: grey;
        }
        svg .municipality-label {
          fill: #bbb;
          font-size: 12px;
          font-weight: 300;
          text-anchor: middle;
        }
        svg #map text {
          color: #333;
          font-size: 15px;
          text-anchor: middle;
        }
        svg #places text {
          color: #777;
          font: 10px sans-serif;
          text-anchor: start;
        }
        #title {
            font-family: sans-serif;
        }
        #title p {
            font-size: 10pt;
        }

        div.tooltip {
            position: absolute;
            text-align: center;
            width: 150px;
            height: 20px;
            padding-top: 6px;
            font: 12px sans-serif;
            font-weight: bold;
            background: rgba(255,255,255,.8);
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>

  <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 = 800,
        height = 650;

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

    var map = svg.append("g").attr("id", "map"),
        places = svg.append("g").attr("id", "places");

    var color = d3.scale.linear().domain([0,100]).range(["blue","red"]);

    var projection = d3.geo.mercator()
        .center([126.9895, 37.5651])
        .scale(100000)
        .translate([width/2, height/2]);

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

    var div = d3.select("body").append("div")
          .attr("class", "tooltip")
          .style("opacity", 0);

    var csv_data;

    d3.csv("competition.csv", function(error, data){

      data.forEach(function(d) {
        d.area = d.area;
        d.freq = +d.competition;
      });

      csv_data = data

      color.domain(d3.extent(data, function(d) { return d.freq}))

      map.selectAll('path')
        .data(data)
        .style("fill", function(d,i){
          return color(d.freq)
        })
    });

    d3.json("simplemap.json", function(error, data) {
      var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
      map.selectAll('path')
          .data(features)
        .enter().append('path')
          .attr("class", "municipality")
          .attr('id', function(d) { console.log(); return 'municipality_' + d.properties.name })
          .attr('d', path)
          .style("fill", function(d,i) {
            area_name = d.properties.name
            for (i in csv_data) {
              csv_area = csv_data[i].area

              if (area_name == csv_area) {
                return color(csv_data[i].freq)
              }
            }
          })
          .on("mouseover", function(d,i) {
            area_name = d.properties.name
            var freq;
            for (i in csv_data) {
              csv_area = csv_data[i].area

              if (area_name == csv_area) {
                freq  = csv_data[i].freq
              }
            }


              div.transition()
                            .duration(200)
                            .style("opacity", .9);
                        div .html(area_name + ": 경쟁률 " + (100*freq).toLocaleString() + "%")
                            .style("left", (d3.event.pageX) + "px")
                            .style("top", (d3.event.pageY - 28) + "px");

          });

      map.selectAll('text')
          .data(features)
        .enter().append("text")
          .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
          .attr("dy", ".35em")
          .attr("class", "municipality-label")
          .attr("font-size", "15px")
          .text(function(d) { return d.properties.name; })

    });


    </script>
  </body>
</html>

## simplemap.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              simplemap.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.
	area	competition
	종로구	0.014057261
	중구	0.016305876
	용산구	0.005194476
	성동구	0.003196639
	광진구	0.003711292
	동대문구	0.001992068
	중랑구	0.001828583
	성북구	0.00254072
	강북구	0.002527748
	도봉구	0.001471411
	노원구	0.002073361
	은평구	0.001867785
	서대문구	0.003366204
	마포구	0.006135281
	양천구	0.002136133
	강서구	0.002601028
	구로구	0.002890274
	금천구	0.003499211
	영등포구	0.005707556
	동작구	0.002380397
	관악구	0.002012815
	서초구	0.004787962
	강남구	0.009785455
	송파구	0.003786877
	강동구	0.002383972
	<!DOCTYPE html>
	<html>
	<head><h1>알바취업 경쟁률 - 구별 알바몬 포스팅 수 / 구별 20대 인구 수</h1></head>
	<meta charset="utf-8">
	<style>
	body {
	font: 10px sans-serif;
	}
	svg circle {
	fill: orange;
	opacity: .5;
	stroke: white;
	}
	svg circle:hover {
	fill: red;
	stroke: #333;
	}
	svg text {
	pointer-events: none;
	}
	svg .municipality {
	fill: #efefef;
	stroke: grey;
	}
	svg .municipality-label {
	fill: #bbb;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	}
	svg #map text {
	color: #333;
	font-size: 15px;
	text-anchor: middle;
	}
	svg #places text {
	color: #777;
	font: 10px sans-serif;
	text-anchor: start;
	}
	#title {
	font-family: sans-serif;
	}
	#title p {
	font-size: 10pt;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 150px;
	height: 20px;
	padding-top: 6px;
	font: 12px sans-serif;
	font-weight: bold;
	background: rgba(255,255,255,.8);
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}
	</style>

	<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 = 800,
	height = 650;

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

	var map = svg.append("g").attr("id", "map"),
	places = svg.append("g").attr("id", "places");

	var color = d3.scale.linear().domain([0,100]).range(["blue","red"]);

	var projection = d3.geo.mercator()
	.center([126.9895, 37.5651])
	.scale(100000)
	.translate([width/2, height/2]);

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

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var csv_data;

	d3.csv("competition.csv", function(error, data){

	data.forEach(function(d) {
	d.area = d.area;
	d.freq = +d.competition;
	});

	csv_data = data

	color.domain(d3.extent(data, function(d) { return d.freq}))

	map.selectAll('path')
	.data(data)
	.style("fill", function(d,i){
	return color(d.freq)
	})
	});

	d3.json("simplemap.json", function(error, data) {
	var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
	map.selectAll('path')
	.data(features)
	.enter().append('path')
	.attr("class", "municipality")
	.attr('id', function(d) { console.log(); return 'municipality_' + d.properties.name })
	.attr('d', path)
	.style("fill", function(d,i) {
	area_name = d.properties.name
	for (i in csv_data) {
	csv_area = csv_data[i].area

	if (area_name == csv_area) {
	return color(csv_data[i].freq)
	}
	}
	})
	.on("mouseover", function(d,i) {
	area_name = d.properties.name
	var freq;
	for (i in csv_data) {
	csv_area = csv_data[i].area

	if (area_name == csv_area) {
	freq = csv_data[i].freq
	}
	}


	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html(area_name + ": 경쟁률 " + (100*freq).toLocaleString() + "%")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");

	});

	map.selectAll('text')
	.data(features)
	.enter().append("text")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.attr("class", "municipality-label")
	.attr("font-size", "15px")
	.text(function(d) { return d.properties.name; })

	});




	</script>
	</body>
	</html>