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

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

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

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๋งˆ์ผ€ํŒ… ํŒŒํŠธ๋„ˆ์Šค

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.9

5.0

์žฅํ˜„์ฒ 

31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์ž˜๊ฐ€๋ฅดํ‚ค๋…ธ

5.0

soeun8477

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉฐ ์ œ๊ณตํ•ด์ฃผ์‹  ์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์—ด์‹ฌํžˆ ์‹ค์Šตํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํ™•์‹คํžˆ ์ง์ ‘ ํ•ด๋ณด๋‹ˆ ์‘์šฉ๋„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๊ณ  ์ œ ์ง€์‹์ด ๋œ ๊ฒƒ ๊ฐ™์•„ ๋„ˆ๋ฌด ์ข‹์•˜์Šต๋‹ˆ๋‹ค!!

5.0

SoriBada

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๋น ๋ฅด๊ฒŒ ๊ฐœ๋…์„ ์ •๋ฆฌํ•˜๊ธฐ์— ์ข‹์•˜์Šต๋‹ˆ๋‹ค

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

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

  • 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์ž…๋‹ˆ๋‹ค.

11,023

๋ช…

์ˆ˜๊ฐ•์ƒ

415

๊ฐœ

์ˆ˜๊ฐ•ํ‰

3

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

21

๊ฐœ

๊ฐ•์˜

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

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

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

 

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

The Oreum แ„…แ…ฉแ„ƒแ…ณแ„†แ…ขแ†ธ.png.webp

 

๋”๋ณด๊ธฐ

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

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

์ „์ฒด

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

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

17๊ฐœ

4.9

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

  • ์žฅํ˜„์ฒ ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์žฅํ˜„์ฒ 

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ž˜๊ฐ€๋ฅดํ‚ค๋…ธ

    • soeun8477๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      soeun8477

      ์ˆ˜๊ฐ•ํ‰ 3

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉฐ ์ œ๊ณตํ•ด์ฃผ์‹  ์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์—ด์‹ฌํžˆ ์‹ค์Šตํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํ™•์‹คํžˆ ์ง์ ‘ ํ•ด๋ณด๋‹ˆ ์‘์šฉ๋„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๊ณ  ์ œ ์ง€์‹์ด ๋œ ๊ฒƒ ๊ฐ™์•„ ๋„ˆ๋ฌด ์ข‹์•˜์Šต๋‹ˆ๋‹ค!!

      • ์šฐ๋””๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ์šฐ๋””

        ์ˆ˜๊ฐ•ํ‰ 14

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        72% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ๊ฐ•์˜ ์•Œ์ฐจ์š”

        • SoriBada๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          SoriBada

          ์ˆ˜๊ฐ•ํ‰ 3

          โˆ™

          ํ‰๊ท  ํ‰์  4.7

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ๋น ๋ฅด๊ฒŒ ๊ฐœ๋…์„ ์ •๋ฆฌํ•˜๊ธฐ์— ์ข‹์•˜์Šต๋‹ˆ๋‹ค

          • digilog๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            digilog

            ์ˆ˜๊ฐ•ํ‰ 51

            โˆ™

            ํ‰๊ท  ํ‰์  4.9

            5

            100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            d3.js ๊ธฐ๋ณธ์„ ๋น ๋ฅด๊ฒŒ overview ๋ณผ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ์ข‹์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

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

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

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

            โ‚ฉ33,000