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. 지진을 곡뢀(?)ν•˜μ‹œλŠ” λΆ„μ΄λ‚˜ μ—°κ΅¬ν•˜μ‹œλŠ” λΆ„λ“€μ—κ²Œ 색닀λ₯Έ μ‹œκ°μ΄λ‚˜ μ–΄λ–€ 도움이 λ˜μ—ˆμœΌλ©΄ μ’‹κ² λ‹€.



> κ²°κ³Όλ¬Ό


μ§€μ§„λ°œμƒνšŸμˆ˜ 및 μ΅œλŒ€κ°•λ„
해당월에 λ°œμƒν•œ μ§€μ§„ μ—λ„ˆμ§€μ˜ μ΄λŸ‰ 비ꡐ
μ§€μ§„κ·œλͺ¨ λΉ„μœ¨
지역별 μ§€μ§„ λ°œμƒμˆ˜

μ§€μ§„λ°œμƒμ§€μ—­ (μ΅œκ·Όμ— λ°œμƒν•œ 지진일 수둝 색이 μ§„ν•˜κ³ , μ§€μ§„ 규λͺ¨κ°€ 클수둝 원이 컀진닀)