Skip to content

Instantly share code, notes, and snippets.

@yoon-gu
Last active August 14, 2016 17:16
Show Gist options
  • Save yoon-gu/148f049237a0468118995b427954b9cd to your computer and use it in GitHub Desktop.
Save yoon-gu/148f049237a0468118995b427954b9cd to your computer and use it in GitHub Desktop.
Seoul Subway Daily Average On-board Population
license: mit
height: 555
<!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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment