- 2013 Seoul Regional Population
- Click and Zoom
- Click again and Restore
- Purple : no population information
Last active
May 29, 2019 21:09
-
-
Save yoon-gu/4c1f46d5726c7abb9f83b151bb506f61 to your computer and use it in GitHub Desktop.
연습 01 : 확대 가능한 서울시 인구 분포
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name | population | |
---|---|---|
사직동 | 8695 | |
삼청동 | 2889 | |
부암동 | 9974 | |
평창동 | 17625 | |
무악동 | 7943 | |
교남동 | 7863 | |
가회동 | 4868 | |
종로5·6가동 | 4666 | |
이화동 | 9082 | |
혜화동 | 12347 | |
명륜3가동 | 6065 | |
창신1동 | 5622 | |
창신2동 | 10148 | |
창신3동 | 8006 | |
숭인1동 | 7009 | |
숭인2동 | 8599 | |
종로 | 1.3.4가동 | |
청운효자동 | 13768 | |
소공동 | 736 | |
회현동 | 4127 | |
명동 | 2140 | |
필동 | 3743 | |
장충동 | 5281 | |
광희동 | 4496 | |
신당1동 | 6985 | |
신당2동 | 15229 | |
신당3동 | 18755 | |
신당4동 | 15385 | |
신당5동 | 7150 | |
신당6동 | 8929 | |
황학동 | 11350 | |
중림동 | 11565 | |
을지로동 | 1382 | |
후암동 | 17436 | |
용산2가동 | 12076 | |
남영동 | 6662 | |
원효로2동 | 14955 | |
효창동 | 10756 | |
용문동 | 12400 | |
이촌1동 | 24713 | |
이촌2동 | 9482 | |
이태원1동 | 7269 | |
이태원2동 | 9708 | |
서빙고동 | 10036 | |
보광동 | 16553 | |
청파동 | 22096 | |
원효로1동 | 9983 | |
한강로동 | 14004 | |
한남동 | 19099 | |
마장동 | 23818 | |
사근동 | 12708 | |
행당1동 | 16887 | |
행당2동 | 24468 | |
응봉동 | 16598 | |
금호1가동 | 15113 | |
금호4가동 | 14198 | |
성수1가1동 | 17106 | |
성수1가2동 | 17754 | |
성수2가1동 | 19150 | |
성수2가3동 | 11766 | |
송정동 | 11940 | |
용답동 | 15864 | |
옥수동 | 22473 | |
왕십리도선동 | 12143 | |
금호2·3가동 | 20495 | |
화양동 | 25662 | |
군자동 | 21194 | |
중곡1동 | 15751 | |
중곡2동 | 21311 | |
중곡3동 | 18110 | |
중곡4동 | 29801 | |
능동 | 10606 | |
구의1동 | 22110 | |
구의2동 | 24735 | |
구의3동 | 28715 | |
광장동 | 33727 | |
자양1동 | 23144 | |
자양2동 | 27540 | |
자양3동 | 30397 | |
자양4동 | 25516 | |
회기동 | 10748 | |
휘경1동 | 16548 | |
휘경2동 | 23946 | |
청량리동 | 22749 | |
용신동 | 27900 | |
제기동 | 25581 | |
전농1동 | 24303 | |
전농2동 | 18635 | |
답십리1동 | 18809 | |
답십리2동 | 30697 | |
장안1동 | 34118 | |
장안2동 | 30474 | |
이문1동 | 32276 | |
이문2동 | 22815 | |
면목2동 | 27015 | |
면목4동 | 22353 | |
면목5동 | 13571 | |
면목7동 | 24565 | |
상봉1동 | 24684 | |
상봉2동 | 17349 | |
중화1동 | 20879 | |
중화2동 | 29270 | |
묵1동 | 32612 | |
묵2동 | 19039 | |
망우3동 | 18427 | |
신내1동 | 30904 | |
신내2동 | 25016 | |
면목본동 | 34637 | |
면목3·8동 | 28282 | |
망우본동 | 31424 | |
돈암1동 | 15631 | |
돈암2동 | 23051 | |
안암동 | 18187 | |
보문동 | 14518 | |
정능1동 | 19709 | |
정능2동 | 23059 | |
정능3동 | 17310 | |
정능4동 | 26403 | |
길음1동 | 33107 | |
월곡1동 | 27396 | |
월곡2동 | 20858 | |
장위1동 | 24597 | |
장위2동 | 21543 | |
장위3동 | 18117 | |
길음2동 | 18353 | |
성북동 | 16566 | |
삼선동 | 24738 | |
동선동 | 14821 | |
종암동 | 39081 | |
석관동 | 35659 | |
번1동 | 19843 | |
번2동 | 19586 | |
번3동 | 20973 | |
수유1동 | 21821 | |
수유2동 | 22379 | |
수유3동 | 22662 | |
삼양동 | 29568 | |
미아동 | 23616 | |
송중동 | 33010 | |
송천동 | 29571 | |
삼각산동 | 29007 | |
우이동 | 19652 | |
인수동 | 30899 | |
쌍문1동 | 21449 | |
쌍문2동 | 20173 | |
쌍문3동 | 17743 | |
쌍문4동 | 20894 | |
방학1동 | 30467 | |
방학2동 | 22558 | |
방학3동 | 30977 | |
창1동 | 27573 | |
창2동 | 30182 | |
창3동 | 15586 | |
창4동 | 29905 | |
창5동 | 27135 | |
도봉1동 | 22621 | |
도봉2동 | 29957 | |
월계1동 | 23439 | |
월계2동 | 30614 | |
월계3동 | 35678 | |
공릉1동 | 19293 | |
공릉2동 | 45670 | |
공릉3동 | 19293 | |
하계1동 | 31053 | |
하계2동 | 25318 | |
중계본동 | 27672 | |
중계1동 | 29456 | |
중계4동 | 22210 | |
상계1동 | 42597 | |
상계2동 | 21887 | |
상계5동 | 23573 | |
상계8동 | 26813 | |
상계9동 | 24587 | |
상계10동 | 20391 | |
공릉1·3동 | 38586 | |
상계3·4동 | 37606 | |
상계6·7동 | 36046 | |
중계2·3동 | 41710 | |
녹번동 | 33339 | |
불광1동 | 34892 | |
갈현1동 | 24143 | |
갈현2동 | 26096 | |
구산동 | 31435 | |
대조동 | 28851 | |
응암1동 | 29995 | |
응암2동 | 18480 | |
신사1동 | 25803 | |
신사2동 | 21912 | |
증산동 | 20591 | |
수색동 | 19384 | |
진관동 | 36484 | |
불광2동 | 28490 | |
응암3동 | 25080 | |
역촌동 | 43137 | |
천연동 | 19842 | |
홍제1동 | 26237 | |
홍제3동 | 19509 | |
홍은1동 | 25320 | |
남가좌1동 | 3218 | |
남가좌2동 | 30252 | |
북가좌1동 | 9960 | |
북가좌2동 | 33304 | |
홍제2동 | 15405 | |
홍은2동 | 27948 | |
충현동 | 23086 | |
북아현동 | 14477 | |
신촌동 | 17748 | |
연희동 | 41256 | |
용강동 | 19982 | |
대흥동 | 15416 | |
염리동 | 16990 | |
신수동 | 21843 | |
서교동 | 27856 | |
합정동 | 18569 | |
망원1동 | 22686 | |
망원2동 | 20263 | |
연남동 | 18096 | |
성산1동 | 19503 | |
성산2동 | 39600 | |
상암동 | 26017 | |
도화동 | 21839 | |
서강동 | 25929 | |
공덕동 | 32733 | |
아현동 | 16021 | |
목1동 | 31284 | |
목2동 | 29505 | |
목3동 | 21665 | |
목4동 | 26797 | |
신월1동 | 23181 | |
신월2동 | 19641 | |
신월3동 | 17405 | |
신월4동 | 18065 | |
신월5동 | 14934 | |
신월6동 | 13237 | |
신월7동 | 24878 | |
신정1동 | 22522 | |
신정2동 | 21558 | |
신정3동 | 45918 | |
신정6동 | 25944 | |
신정7동 | 32113 | |
목5동 | 43269 | |
신정4동 | 34540 | |
염창동 | 40323 | |
등촌1동 | 20729 | |
등촌2동 | 21538 | |
화곡본동 | 34225 | |
화곡2동 | 19825 | |
화곡3동 | 23043 | |
화곡4동 | 21519 | |
화곡6동 | 23800 | |
화곡8동 | 26322 | |
가양1동 | 19838 | |
가양2동 | 18223 | |
가양3동 | 18743 | |
발산1동 | 31873 | |
공항동 | 19727 | |
방화1동 | 29226 | |
방화2동 | 24640 | |
방화3동 | 26680 | |
등촌3동 | 36701 | |
화곡1동 | 48893 | |
우장산동 | 37691 | |
신도림동 | 35805 | |
구로1동 | 22837 | |
구로3동 | 27674 | |
구로4동 | 24778 | |
구로5동 | 30044 | |
고척1동 | 24801 | |
고척2동 | 29429 | |
개봉2동 | 33849 | |
개봉3동 | 21506 | |
오류1동 | 20563 | |
오류2동 | 27494 | |
수궁동 | 23957 | |
가리봉동 | 12531 | |
구로2동 | 31441 | |
개봉1동 | 34530 | |
가산동 | 18133 | |
독산1동 | 31061 | |
독산2동 | 22582 | |
독산3동 | 27351 | |
독산4동 | 18293 | |
시흥1동 | 29086 | |
시흥2동 | 24851 | |
시흥3동 | 12357 | |
시흥4동 | 23361 | |
시흥5동 | 23372 | |
여의동 | 31264 | |
당산1동 | 19749 | |
당산2동 | 32240 | |
양평1동 | 16073 | |
양평2동 | 20531 | |
신길1동 | 20835 | |
신길3동 | 18348 | |
신길4동 | 12247 | |
신길5동 | 16016 | |
신길6동 | 23224 | |
신길7동 | 17748 | |
대림1동 | 15284 | |
대림2동 | 16747 | |
대림3동 | 26636 | |
영등포본동 | 23696 | |
영등포동 | 15269 | |
도림동 | 17459 | |
문래동 | 31177 | |
노량진2동 | 16661 | |
상도1동 | 39622 | |
상도2동 | 24646 | |
상도3동 | 23375 | |
상도4동 | 28171 | |
사당1동 | 22441 | |
사당3동 | 24126 | |
사당4동 | 14540 | |
사당5동 | 15019 | |
대방동 | 38977 | |
신대방1동 | 25341 | |
신대방2동 | 19798 | |
흑석동 | 31111 | |
노량진1동 | 37791 | |
사당2동 | 28578 | |
봉천1동 | 25412 | |
봉천3동 | 16569 | |
봉천6동 | 28692 | |
봉천7동 | 21101 | |
봉천10동 | 13882 | |
봉천11동 | 27965 | |
남현동 | 17365 | |
신림본동 | 23640 | |
신림1동 | 19031 | |
신림2동 | 24243 | |
신림4동 | 24494 | |
신림5동 | 18825 | |
신림7동 | 17220 | |
신림8동 | 16196 | |
신림9동 | 25247 | |
은천동 | 34945 | |
성현동 | 33873 | |
청룡동 | 31786 | |
난곡동 | 29645 | |
삼성동 | 28031 | |
미성동 | 33023 | |
서초1동 | 19508 | |
서초2동 | 21962 | |
서초3동 | 27298 | |
서초4동 | 29072 | |
잠원동 | 34485 | |
반포본동 | 11627 | |
반포1동 | 27980 | |
반포2동 | 19951 | |
반포3동 | 22295 | |
반포4동 | 19041 | |
방배본동 | 19000 | |
방배1동 | 15360 | |
방배2동 | 24419 | |
방배3동 | 23964 | |
방배4동 | 22972 | |
양재1동 | 23840 | |
양재2동 | 20789 | |
내곡동 | 4657 | |
신사동 | 18419 | |
논현1동 | 24619 | |
논현2동 | 22009 | |
삼성1동 | 14407 | |
삼성2동 | 29876 | |
대치1동 | 24033 | |
대치4동 | 21067 | |
역삼1동 | 33316 | |
역삼2동 | 32352 | |
도곡1동 | 20133 | |
도곡2동 | 30429 | |
개포1동 | 21553 | |
개포4동 | 22563 | |
일원본동 | 21750 | |
일원1동 | 17720 | |
일원2동 | 18444 | |
수서동 | 16721 | |
세곡동 | 4138 | |
압구정동 | 25667 | |
청담동 | 27633 | |
대치2동 | 40718 | |
개포2동 | 34631 | |
풍납1동 | 18737 | |
풍납2동 | 27991 | |
거여1동 | 15167 | |
거여2동 | 27552 | |
마천1동 | 17803 | |
마천2동 | 21893 | |
방이1동 | 16189 | |
방이2동 | 24459 | |
오륜동 | 19795 | |
오금동 | 35945 | |
송파1동 | 25284 | |
송파2동 | 19196 | |
석촌동 | 33810 | |
삼전동 | 33731 | |
가락본동 | 27054 | |
가락1동 | 14850 | |
가락2동 | 33929 | |
문정1동 | 21191 | |
문정2동 | 15198 | |
잠실본동 | 29122 | |
잠실4동 | 29849 | |
잠실6동 | 16402 | |
잠실7동 | 10101 | |
장지동 | 35207 | |
잠실2동 | 34604 | |
잠실3동 | 35673 | |
상일동 | 26852 | |
명일1동 | 27258 | |
명일2동 | 18004 | |
고덕1동 | 22384 | |
고덕2동 | 17747 | |
암사2동 | 15657 | |
암사3동 | 18402 | |
천호1동 | 30000 | |
천호3동 | 25536 | |
성내1동 | 20006 | |
성내2동 | 25674 | |
성내3동 | 24118 | |
둔촌1동 | 19431 | |
둔촌2동 | 28192 | |
강일동 | 20564 | |
암사1동 | 37032 | |
천호2동 | 36108 | |
길동 | 49535 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="style.css"> | |
<body></body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script src="//d3js.org/queue.v1.min.js"></script> | |
<script> | |
var width = 960; | |
var height = 500; | |
var centered; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("rect") | |
.attr("class", "background") | |
.attr("width", width) | |
.attr("height", height) | |
.on("click", clicked); | |
var g = svg.append("g"); | |
var projection = d3.geo.mercator() | |
.center([126.9895, 37.5551]) | |
.scale(70000) | |
.translate([width/2, height/2]); | |
var path = d3.geo.path().projection(projection); | |
var popByName = d3.map(); | |
var quantize = d3.scale.quantize() | |
.domain([0, 50000]) | |
.range(d3.range(9).map(function(i) { return "p" + i; })); | |
queue() | |
.defer(d3.json, ".seoul_submunicipalities_topo_simple.json") | |
.defer(d3.csv, ".popul_data.csv", function(d) { | |
popByName.set(d.name, +d.population); | |
}) | |
.await(ready); | |
function ready(error, data, data2) { | |
var features = topojson.feature(data, data.objects.seoul_submunicipalities_geo).features; | |
features.forEach(function(d) { | |
d.properties.population = popByName.get(d.properties.name); | |
d.properties.quantized = quantize(d.properties.population); | |
}); | |
g.selectAll("path") | |
.data(features) | |
.enter().append("path") | |
.attr("class", function(d) { return "municipality " + d.properties.quantized; }) | |
.attr("d", path) | |
.attr("id", function(d) { return d.properties.name; }) | |
.on("click", clicked) | |
.append("title") | |
.text(function(d) { return d.properties.name + ": " + d.properties.population + "명" }); | |
}; | |
function clicked(d) { | |
var x, y, k; | |
if (d && centered !== d) { | |
var centroid = path.centroid(d); | |
x = centroid[0]; | |
y = centroid[1]; | |
k = 4; | |
centered = d; | |
} else { | |
x = width / 2; | |
y = height / 2; | |
k = 1; | |
centered = null; | |
} | |
g.selectAll("path") | |
.classed("active", centered && function(d) { return d === centered; }); | |
g.transition() | |
.duration(750) | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") | |
.style("stroke-width", 1.5 / k + "px"); | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
svg circle { | |
fill: orange; | |
opacity: .5; | |
stroke: white; | |
} | |
svg text { | |
pointer-events: none; | |
} | |
svg .municipality-label { | |
fill: black; | |
font: 10px sans-serif; | |
font-weight: 300; | |
text-anchor: middle; | |
} | |
rect { fill: none; } | |
svg .municipality { fill: rgb(128, 128, 128); stroke:silver;} | |
svg .municipality:hover { stroke-width:2;} | |
svg .municipality.p0 { fill: rgb(247,251,255); } | |
svg .municipality.p1 { fill: rgb(222,235,247); } | |
svg .municipality.p2 { fill: rgb(198,219,239); } | |
svg .municipality.p3 { fill: rgb(158,202,225); } | |
svg .municipality.p4 { fill: rgb(107,174,214); } | |
svg .municipality.p5 { fill: rgb(66,146,198); } | |
svg .municipality.p6 { fill: rgb(33,113,181); } | |
svg .municipality.p7 { fill: rgb(8,81,156); } | |
svg .municipality.p8 { fill: rgb(8,48,107); } | |
svg .municipality.undefined { fill: #800080; } | |
svg .municipality.active { | |
fill: #008080; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment