์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

์ง€๊ธˆ ๋ฐ”๋กœ D3.js ์‹œ์ž‘ํ•˜๊ธฐ : ์›น ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”

๐Ÿค” D3๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์ง€๋งŒ ๋„ˆ๋ฌด ์–ด๋ ค์›Œ ๊ณ ๋ฏผํ•˜์…จ๋‚˜์š”?? ์ง€๊ธˆ ๋ฐ”๋กœ! ์ด ๊ฐ•์˜๋กœ D3์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํ™œ์šฉ๋ฒ•์„ ์ตํ˜€ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๋‚˜๋งŒ์˜ ์‹œ๊ฐํ™” ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”

  • D3์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํ™œ์šฉ๋ฒ•

  • SVG ๊ฐœ๋…๊ณผ ์ปจํŠธ๋กค

  • ๊ธฐ๋ณธ ๋ฉ”์†Œ๋“œ๋ฅผ ํ™œ์šฉํ•œ ๋„ํ˜•๊ณผ ๊ทธ๋ž˜ํ”„ ๊ทธ๋ฆฌ๊ธฐ

  • ๋‹ค์–‘ํ•œ ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ(csv, tsv, json ๋“ฑ)

  • bar, line ์„ ์ด์šฉํ•œ ์‹ค์šฉ(์‹ค์ „) ๊ทธ๋ž˜ํ”„ ๊ทธ๋ฆฌ๊ธฐ

  • ํ•„์ˆ˜ ์ƒ์„ฑ๊ธฐ, ์ปดํฌ๋„ŒํŠธ, ๋ ˆ์ด์•„์›ƒ ํ™œ์šฉ๋ฒ•

  • ์ง€๋„ ๋“ฑ ํ™”๋ คํ•œ ๊ทธ๋ž˜ํ”„ ๊ทธ๋ฆฌ๊ธฐ

D3.js๋ž€? ๐Ÿค”

 

GitHub - d3/d3-logo: D3 brand assets.
D3๋Š” Data - Driven Documents์˜ ์•ฝ์ž๋กœ
๋™์ ์ด๊ณ  ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•œ ์ •๋ณด ์‹œ๊ฐํ™”๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

์ตœ๊ทผ ์ฝ”๋กœ๋‚˜ ๋งต์„ ๋น„๋กฏํ•œ ๋‹ค์–‘ํ•œ ์ •๋ณด ์‹œ๊ฐํ™”์— ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


D3.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ๐ŸŽจ

  1. SVG๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ํ•ด์ƒ๋„์—์„œ ๊นจ์ง์—†๋Š” ์‹œ๊ฐํ™” ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  2. ๋‹จ์ˆœํžˆ ํ…œํ”Œ๋ฆฟ์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ž์œ ๋กœ์šด ์ปค์Šคํ…€์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  3. ์›น ํ‘œ์ค€์ธ HTML, CSS, SVG๋กœ ๊ตฌํ˜„๋˜์–ด ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์ œ์•ฝ์ด ์ ์Šต๋‹ˆ๋‹ค.


๊ฐ•์˜์—์„œ ๋ฌด์—‡์„ ๋ฐฐ์šฐ๋‚˜์š”? ๐Ÿ•ต๏ธโ€โ™€๏ธ

  1. D3์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํ™œ์šฉ๋ฒ•
  2. ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๊ณ  ์‹œ๊ฐํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•
  3. SVG ๊ฐœ๋…๊ณผ ์ปจํŠธ๋กค
  4. ๊ธฐ๋ณธ ๋ฉ”์†Œ๋“œ๋ฅผ ํ™œ์šฉํ•œ ๋„ํ˜•๊ณผ ๊ทธ๋ž˜ํ”„ ๊ทธ๋ฆฌ๊ธฐ
  5. ๋‹ค์–‘ํ•œ ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ (csv, tsv, json ๋“ฑ)
  6. ์‹ค๋ฌด์—์„œ ๋‹ค๋ฃจ๋Š” ๊ทธ๋ž˜ํ”„
  7. ์‹ค๋ฌด์—์„œ๋„ ๋‹ค๋ฃจ์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™์€ ํ™”๋ คํ•œ ๊ทธ๋ž˜ํ”„


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœ๋“œ๋ ค์š” ๐Ÿ™‹

  1. ์ง€๊ธˆ ๋ฐ”๋กœ ์‹ค๋ฌด์— ํˆฌ์ž…๋˜์–ด์•ผ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž
  2. D3๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„
  3. D3์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํ™œ์šฉ์„ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์€ ์ž…๋ฌธ์ž
  4. ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์‹œ๊ฐํ™”๋ฅผ ๊ฒฝํ—˜ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„
  5. JavaScript๋ฅผ ์‚ฌ์šฉํ•ด ๋‚˜๋งŒ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™”ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„
  6. ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์œผ์‹œ๋Š” ๋ถ„

 

