junkwhinger/area_freq.csv

## area_freq.csv

          
            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

## 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>

## 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	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>