junkwhinger · August 7, 2015 07:30
diff --git a/competition.csv b/competition.csv
diff --git a/index.html b/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>
diff --git a/simplemap.json b/simplemap.json
	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>