junkwhinger · August 7, 2015 07:31
diff --git a/area_freq.csv b/area_freq.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head><h1>알바 공급 - 구별 알바몬 최근 3일 잡 포스팅 수(중복 제외)</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("area_freq.csv", function(error, data){

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

      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 + ": 총 " + (1*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	freq
	강남구	826
	마포구	362
	송파구	358
	종로구	327
	영등포구	315
	중구	290
	서초구	287
	광진구	221
	강서구	218
	관악구	191
	성북구	168
	구로구	166
	용산구	164
	노원구	162
	서대문구	156
	강동구	156
	동작구	153
	성동구	140
	양천구	140
	은평구	122
	금천구	122
	강북구	110
	동대문구	109
	중랑구	109
	도봉구	71
	<!DOCTYPE html>
	<html>
	<head><h1>알바 공급 - 구별 알바몬 최근 3일 잡 포스팅 수(중복 제외)</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("area_freq.csv", function(error, data){

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

	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 + ": 총 " + (1*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>