์ง€๊ธˆ ๋ฐ”๋กœ ์‹ค๋ฌด ํˆฌ์ž… ๋˜์–ด์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ํ”„๋กœ์ ํŠธ ํ•˜์…”์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ๊ณผ์ œ ์ œ์ถœํ•˜์…”์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ํ•™์ƒ, ์‹ ์ž…์‚ฌ์› ๊ต์œกํ•ด์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ์›น ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ํ•ด์•ผ ํ•˜๋‚˜์š”?

โœ”๏ธ ๋น ๋ฅด๊ฒŒ ๋ณด๊ณ  ์ ์šฉํ•˜์„ธ์š”!
 - ์†Œ์Šค์ฝ”๋“œ๋งŒ ๊ฐ€์ ธ๋‹ค ๋ณต๋ถ™์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ์ค€๋น„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

โœ”๏ธ ๊ฐ•์˜์ž๋ฃŒ์—์„œ ํŽธํ•˜๊ฒŒ ์ฐพ์•„๋ณด์„ธ์š”!
 - ๊ฒ€์ƒ‰ํ•˜์ง€ ์•Š์•„๋„ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ๊ฐ•์˜ Notion ํŽ˜์ด์ง€๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

โœ”๏ธ ์ด Notion ๊ฐ•์˜์ž๋ฃŒ๋กœ ๊ต์œกํ•˜์„ธ์š”!
 - 2022๋…„ 5์›” ๊ธฐ์ค€ v7 ์ตœ์‹  ๋ฒ„์ „์ž…๋‹ˆ๋‹ค.
 
* 2022๋…„ 6์›”์— D
3 ๋„คํŠธ์›Œํฌ ๊ทธ๋ž˜ํ”„ (Force-Directed graph, ํž˜-๋ฐฉํ–ฅ ๊ทธ๋ž˜ํ”„)๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™” ํ•ด์•ผ ํ•˜๋Š” ๋ถ„

  • ์‹ค๋ฌด์—์„œ D3๋ฅผ ์ง€๊ธˆ ๋ฐ”๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž(๊ฐœ๋ฐœ์ž ๋ถ„๋“ค์€ 4๋ฐฐ์†์œผ๋กœ ๋ณด์„ธ์š”.)

  • D3๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„

  • D3์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํ™œ์šฉ์„ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์€ ์ž…๋ฌธ์ž

  • ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์‹œ๊ฐํ™”๋ฅผ ๊ฒฝํ—˜ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • JavaScript๋ฅผ ์‚ฌ์šฉํ•ด ๋‚˜๋งŒ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™” ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • JavaScript ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

  • CSS ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

์•ˆ๋…•ํ•˜์„ธ์š”
The Oreum์ž…๋‹ˆ๋‹ค.

8,932

๋ช…

์ˆ˜๊ฐ•์ƒ

263

๊ฐœ

์ˆ˜๊ฐ•ํ‰

2

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

18

๊ฐœ

๊ฐ•์˜

๋” ์˜ค๋ฆ„์€ ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์˜ ํ”„๋ฆฌ๋ฏธ์—„ ๋ธŒ๋žœ๋“œ๋กœ ์ฃผ๋กœ ์‹ค๋ฌด, ์ทจ์—…๊ณผ ์—ฐ๊ด€๋œ ๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์—์„œ ์ด๋ก ์ ์ธ ์ง€์‹์„ ํš๋“ํ•˜์…จ๋‹ค๋ฉด, ๋” ์˜ค๋ฆ„์˜ ์‹ค์ „ ๊ฐ•์˜๋“ค์„ ํ†ตํ•ด ํฌํŠธํด๋ฆฌ์˜ค์™€ ์‹ค๋ฌด ๋Šฅ๋ ฅ๋“ค์„ ๋ชจ๋‘ ๊ฐ€์ ธ๊ฐ€์„ธ์š”! 

" 2%๋ฅผ ์ฑ„์šฐ๊ธฐ ์œ„ํ•œ ์—ฌ๋Ÿฌ๋ถ„์˜ ์ง‘๋…๊ณผ ์—ด์ •์„ ์‘์›ํ•ฉ๋‹ˆ๋‹ค! "

 

โ–ถ๏ธŽ ๋” ์˜ค๋ฆ„ ๋กœ๋“œ๋งต

image

๋”๋ณด๊ธฐ

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

36๊ฐœ โˆ™ (6์‹œ๊ฐ„ 22๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

13๊ฐœ

4.8

13๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

The Oreum๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

๋น„์Šทํ•œ ๊ฐ•์˜

๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

โ‚ฉ33,000