๊ด€๋ฆฌ ๋ฉ”๋‰ด

Wookang makes AI

ํ•œ๋ฐ˜๋„ ์ง€์ง„ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ ๋ณธ๋ฌธ

Developments/d3๋กœ ์ง€์ง„ ์‹œ๊ฐํ™”ํ•˜๊ธฐ

ํ•œ๋ฐ˜๋„ ์ง€์ง„ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ

ํ‘ธ๋ฅธ๊นƒ๋ฐœ๐Ÿณ๏ธ 2018. 3. 4. 13:28

โ—  ํ•œ๋ฐ˜๋„ ์ง€์ง„ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ   


> ๊ฐœ์š”

1. ๊ธฐ์ƒ์ฒญ 1978๋…„ 8์›”๋ถ€ํ„ฐ 2018๋…„ 3์›” 4์ผ ์ƒˆ๋ฒฝ 0์‹œ 52๋ถ„ ์ง€์ง„๊นŒ์ง€ ๋ชจ๋“  ์ง€์ง„ ๋ฐ์ดํ„ฐ ๋ถ„์„.

- ์ด 1723ํšŒ.

- ์ด ํฌ๋กค๋ง ์‹œ๊ฐ„ 2๋ถ„ ๋ฏธ๋งŒ. node.js ์ด์šฉ. 

- ์กฐํšŒ ๋ชฉ๋ก 999 ์ œํ•œ์œผ๋กœ 1978๋…„๋ถ€ํ„ฐ 2011๋…„๊นŒ์ง€ ํ•œ๋ฒˆ, ๋‚˜๋จธ์ง€ ๊ธฐ๊ฐ„ ๋‹ค์‹œ ํ•œ๋ฒˆ์œผ๋กœ ๋ถ„๋ฆฌํ•ด์„œ ์ˆ˜์ง‘.


2. ์ง€๋„๋Š” ์—ฌ๊ธฐ ๋ธ”๋กœ๊ทธ (danielykim.github.io)์— ์˜ฌ๋ฆฐ TopoJson ํŒŒ์ผ ์ด์šฉ


3. d3.js๋กœ ์‹œ๊ฐํ™”.


4. ์ถ”๊ฐ€๋กœ ์‚ฌ์šฉํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” 

- lodash(๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ. ๋’ค๋Šฆ๊ฒŒ ์ ์šฉํ•˜์—ฌ ์ ๊ทน ํ™œ์šฉx)

- d3.tip.js(๋งˆ์šฐ์Šค ํด๋ฆญ์‹œ ํˆดํŒ ํ‘œ์‹œ)

- d3.format.js(์ˆซ์ž ํ‘œํ˜„ ์ฒ˜๋ฆฌ. ์ง€์ง„ ์—๋„ˆ์ง€์˜ ์ˆซ์ž๊ฐ€ ์ปค์„œ ์ง€์ˆ˜ ๋„์ž…)

- d3-queue.v3.js(์ง€์ง„๋ฐ์ดํ„ฐ์™€ ์ง€๋„ ๋ฐ์ดํ„ฐ ์ˆœ์ฐจ์  ๋กœ๋”ฉ)

- topojson.v1.js(์ง€๋„ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ)

- d3-scale-chromatic.v.js(์ง€๋„ ์ƒ‰๊น” ์ฒ˜๋ฆฌ. d3.interpolateOrRd ์‚ฌ์šฉ)


5. ์†Œ์Šค์ฝ”๋“œ๋Š” ์›ํ•˜์‹œ๋Š” ๋ถ„์ด ๊ณ„์‹œ๋ฉด ๋ง๊ธ€๋กœ.

- ๋‹ค๋งŒ github์— ์˜ฌ๋ฆฌ์ง€ ์•Š์€ ์ด์œ ๋„ ๊ฐ™์€๋ฐ, ์ฝ”๋“œ๋งŒ ๋ณด๊ณ  ์ดํ•ดํ•˜๊ธฐ ์ข€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.


5. ์ง€์ง„์„ ๊ณต๋ถ€(?)ํ•˜์‹œ๋Š” ๋ถ„์ด๋‚˜ ์—ฐ๊ตฌํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ์ƒ‰๋‹ค๋ฅธ ์‹œ๊ฐ์ด๋‚˜ ์–ด๋–ค ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค.



> ๊ฒฐ๊ณผ๋ฌผ


์ง€์ง„๋ฐœ์ƒํšŸ์ˆ˜ ๋ฐ ์ตœ๋Œ€๊ฐ•๋„
ํ•ด๋‹น์›”์— ๋ฐœ์ƒํ•œ ์ง€์ง„ ์—๋„ˆ์ง€์˜ ์ด๋Ÿ‰ ๋น„๊ต
์ง€์ง„๊ทœ๋ชจ ๋น„์œจ
์ง€์—ญ๋ณ„ ์ง€์ง„ ๋ฐœ์ƒ์ˆ˜

์ง€์ง„๋ฐœ์ƒ์ง€์—ญ (์ตœ๊ทผ์— ๋ฐœ์ƒํ•œ ์ง€์ง„์ผ ์ˆ˜๋ก ์ƒ‰์ด ์ง„ํ•˜๊ณ , ์ง€์ง„ ๊ทœ๋ชจ๊ฐ€ ํด์ˆ˜๋ก ์›์ด ์ปค์ง„๋‹ค)


Comments