Skip to content

Instantly share code, notes, and snippets.

@yoon-gu

yoon-gu/.block

Last active May 29, 2019 21:09
Show Gist options
  • Save yoon-gu/4c1f46d5726c7abb9f83b151bb506f61 to your computer and use it in GitHub Desktop.
Save yoon-gu/4c1f46d5726c7abb9f83b151bb506f61 to your computer and use it in GitHub Desktop.
Download ZIP
연습 01 : 확대 가능한 서울시 인구 분포
Raw
.block
license: mit
Raw
.popul_data.csv
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
Display the source blob
Display the rendered blob
Raw
.seoul_submunicipalities_topo.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
.seoul_submunicipalities_topo_simple.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
README.md
Raw
index.html
<!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>
Raw
style.css
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