Skip to content

Instantly share code, notes, and snippets.

@e9t

e9t/README.md

Last active January 4, 2022 10:57
Show Gist options
  • Save e9t/55699e9fa8c3eb7fe40c to your computer and use it in GitHub Desktop.
Save e9t/55699e9fa8c3eb7fe40c to your computer and use it in GitHub Desktop.
Download ZIP
D3로 우리나라 인구밀도 시각화하기
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg { background-color: #eee; }
svg .municipality { fill: red; }
svg .municipality:hover { stroke: #333; }
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 text { font-size: 10px; }
</style>
</head>
<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 src="http://d3js.org/queue.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geo.mercator()
.center([128, 36])
.scale(4000)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var quantize = d3.scale.quantize()
.domain([0, 1000])
.range(d3.range(9).map(function(i) { return "p" + i; }));
var popByName = d3.map();
queue()
.defer(d3.json, "municipalities-topo-simple.json")
.defer(d3.csv, "population-edited.csv", function(d) {
popByName.set(d.name, +d.population);
})
.await(ready);
function ready(error, data) {
var features = topojson.feature(data, data.objects["municipalities-geo"]).features;
features.forEach(function(d) {
d.properties.population = popByName.get(d.properties.name);
d.properties.density = d.properties.population / path.area(d);
d.properties.quantized = quantize(d.properties.density);
});
svg.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; })
.append("title")
.text(function(d) { return d.properties.name + ": " + d.properties.population/10000 + "만 명" });
svg.selectAll("text")
.data(features.filter(function(d) { return d.properties.name.endsWith("시"); }))
.enter().append("text")
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("dy", ".35em")
.attr("class", "region-label")
.text(function(d) { return d.properties.name; });
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
municipalities-topo-simple.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
population-edited.csv
code name population
00 전국 51141463
11 서울특별시 10143645
11110 종로구 160070
11140 중구 130465
11170 용산구 239740
11200 성동구 299337
11215 광진구 368927
11230 동대문구 364273
11260 중랑구 416798
11290 성북구 476589
11305 강북구 338707
11320 도봉구 358582
11350 노원구 590479
11380 은평구 503660
11410 서대문구 314110
11440 마포구 381856
11470 양천구 492528
11500 강서구 569070
11530 구로구 424964
11545 금천구 241020
11560 영등포구 386471
11590 동작구 410815
11620 관악구 518028
11650 서초구 441763
11680 강남구 563599
11710 송파구 668415
11740 강동구 483379
26 부산광역시 3527635
26110 중구 47345
26140 서구 118783
26170 동구 96011
26200 영도구 135816
26230 부산진구 389765
26260 동래구 276689
26290 남구 291770
26320 북구 309719
26350 해운대구 425536
26380 사하구 349110
26410 금정구 253526
26440 강서구 69873
26470 연제구 209290
26500 수영구 175098
26530 사상구 246797
26710 기장군 132507
27 대구광역시 2501588
27110 중구 76246
27140 동구 343802
27170 서구 215399
27200 남구 166062
27230 북구 444359
27260 수성구 461004
27290 달서구 610358
27710 달성군 184358
28 인천광역시 2879782
28110 중구 107774
28140 동구 75093
28170 남구 411330
28185 연수구 300305
28200 남동구 507021
28237 부평구 556985
28245 계양구 343806
28260 서구 490035
28710 강화군 66735
28720 옹진군 20698
29 광주광역시 1472910
29110 동구 103016
29140 서구 315276
29155 남구 216254
29170 북구 445489
29200 광산구 392875
30 대전광역시 1532811
30110 동구 250653
30140 중구 264913
30170 서구 498917
30200 유성구 313968
30230 대덕구 204360
31 울산광역시 1156480
31110 중구 234607
31140 남구 349064
31170 동구 178468
31200 북구 185695
31710 울주군 208646
36 세종특별자치시 122153
36110 세종시 122153
41 경기도 12234630
41110 수원시 1148157
41111 수원시장안구 300908
41113 수원시권선구 331773
41115 수원시팔달구 204805
41117 수원시영통구 310671
41130 성남시 979534
41131 성남시수정구 228167
41133 성남시중원구 256349
41135 성남시분당구 495018
41150 의정부시 430976
41170 안양시 607877
41171 안양시만안구 250246
41173 안양시동안구 357631
41190 부천시 863720
41195 부천시원미구 444207
41197 부천시소사구 229959
41199 부천시오정구 189554
41210 광명시 353100
41220 평택시 442034
41250 동두천시 97557
41270 안산시 713666
41271 안산시상록구 382571
41273 안산시단원구 331095
41280 고양시 990571
41281 고양시덕양구 410491
41285 고양시일산동구 283976
41287 고양시일산서구 296104
41290 과천시 70578
41310 구리시 189680
41360 남양주시 618305
41370 오산시 205460
41390 시흥시 396765
41410 군포시 286344
41430 의왕시 159772
41450 하남시 145096
41460 용인시 941477
41461 용인시처인구 212904
41463 용인시기흥구 393172
41465 용인시수지구 335401
41480 파주시 401718
41500 이천시 205479
41550 안성시 182173
41570 김포시 312305
41590 화성시 530251
41610 광주시 286699
41630 양주시 199143
41650 포천시 156603
41660 여주군 109343
41800 연천군 45610
41820 가평군 61017
41830 양평군 103620
42 강원도 1542263
42110 춘천시 274455
42130 원주시 324837
42150 강릉시 216806
42170 동해시 95143
42190 태백시 48794
42210 속초시 83109
42230 삼척시 73023
42720 홍천군 70638
42730 횡성군 44937
42750 영월군 40150
42760 평창군 43666
42770 정선군 39985
42780 철원군 47473
42790 화천군 25079
42800 양구군 23594
42810 인제군 32517
42820 고성군 30398
42830 양양군 27659
43 충청북도 1572732
43110 청주시 672904
43111 청주시상당구 246128
43113 청주시흥덕구 426776
43130 충주시 208115
43150 제천시 137204
43710 청원군 155002
43720 보은군 34318
43730 옥천군 52763
43740 영동군 50539
43745 증평군 34546
43750 진천군 64606
43760 괴산군 38059
43770 음성군 93505
43800 단양군 31171
44 충청남도 2047631
44130 천안시 591089
44131 천안시동남구 260575
44133 천안시서북구 330514
44150 공주시 116369
44180 보령시 104938
44200 아산시 287073
44210 서산시 165837
44230 논산시 125844
44250 계룡시 40957
44270 당진시 159615
44710 금산군 55441
44760 부여군 72547
44770 서천군 58441
44790 청양군 32155
44800 홍성군 89704
44810 예산군 85205
44825 태안군 62416
45 전라북도 1872965
45110 전주시 650082
45111 전주시완산구 363694
45113 전주시덕진구 286388
45130 군산시 278319
45140 익산시 306539
45180 정읍시 118328
45190 남원시 86460
45210 김제시 91218
45710 완주군 86978
45720 진안군 26703
45730 무주군 25398
45740 장수군 23243
45750 임실군 29739
45770 순창군 30272
45790 고창군 60522
45800 부안군 59164
46 전라남도 1907172
46110 목포시 240936
46130 여수시 291366
46150 순천시 275668
46170 나주시 87754
46230 광양시 151621
46710 담양군 47365
46720 곡성군 31009
46730 구례군 27115
46770 고흥군 70631
46780 보성군 46385
46790 화순군 67829
46800 장흥군 43004
46810 강진군 40079
46820 해남군 77684
46830 영암군 59061
46840 무안군 79367
46860 함평군 35610
46870 영광군 57617
46880 장성군 46292
46890 완도군 53619
46900 진도군 32998
46910 신안군 44162
47 경상북도 2699440
47110 포항시 519467
47111 남구 249709
47113 북구 269758
47130 경주시 263283
47150 김천시 135259
47170 안동시 168461
47190 구미시 419428
47210 영주시 112625
47230 영천시 100778
47250 상주시 103346
47280 문경시 75664
47290 경산시 248805
47720 군위군 24172
47730 의성군 56064
47750 청송군 26470
47760 영양군 18297
47770 영덕군 40142
47820 청도군 43788
47830 고령군 35198
47840 성주군 45067
47850 칠곡군 121182
47900 예천군 45573
47920 봉화군 33894
47930 울진군 51953
47940 울릉군 10524
48 경상남도 3333820
48120 창원시 1083731
48121 의창구 255816
48123 성산구 242870
48125 마산합포구 183365
48127 마산회원구 219558
48129 진해구 182122
48170 진주시 337071
48220 통영시 139719
48240 사천시 116851
48250 김해시 522049
48270 밀양시 108342
48310 거제시 242077
48330 양산시 279565
48720 의령군 29417
48730 함안군 67667
48740 창녕군 63447
48820 고성군 56369
48840 남해군 47244
48850 하동군 50177
48860 산청군 35935
48870 함양군 40692
48880 거창군 63177
48890 합천군 50290
50 제주특별자치도 593806
50110 제주시 438165
50130 서귀포시 155641
@yoon-gu
Copy link

yoon-gu commented Jul 29, 2016

D3 라이브러리 추가하는 부분에서

기존:

<script src="http://d3js.org/d3.v3.min.js"></script>

변경 후:

<script src="//d3js.org/d3.v3.min.js"></script>

이렇게 고치시면 bl.ocks.org에서 아마 해결 될거에요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment