Skip to content

Instantly share code, notes, and snippets.

@junkwhinger
Created August 7, 2015 07:30
Show Gist options
  • Save junkwhinger/15f5bc763141ee0e5778 to your computer and use it in GitHub Desktop.
Save junkwhinger/15f5bc763141ee0e5778 to your computer and use it in GitHub Desktop.
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>
Display the source blob
Display the rendered blob
Raw
{"type":"Topology","transform":{"scale":[0.00006247075827918093,0.00005151814945568312],"translate":[126.76700465024426,37.42574929824175]},"objects":{"seoul_municipalities_geo":{"type":"GeometryCollection","geometries":[{"arcs":[[0,1,2]],"type":"Polygon","properties":{"code":"11250","name":"강동구","name_eng":"Gangdong-gu","base_year":"2013"}},{"arcs":[[3,-2,4,5]],"type":"Polygon","properties":{"code":"11240","name":"송파구","name_eng":"Songpa-gu","base_year":"2013"}},{"arcs":[[6,-6,7,8,9,10]],"type":"Polygon","properties":{"code":"11230","name":"강남구","name_eng":"Gangnam-gu","base_year":"2013"}},{"arcs":[[-9,11,12,13,14]],"type":"Polygon","properties":{"code":"11220","name":"서초구","name_eng":"Seocho-gu","base_year":"2013"}},{"arcs":[[-13,15,16,17,18]],"type":"Polygon","properties":{"code":"11210","name":"관악구","name_eng":"Gwanak-gu","base_year":"2013"}},{"arcs":[[-14,-19,19,20]],"type":"Polygon","properties":{"code":"11200","name":"동작구","name_eng":"Dongjak-gu","base_year":"2013"}},{"arcs":[[21,22,-20,23,24,25]],"type":"Polygon","properties":{"code":"11190","name":"영등포구","name_eng":"Yeongdeungpo-gu","base_year":"2013"}},{"arcs":[[-17,26,27]],"type":"Polygon","properties":{"code":"11180","name":"금천구","name_eng":"Geumcheon-gu","base_year":"2013"}},{"arcs":[[28,-24,-18,-28,29]],"type":"Polygon","properties":{"code":"11170","name":"구로구","name_eng":"Guro-gu","base_year":"2013"}},{"arcs":[[30,-26,31,32]],"type":"Polygon","properties":{"code":"11160","name":"강서구","name_eng":"Gangseo-gu","base_year":"2013"}},{"arcs":[[-32,-25,-29,33]],"type":"Polygon","properties":{"code":"11150","name":"양천구","name_eng":"Yangcheon-gu","base_year":"2013"}},{"arcs":[[34,35,36,-22,-31,37,38]],"type":"Polygon","properties":{"code":"11140","name":"마포구","name_eng":"Mapo-gu","base_year":"2013"}},{"arcs":[[39,40,-35,41]],"type":"Polygon","properties":{"code":"11130","name":"서대문구","name_eng":"Seodaemun-gu","base_year":"2013"}},{"arcs":[[42,-42,-39,43]],"type":"Polygon","properties":{"code":"11120","name":"은평구","name_eng":"Eunpyeong-gu","base_year":"2013"}},{"arcs":[[44,45,46,47,48]],"type":"Polygon","properties":{"code":"11110","name":"노원구","name_eng":"Nowon-gu","base_year":"2013"}},{"arcs":[[-48,49,50]],"type":"Polygon","properties":{"code":"11100","name":"도봉구","name_eng":"Dobong-gu","base_year":"2013"}},{"arcs":[[-50,-47,51,52]],"type":"Polygon","properties":{"code":"11090","name":"강북구","name_eng":"Gangbuk-gu","base_year":"2013"}},{"arcs":[[53,-52,-46,54,55,56]],"type":"Polygon","properties":{"code":"11080","name":"성북구","name_eng":"Seongbuk-gu","base_year":"2013"}},{"arcs":[[-45,57,58,59,-55]],"type":"Polygon","properties":{"code":"11070","name":"중랑구","name_eng":"Jungnang-gu","base_year":"2013"}},{"arcs":[[-56,-60,60,61,62]],"type":"Polygon","properties":{"code":"11060","name":"동대문구","name_eng":"Dongdaemun-gu","base_year":"2013"}},{"arcs":[[-59,63,-3,-4,-7,64,-61]],"type":"Polygon","properties":{"code":"11050","name":"광진구","name_eng":"Gwangjin-gu","base_year":"2013"}},{"arcs":[[-62,-65,-11,65,66]],"type":"Polygon","properties":{"code":"11040","name":"성동구","name_eng":"Seongdong-gu","base_year":"2013"}},{"arcs":[[-66,-10,-15,-21,-23,-37,67]],"type":"Polygon","properties":{"code":"11030","name":"용산구","name_eng":"Yongsan-gu","base_year":"2013"}},{"arcs":[[-67,-68,-36,-41,68]],"type":"Polygon","properties":{"code":"11020","name":"중구","name_eng":"Jung-gu","base_year":"2013"}},{"arcs":[[69,-57,-63,-69,-40,-43]],"type":"Polygon","properties":{"code":"11010","name":"종로구","name_eng":"Jongno-gu","base_year":"2013"}}]}},"arcs":[[[5574,2558],[57,-6],[43,51],[46,31],[186,82],[214,63],[93,39],[187,113],[57,-6],[91,7],[48,22],[-25,-67],[11,-58],[28,-42],[21,-58],[7,-68],[38,-91],[-9,-157],[28,-23],[-7,-70],[10,-52],[-29,-3],[-39,27],[-56,-27],[-52,7],[-98,-26],[-48,15],[-154,-214],[-5,-91],[-62,-72],[-27,-69],[-31,-1],[-17,-50],[-2,-48]],[[6078,1716],[-22,9],[-386,207],[21,43],[45,160],[-76,46],[-143,50]],[[5517,2231],[40,79],[30,112],[0,102],[-13,34]],[[4835,1874],[95,-27],[75,-3],[108,17],[127,46],[104,16],[64,124],[109,184]],[[6078,1716],[0,-27],[-33,-24],[-22,-39],[-19,-72],[19,-61],[65,-38],[40,-5],[39,24],[28,-26],[110,-29],[42,-27],[-24,-67],[3,-46],[-29,-75],[-23,-32],[-80,-25],[-40,-143],[1,-36],[-47,-35],[-71,-2],[-48,-60],[-77,30],[-56,8],[4,-71],[71,-48],[-44,-26],[-63,0],[-57,31],[0,-48],[-46,-36]],[[5721,711],[0,40],[-28,61],[-142,234],[10,21],[-52,97],[-54,56],[-55,41],[-88,45],[-294,93],[-64,15],[-73,71],[-43,290],[-10,18],[7,81]],[[4669,1952],[166,-78]],[[5721,711],[-77,-59],[-12,-69],[-56,28],[-19,30],[-92,19],[-45,-57],[-84,-16],[-31,51]],[[5305,638],[-21,43],[-107,91],[-61,88],[-3,51],[-98,-14],[-68,-37],[-21,38],[-39,7],[-15,-25],[-108,-20],[-14,-76],[-78,-10],[-47,6],[-141,166],[-59,161],[-116,-20],[-40,97],[-177,451],[-36,150],[-19,46],[-84,96]],[[3953,1927],[145,142]],[[4098,2069],[63,49],[80,23],[258,-123],[16,33],[34,-32],[120,-67]],[[5305,638],[-27,-51],[8,-44],[-23,-8],[-17,-47],[-29,-17],[-39,-71],[0,-66],[-68,-34],[-29,-55],[-121,24],[-50,-12],[5,-35],[42,-23],[-10,-33],[-39,-22],[-14,-73],[10,-25],[-72,-16],[-17,-21],[-74,21],[-51,1],[-92,-31],[-36,34],[-38,10],[-18,52],[-105,97],[-64,13],[-7,39],[45,69],[-11,32],[4,58],[-26,43],[15,59],[-6,39],[-30,30],[-19,64],[17,46],[-55,37],[-83,-141],[-89,-45],[-70,-16],[-82,1],[-32,38],[-44,94],[-16,8],[-30,90],[-87,2],[-27,-12],[15,-54],[-6,-34],[-58,-15],[-74,-64]],[[3581,574],[-18,44],[11,100],[-21,45],[-37,36],[-32,59],[-16,76]],[[3468,934],[22,382],[34,71],[-62,44],[-14,34],[-3,157]],[[3445,1622],[38,27],[78,3],[32,-18],[139,77],[91,58],[38,37],[32,63],[60,58]],[[3581,574],[-94,-27],[-30,-72],[-74,-50],[-36,-55],[-47,-2],[-106,-38],[-6,-65],[-15,-22],[-60,-6],[-15,-24],[-84,0],[-127,-38],[-47,0],[-46,-31],[-19,28],[3,56],[-46,57],[-73,48],[0,47],[-36,40]],[[2623,420],[-89,82],[-13,45],[-90,20],[-34,-1],[-5,74],[-24,47],[15,26],[-34,25],[-55,117],[40,20],[20,65],[-40,24],[4,53],[-145,-32],[-19,20]],[[2154,1005],[60,90]],[[2214,1095],[44,0],[116,43],[62,43],[115,11],[37,81],[18,17],[59,-34],[51,-4],[28,-17],[85,0],[88,36],[76,-33],[32,-26],[45,11],[72,35],[-6,-49],[24,-70],[-16,-73],[147,-157],[103,23],[74,2]],[[2214,1095],[149,222],[115,25],[23,85],[68,206],[27,6],[-17,60],[103,-8],[152,34],[135,51]],[[2969,1776],[49,-49],[63,-43],[116,-49],[248,-13]],[[1998,2361],[176,-117],[88,-42],[368,-98],[88,-14],[142,-132]],[[2860,1958],[50,-46],[20,-67],[39,-69]],[[2214,1095],[-43,13],[-64,66],[-45,149],[-5,125],[7,84],[-55,79],[-175,101]],[[1834,1712],[5,106],[11,59],[20,21],[84,45],[24,40],[25,-6],[24,53],[-4,52],[-64,147],[-18,4]],[[1941,2233],[-14,53],[71,75]],[[2623,420],[-85,-70],[-38,-48],[-19,-55],[-31,-27],[-58,3],[-48,-48],[-42,-73],[-95,6],[-1,35],[-53,43],[-11,23],[4,74],[-12,29],[-42,21],[7,51],[-31,83],[-24,-14],[-50,17],[-7,47],[-45,23],[-1,59],[40,59],[-140,200],[-52,93],[-52,138],[21,14]],[[1758,1103],[63,23],[32,-12],[84,-66],[51,-57],[91,-21],[67,8],[8,27]],[[958,1548],[70,-2],[47,-59],[70,-52],[67,29],[-9,30],[76,3],[6,46],[56,15],[23,25],[44,9],[43,-26],[42,14],[31,-63],[37,0],[12,-28],[43,6],[50,-14],[52,11],[20,60],[80,112],[16,48]],[[1758,1103],[39,50],[-19,21],[-49,-14],[0,33],[-83,73],[-47,-48],[-57,-29],[-57,-76],[-41,-13],[-22,-45],[-30,-25],[-77,9],[-18,-22],[-6,-130],[-98,28],[-64,-7],[-58,43],[-41,-25],[-76,4],[-39,-14],[-38,43],[4,73],[-10,48],[11,31],[56,39],[-13,42],[-78,31],[-55,33],[-27,56],[6,37],[41,-10],[50,24],[19,49],[26,15],[22,73],[-6,38],[35,10]],[[1486,2836],[-5,-69],[16,-29],[126,-72],[185,-155],[190,-150]],[[1941,2233],[-16,0],[-71,83],[-108,-18],[-53,14],[-102,72],[-34,-133],[25,-69],[-5,-84],[9,-133],[-242,-37],[-134,-26],[-97,193],[10,24],[-31,80],[-43,-2],[-10,49],[-28,22],[-20,-68],[-75,-23]],[[916,2177],[-120,-1],[-68,19],[-17,29],[-96,-5],[-57,-47],[-15,-51],[-65,-39],[-17,70],[18,40],[-49,7],[0,39],[-50,12],[-31,36],[-109,-1],[-71,51],[-69,-4],[-56,90],[-44,45],[60,2],[11,27],[118,94],[1,42],[-35,62],[51,-6],[42,22],[36,41],[-12,31],[16,36],[108,74],[59,-4],[-3,60],[10,50],[34,3],[47,99],[31,15],[-25,42],[3,34],[-29,55],[-9,53],[22,50],[24,5],[11,54],[20,10],[59,-18],[169,-181],[70,-69],[102,-48],[386,-247],[109,-19]],[[958,1548],[-12,45],[9,50],[-22,58],[38,69],[-5,60],[51,75],[-18,57],[-27,5],[-61,95],[5,115]],[[2212,2880],[-24,-28],[51,-40],[240,-130],[95,-28],[41,-37],[-25,-46],[-1,-42],[164,-72],[67,26],[256,20],[26,-16],[45,42]],[[3147,2529],[26,-47],[-23,-21],[11,-74]],[[3161,2387],[25,-36],[-32,-20],[-28,-45],[-27,-17],[-21,-71],[-94,-107],[-100,-26],[-24,-107]],[[1486,2836],[2,19],[62,4],[28,16],[33,-23],[39,37],[44,7],[82,36],[20,56],[-7,32],[37,48],[21,59],[31,25]],[[1878,3152],[115,-119],[61,-50],[33,-15],[46,-61],[56,-46],[23,19]],[[2969,3481],[37,-25],[14,-38],[-13,-82],[21,-36],[49,-6],[-13,-60],[32,-71],[1,-29],[-27,-103],[48,-43],[-62,-34],[-36,-36],[209,-251]],[[3229,2667],[48,-76],[-44,-14],[-52,-39],[-34,-9]],[[2212,2880],[151,177],[58,-9],[-5,-47],[104,17],[25,62],[35,-1],[33,24],[-4,40],[17,45],[75,70],[113,44],[13,87],[14,33],[41,0],[34,59],[53,0]],[[3312,3955],[-41,-40],[-155,-34],[-45,-60],[-73,-11],[-6,-63],[-17,-52],[-22,-23],[16,-31],[10,-79],[-20,-63],[10,-18]],[[1878,3152],[45,56],[36,-1],[-30,-52],[30,-48],[66,-3],[29,14],[60,-11],[46,24],[-14,55],[46,46],[-12,44],[6,40],[-19,73],[29,13],[-4,120],[-15,54],[40,117],[27,9],[35,51],[-14,42],[37,41],[6,44],[-41,79],[69,66],[-10,54],[24,45],[12,64],[-77,40],[11,22],[89,-54],[118,16],[66,37],[56,49],[90,12],[40,26],[54,91],[52,30],[59,15],[6,-30],[57,-47],[50,6],[38,-51],[14,-67],[40,-17],[32,-93],[37,-9],[70,-85],[-1,-42],[49,-82]],[[5456,3733],[-68,-20],[-27,-33],[-58,-20],[-113,53],[-52,8],[-76,-23],[-156,-67]],[[4906,3631],[-54,-1],[-46,-27],[-50,4],[-125,113],[-67,82]],[[4564,3802],[-34,49],[-103,84]],[[4427,3935],[40,42],[17,67],[82,154],[77,-79],[15,102],[-26,96],[-3,93],[-40,94],[-4,60],[-40,105],[5,79],[22,83],[23,143],[-19,43]],[[4576,5017],[62,44],[35,6],[76,-16],[57,21],[68,88],[57,2],[70,37],[71,0],[41,-46],[31,-72],[139,-22],[22,-66],[-58,-81],[-14,-47],[29,-49],[14,-60],[17,-15],[6,-50],[-29,-76],[36,-86],[-10,-45],[-150,-78],[104,-13],[19,-40],[-28,-56],[39,-84],[54,-9],[39,11],[120,-20],[63,-86],[6,-97],[-22,-90],[-92,-71],[0,-33],[-28,-45],[36,-40]],[[4427,3935],[-48,51],[-24,55],[-39,22],[-30,73],[-84,67],[-47,47],[-68,31],[-74,0],[-38,26],[-11,35],[22,132],[20,50],[8,99],[46,63],[-30,53],[-45,52],[-31,77],[-53,8],[-5,96]],[[3896,4972],[10,49],[-13,37],[13,109],[49,68],[38,1],[25,54],[55,6],[44,-34],[45,-4],[51,22],[18,-30],[8,-55],[24,-64],[19,-21],[55,8],[94,61],[21,-31],[42,-26],[53,30],[29,-135]],[[4564,3802],[-52,-37],[-45,-74],[-65,-59],[-49,-61],[-103,-65],[-3,61],[-61,7],[-67,-27],[-47,48],[-72,36],[-65,16],[-36,41],[-16,48],[6,56],[-126,36],[-55,65],[-40,17],[-14,40],[-30,-1],[-91,67],[-16,22]],[[3517,4038],[25,71],[-47,65],[28,47],[-21,74],[-40,48],[-25,51],[5,33],[81,52],[52,88],[74,23],[14,56],[6,84],[-18,105],[-20,35],[34,17],[65,68],[90,25],[76,-8]],[[3364,3937],[36,42],[67,23],[50,36]],[[4906,3631],[5,-171]],[[4911,3460],[-20,49],[-30,0],[3,-48],[-53,-26],[-53,-7],[-48,-80],[-28,10],[-86,-31],[-28,23],[-42,-94],[-58,0],[-55,-21],[-24,-76],[-43,-27],[-117,-146],[-95,-84]],[[4134,2902],[-21,16],[-57,-6],[-30,64],[-28,7],[-93,-34],[-29,31],[-3,63],[-15,31],[-56,42],[-24,64],[-84,-3],[-21,-19],[-48,2],[-78,23],[-42,26],[-30,38],[-7,64],[54,6],[45,35],[-29,115],[17,66],[-5,80],[-62,39],[-31,118],[-27,35],[6,90],[-46,-7],[-26,49]],[[5456,3733],[90,-4],[91,-56],[-6,-31],[15,-87],[-15,-54],[26,-25],[-4,-59],[-67,-90],[3,-18],[69,-78],[-8,-19],[-72,-14],[-45,-79],[-19,-89],[-127,-16],[22,-40],[-2,-67],[-26,-50],[-2,-42]],[[5379,2815],[-23,-20],[-133,-58],[-124,35],[-78,10]],[[5021,2782],[-6,119],[-19,65],[-93,144],[-28,144],[10,39],[38,57],[4,32],[-16,78]],[[5021,2782],[-103,-230]],[[4918,2552],[-22,11],[-182,32],[-19,9],[-164,149],[-92,51],[-68,-2],[-84,-50],[-48,-8],[-102,35]],[[4137,2779],[-3,123]],[[5379,2815],[52,-51],[-13,-25],[-22,-141],[-13,-46],[151,-4],[40,10]],[[4669,1952],[165,350],[109,239],[-25,11]],[[4098,2069],[-98,73],[-85,13],[-18,44],[4,42]],[[3901,2241],[16,79],[33,9],[82,94],[10,51],[36,30],[51,6],[14,64],[41,36],[7,38],[-50,4],[-4,127]],[[3161,2387],[54,50],[103,-4],[69,-15],[11,36],[54,-30],[51,-8],[27,14],[38,-44],[40,-1],[80,-81],[52,52],[66,-6],[25,15],[10,-82],[39,-46],[21,4]],[[3229,2667],[39,44],[62,19],[78,1],[178,-22],[124,12],[79,17],[227,4],[74,37],[47,0]],[[3312,3955],[52,-18]]]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment