yoon-gu · August 14, 2016 17:16
diff --git a/.block b/.block
 license: mit
 height: 555
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 path {
  stroke-linejoin: round;
 }
 body { background-color: #1A1A1A; }
 .land {
  fill: #4C4C4C;
 }

 .states {
  fill: none;
  stroke: darkgray;
 }

 .no_l_1{ fill: #1B2876; }
 .no_l_2{ fill: #34A939; }
 .no_l_3{ fill: #FD5C09; }
 .no_l_4{ fill: #268BD5; }
 .no_l_5{ fill: #7411D9; }
 .no_l_6{ fill: #9E3B0B; }
 .no_l_7{ fill: #566112; }
 .no_l_8{ fill: #DB005B; }

 circle:hover {
  stroke: black;
  stroke-width: 2px;
 }


 svg .municipality-label {
  fill: white;
  font-size: 12px;
  font-weight: 300;
  text-anchor: middle;
  font-family: sans-serif;
 }
 </style>
 <body>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/queue.v1.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script>
 var popByName = d3.map();

 var width = 960,
    height = 550;

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

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

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

 var g = svg.append("g");

 var tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")
  .style("font-family", "sans-serif")
  .style("color", "white")
  .style("font-size", "11px");

 queue()
    .defer(d3.json, "/yoon-gu/raw/b051fd123385303a5c03f0e0a833516c/seoul_municipalities_topo.json")
    .defer(d3.csv, "/yoon-gu/raw/902efb6d5bd345e3837e035a3c0642b8/station_latlen.csv")
    .defer(d3.csv, "subway_in_out.csv", function(d){
        popByName.set(d.station, {"on":+d.on, "off":+d.off});
    })
    .await(ready);

 function ready(error, kor, stations, inout) {
  if (error) throw error;
  var features = topojson.feature(kor, kor.objects.seoul_municipalities_geo).features;
  g.selectAll("path")
        .data(features)
      .enter().append("path")
        .attr("class", "land")
        .attr("d", path)
        .attr("id", function(d) { return d.properties.name; });

  g.append("path")
      .datum(topojson.mesh(kor, kor.objects.seoul_municipalities_geo, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);

  g.selectAll('text')
      .data(features)
      .enter().append("text")
        .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .attr("class", "municipality-label")
        .text(function(d) { return d.properties.name; })
  
  var rscale = d3.scale.linear()
    .domain([1,110000])
    .range([3,30]);

  stations = stations.sort(function(x, y){
    if(popByName.get(x.name) && popByName.get(y.name)){
      return d3.descending(popByName.get(x.name).on, popByName.get(y.name).on);
    }
  });
  for (var i = 1; i <= 8; i++) {
    g.append("g")
      .selectAll("circle")
        .data(stations)
      .enter().append("circle")
        .filter(function(d) { return +d.no_line === i })
        .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
        .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
        .attr("r", function(d){
          if(popByName.get(d.name))
          {
            return rscale(popByName.get(d.name).on);
          }
          else
          {
            console.log(d.name);
            return 2;
          }
        })
        .attr("opacity", 0.2)
        .on("mouseover", function(d){
          tooltip.style("visibility", "visible")
          .text(d.name + " : " + (popByName.get(d.name).on / 10000).toFixed(2) + "만명");
          var g = d3.select(this).node().parentNode;
          d3.select(g)
          .attr("class", function(){ return "no_l_" + d.no_line; })
          .selectAll("circle").attr("opacity", 0.7);
        })
        .on("mousemove", function(){
          tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
        })
        .on("mouseout", function(){
          tooltip.style("visibility", "hidden");
          var g = d3.select(this).node().parentNode;
          d3.select(g).attr("class", "")
            .selectAll("circle").attr("opacity", 0.2);
        });
  }

 }
 </script>
diff --git a/subway_in_out.csv b/subway_in_out.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	stroke-linejoin: round;
	}
	body { background-color: #1A1A1A; }
	.land {
	fill: #4C4C4C;
	}

	.states {
	fill: none;
	stroke: darkgray;
	}

	.no_l_1{ fill: #1B2876; }
	.no_l_2{ fill: #34A939; }
	.no_l_3{ fill: #FD5C09; }
	.no_l_4{ fill: #268BD5; }
	.no_l_5{ fill: #7411D9; }
	.no_l_6{ fill: #9E3B0B; }
	.no_l_7{ fill: #566112; }
	.no_l_8{ fill: #DB005B; }

	circle:hover {
	stroke: black;
	stroke-width: 2px;
	}


	svg .municipality-label {
	fill: white;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	font-family: sans-serif;
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>
	var popByName = d3.map();

	var width = 960,
	height = 550;

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

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

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

	var g = svg.append("g");

	var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.style("font-family", "sans-serif")
	.style("color", "white")
	.style("font-size", "11px");

	queue()
	.defer(d3.json, "/yoon-gu/raw/b051fd123385303a5c03f0e0a833516c/seoul_municipalities_topo.json")
	.defer(d3.csv, "/yoon-gu/raw/902efb6d5bd345e3837e035a3c0642b8/station_latlen.csv")
	.defer(d3.csv, "subway_in_out.csv", function(d){
	popByName.set(d.station, {"on":+d.on, "off":+d.off});
	})
	.await(ready);

	function ready(error, kor, stations, inout) {
	if (error) throw error;
	var features = topojson.feature(kor, kor.objects.seoul_municipalities_geo).features;
	g.selectAll("path")
	.data(features)
	.enter().append("path")
	.attr("class", "land")
	.attr("d", path)
	.attr("id", function(d) { return d.properties.name; });

	g.append("path")
	.datum(topojson.mesh(kor, kor.objects.seoul_municipalities_geo, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("d", path);

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

	var rscale = d3.scale.linear()
	.domain([1,110000])
	.range([3,30]);

	stations = stations.sort(function(x, y){
	if(popByName.get(x.name) && popByName.get(y.name)){
	return d3.descending(popByName.get(x.name).on, popByName.get(y.name).on);
	}
	});
	for (var i = 1; i <= 8; i++) {
	g.append("g")
	.selectAll("circle")
	.data(stations)
	.enter().append("circle")
	.filter(function(d) { return +d.no_line === i })
	.attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
	.attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
	.attr("r", function(d){
	if(popByName.get(d.name))
	{
	return rscale(popByName.get(d.name).on);
	}
	else
	{
	console.log(d.name);
	return 2;
	}
	})
	.attr("opacity", 0.2)
	.on("mouseover", function(d){
	tooltip.style("visibility", "visible")
	.text(d.name + " : " + (popByName.get(d.name).on / 10000).toFixed(2) + "만명");
	var g = d3.select(this).node().parentNode;
	d3.select(g)
	.attr("class", function(){ return "no_l_" + d.no_line; })
	.selectAll("circle").attr("opacity", 0.7);
	})
	.on("mousemove", function(){
	tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
	})
	.on("mouseout", function(){
	tooltip.style("visibility", "hidden");
	var g = d3.select(this).node().parentNode;
	d3.select(g).attr("class", "")
	.selectAll("circle").attr("opacity", 0.2);
	});
	}

	}
	</script>
station	on	off
가락시장역	8889.77671233	8160.09041096
가락시장역(8)	6777.39452055	7728.16438356
가산디지털단지역(7)	40453.1315068	41249.8328767
강남역	105287.005479	108334.380822
강남구청역	17896.4383562	19505.6082192
강동역	20198.6410959	16776.6246575
강동구청역	10779.0931507	11039.490411
강변역	53287.7589041	52886.060274
개롱역	7124.6630137	7047.04657534
개화산역	6455.69589041	5927.36438356
거여역	7772.26849315	7221.29863014
건대입구역	44539.8424658	48846.7424658
건대입구역(7)	18613.0219178	19681.9342466
경복궁역	23835.2479452	25347.0753425
경찰병원역	7298.10821918	7135.96575342
고덕역	8886.05205479	8839.38356164
고려대역	10381.4547945	10058.6630137
고속터미널역	59361.3917808	63614.769863
고속터미널역(7)	20478.8575342	18449.8684932
공덕역(5)	14116.4739726	14720.3808219
공덕역(6)	17250.2958904	17266.7123288
공릉역	13609.9780822	13411.1753425
광나루역	15932.0383562	14221.0383562
광명사거리역	28856.0438356	27515.3643836
광화문역	36053.1369863	37893.7671233
광흥창역	9593.25479452	9234.3260274
교대역	27254.3993151	27788.2691781
구로디지털단지역	63233.530137	63405.1520548
구산역	7991.88493151	5992.01369863
구의역	24160.6534247	23695.830137
구파발역	17127.0219178	13583.8246575
군자역(5)	10694.0794521	11813.4520548
군자역(7)	15299.3835616	11419.7123288
굴포천역	7813.68767123	7943.07671233
굽은다리역	10258.9315068	9573.61917808
금호역	8303.74931507	7580.94383562
길동역	7797.10958904	8172.82191781
길음역	28773.1780822	27477.3849315
김포공항역(5)	8327.41369863	7591.70410959
까치산역(5)	30313.2109589	28636.8082192
까치울역	5287.76438356	4724.73424658
낙성대역	31419.5369863	30017.5972603
남구로역	16801.3780822	17451.7917808
남부터미널역	37355.1972603	38849.5671233
남성역	11953.6575342	10973.9123288
남태령역	1345.40958904	1063.10410959
남한산성입구역	15128.969863	13843.5479452
내방역	14407.6465753	14831.369863
노원역	24681.0328767	27488.7465753
노원역(7)	22461.1315068	24424.0547945
녹번역	16176.860274	13889.8547945
녹사평역	6575.76164384	7269.25205479
논현역	20600.3753425	22590.0246575
단대오거리역	13212.2575342	12116.8246575
답십리역	16974.0575342	15800.169863
당고개역	13706.4205479	12807.5109589
당산역	24109.9273973	25965.2356164
대림역	32333.8356164	33314.9684932
대림역(7)	11376.4246575	11219.5835616
대청역	11575.6753425	10189.2520548
대치역	12312.9589041	11487.8
대흥역	9008.36986301	9506.2630137
도곡역	8261.26438356	7161.3369863
도림천역	929.321917808	1046.33287671
도봉산역(7)	12524.569863	11523.9178082
독립문역	7844.41643836	7979.07808219
독바위역	2961.95890411	3301.88493151
돌곶이역	9740.77808219	8845.45753425
동대문역	26393.3080808	26879.5328283
동대문역사문화공원역	19447.9321918	20164.659589
동대문역사문화공원5역	2874.51232877	3487.66027397
동대입구역	11823.6452055	13397.4041096
동묘앞역	9258.01780822	9775.97671233
동묘앞역(6)	9655.34246575	9585.31780822
동작역	2649.51506849	2749.28767123
둔촌동역	13749.8410959	13759.6027397
디지털미디어시티역(6)	15817.4438356	16995.8273973
뚝섬역	15178.1191781	15800.209589
뚝섬유원지역	9902.4109589	9485.07671233
마곡역	2098.59452055	1790.19178082
마들역	12582.6410959	11390.8821918
마장역	6439.98082192	6263.17260274
마천역	6442.71232877	6526.23561644
마포역	14227.9561644	14856.0767123
마포구청역	14213.5890411	12261.2465753
망원역	11894.9205479	12481.7041096
매봉역	11753.260274	11070.809589
먹골역	10783.1945205	10340.8493151
면목역	16468.690411	15856.5753425
명동역	42065.9767123	46065.1410959
명일역	10125.5972603	9949.91506849
모란역(8)	4961.28219178	3702.71780822
목동역	19872.8082192	20703.1780822
몽촌토성역	6813.88219178	7152.08767123
무악재역	4533.94794521	4455.6739726
문동대역	16194.4715569	18679.9176647
문래역	19365.1945205	19564.6164384
문정역	5646.39178082	5353.11506849
미아역	19641.9808219	17761.9068493
미아사거리역	35814.769863	34481.3561644
미아삼거리역	37159.9589041	35674.4438356
반포역	6814.92328767	6399.19726027
발산역	10984.9671233	10901.6630137
방배역	21639.8424658	22052.8589041
방이역	7099.37808219	7185.28219178
방화역	7918.1890411	7511.08219178
버티고개역	2661.69863014	2565.27945205
보라매역	10035.7506849	10085.4931507
보문역	8501.35890411	7438.46027397
복정역(8)	7861.94246575	5796.35616438
봉천역	24965.839726	22848.5068493
봉화산역	9499.77260274	8913.3369863
부천시청역	11722.7890411	11851.2136986
부천종합운동장역	5438.72054795	4982.59178082
부평구청역(7)	10858.4438356	8252.2630137
불광역	19321.5561644	21119.5452055
불광역(6)	5742.9260274	5487.09589041
사가정역	17155.7671233	16550.3479452
사당역	39464.2082192	38567.1424658
산성역	7664.8739726	7531.01369863
삼각지역	5666.39863014	6952.89178082
삼각지역(6)	7710.92054795	5955.73972603
삼산체육관역	5651.28767123	5204.42465753
삼성역	61471.4616438	63439.1739726
상계역	23233.9342466	20740.0479452
상도역	11933.6273973	11486.4410959
상동역	13258.0438356	13599.2465753
상봉역(7)	18164.9041096	16787.6465753
상수역	9818.48767123	11382.4164384
상왕십리역	10206.0958904	9654.46164384
상월곡역	6696.51506849	6129.51232877
상일동역	12746.7616438	10621.0630137
새절역	13961.939726	13220.6986301
서대문역	16930.2246575	17465.9315068
서울대입구역	54515.9767123	53319.2082192
서울역	41895.6486301	42270.190411
서초역	21321.309589	21914.8191781
석계역(6)	14182.6027397	14230.2657534
석촌역	9714.13424658	9931.16438356
선릉역	57054.4424658	50191.9712329
성수역	23958.1547945	26323.1753425
성신여대입구역	27608.2616438	25179.1945205
송정역	11230.9150685	11084.0849315
송파역	5688.08767123	5652.30684932
수락산역	15609.1917808	15046.969863
수서역	11356.4712329	11536.9410959
수유역(강북구청)	46502.3191781	45118.0041096
수진역	5316.11232877	4951.41369863
숙대입구역	18094.6780822	17761.7561644
숭실대입구역	16892.7534247	16505.3260274
시청역	25128.5616438	25359.1191781
신금호역	5509.19452055	5580.61369863
신길역(5)	2940.86027397	3386.19452055
신답역	1384.42739726	1541.32739726
신당역	14619.6534247	15473.4671233
신당역(6)	8189.00821918	8353.11780822
신대방역	27446.3589041	26329.9739726
신대방삼거리역	16169.8767123	15274.7479452
신도림역	66215.5328767	65910.4630137
신림역	73663.0712329	71735.5191781
신사역	32043.6164384	35137.1383562
신설동역	10389.2931507	10150.5746575
신용산역	13553.5369863	14533.3849315
신정역	14546.4493151	11728.3260274
신정네거리역	11291.1835616	11273.1780822
신중동역	13413.9863014	13302.1232877
신천역	27648.6452055	26718.1657534
신촌역	54221.2657534	55583.0890411
신풍역	12604.4657534	12026.830137
신흥역	5511.04109589	5628.59452055
쌍문역	35434.4630137	30212.8575342
아차산역	16011.1452055	15031.6630137
아현역	8581.33150685	8155.55068493
안국역	27012.0945205	30158.4726027
안암역	14073.4082192	14384.6164384
암사역	18052.5917808	15925.9315068
압구정역	38964.460274	42918.4712329
애오개역	5468.72054795	5605.82739726
약수역	15089.9479452	14315.4191781
약수역(6)	3584.1890411	3552.04657534
양재역	43057.0630137	46140.3575342
양천구청역	7603.23013699	8090.67534247
양평역(5)	6027.53972603	6081.5369863
어린이대공원역	17409.2383562	17613.8520548
여의나루역	10458.3917808	11404.7890411
여의도역	77.0	0.0
여의도역(5)	21856.0054795	24431.0273973
역삼역	46537.6383562	51764.8246575
역촌역	3738.4109589	4241.54246575
연신내역	41551.1520548	38913.6739726
연신내역(6)	12712.7123288	11945.7753425
영등포구청역	21695.1657534	21638.9589041
영등포구청역(5)	3369.03013699	3413.55616438
영등포시장역	7825.10410959	8391.71506849
오금역	5941.94429224	5371.35251142
오목교역	26932.739726	28504.060274
옥수역	10486.7493151	10593.8876712
온수역(7)	11313.1452055	10709.0739726
올림픽공원역	7173.53424658	6944.57534247
왕십리역	20765.6178082	17210.0520548
왕십리역(5)	5458.18082192	6589.8739726
용답역	2567.10136986	2583.97808219
용두역	2229.56849315	2406.14109589
용마산역	6524.24931507	6064.80273973
우장산역	15702.890411	15181.139726
월곡역	13293.6356164	12515.6246575
월드컵경기장역	8709.59726027	9387.40821918
을지로3가역	14057.0136986	14680.6582192
을지로4가역	12716.5849315	12770.9205479
을지로4가역(5)	5026.57260274	5344.92876712
을지로입구역	54177.9972603	53976.0931507
응암역	17520.7342466	16910.0821918
이대역	24456.6630137	25486.1
이수역(7)	17893.1863014	17537.1369863
이촌역	9700.41643836	10893.3438356
이태원역	16565.6630137	18590.1945205
일원역	9661.6890411	10078.8452055
잠실역	79521.4246575	72921.1726027
잠실역(8)	9811.52054795	11656.5863014
잠실나루역	18836.669863	17942.9027397
잠원역	6038.44931507	5759.38630137
장승배기역	11051.3452055	10559.3945205
장암역	2782.04109589	1078.25205479
장지역	12216.2273973	11808.2684932
장한평역	19081.1726027	19171.2
제기동역	19877.4205479	20474.509589
종각역	47913.4082192	45684.6123288
종로3가역	23169.9917808	23008.6431507
종로3가역(5)	14076.0027397	14337.7369863
종로5가역	27529.0630137	27746.7246575
종합운동장역	16649.1232877	17908.260274
중계역	16767.5315068	15126.0109589
중곡역	10617.9205479	9721.01643836
중화역	12502.8630137	11830.5534247
증산역	10698.4273973	10092.2191781
지축역	1399.78082192	1585.26438356
창동역	31511.2383562	33985.1287671
창신역	3322.08219178	2804.46027397
천왕역	7933.59452055	7136.36712329
천호역(5)	22291.4986301	24446.3972603
천호역(8)	21077.6438356	22250.0849315
철산역	25634.7780822	25485.4986301
청구역(5)	5123.22739726	4654.30958904
청구역(6)	2792.98356164	3207.76164384
청담역	24307.4630137	27523.6356164
청량리역(지하)	31295.2191781	32040.2931507
총신대입구역	23107.9013699	25741.860274
춘의역	7134.32054795	6924.45753425
충무로역	34030.5491803	35336.8169399
충정로역	12106.4835616	13003.3287671
충정로역(5)	4921.06027397	5173.83013699
태릉입구역(6)	5433.11232877	6212.78630137
태릉입구역(7)	9090.49589041	8465.58630137
하계역	21640.5589041	20380.0986301
학동역	23778.1726027	26267.9068493
학여울역	3102.22876712	3168.79041096
한강진역	6468.09589041	7610.48493151
한성대입구역	17295.3863014	16637.260274
한양대역	12026.2958904	13924.1931507
합정역	33096.5465753	32763.2876712
합정역(6)	12255.8027397	12213.8136986
행당역	8782.50410959	7626.61643836
혜화역	44821.5589041	47567.0424658
홍대입구역	69492.7643836	73726.7
홍제역	20854.3958904	19540.1273973
화곡역	29561.5616438	26885.2849315
화랑대역	13468.4136986	10265.0520548
회현역	30762.5150685	32861.7945205
효창공원앞역	8375.6739726	8096.27671233