D3

D3 - Baisc

2021. 1. 3. 15:41
๋ชฉ์ฐจ
  1. ๐Ÿ“Œ ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Adding svgs with d3
  4. ๐Ÿ“Œ Selection and data joins
  5. ๐Ÿ“Œ Loading external datas
  6. ๐Ÿ“Œ Conclusion
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ๋ก

  • Introduction
  • Adding svgs with d3
  • Selection and data joins
  • Loading external datas
  • Conclusion

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜์€ d3์˜ ๊ธฐ์ดˆ์ ์ธ ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ํ•œ๋ฒˆ ์•Œ์•„๋ณผ๊นŒ์š”~~!?

๐Ÿ“Œ Adding svgs with d3

์ด์ œ svg๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ๋„ํ˜•๋“ค์„ ๊ทธ๋ ค๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

// โญ๏ธ d3.select๋ฅผ ํ†ตํ•ด dom์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์–ด์š”. ๊ทธ๋ฆฌ๊ณ  ํ•ญ์ƒ method chaining์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
const svg = d3.select("#chart-area").append("svg")
  .attr("width", 400)
  .attr("height", 400)

// ์ด์ œ ์ƒ์„ฑ๋œ svg๋ฅผ ํ†ตํ•ด ์›์„ ๊ทธ๋ ค๋ณผ๊ฒŒ์š”.
svg
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20)
  .attr("fill", "red");

// ์‚ฌ๊ฐํ˜•๋„ ๋งŒ๋“ค์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
svg
  .append("rect")
  .attr("width", 30)
  .attr("height", 40)
  .attr("fill", "blue")
  .attr("x", 50)
  .attr("y", 60);

// ํƒ€์›๋„ ๊ทธ๋ฆด์ˆ˜ ์žˆ๊ตฌ์šฉ
svg
  .append("ellipse")
  .attr("cx", 100)
  .attr("cy", 300)
  .attr("rx", 30)
  .attr("ry", 60);

// ์„ ๋„ ๊ทธ๋ ค๋ณผ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
svg
  .append("line")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("x2", 200)
  .attr("y2", 200)
  .attr("stroke", "black")
  .attr("stroke-width", 3);

๐Ÿ“Œ Selection and data joins

data join์€ .data๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ํ•œ๋ฒˆ 5๊ฐœ์˜ ์ž๋ฃŒ๋ฅผ ๊ฐ€์ง€๊ณ ์„œ data๋ฅผ join์„ ์‹œ์ผœ๋ณผ๊ฒŒ์š”.

const data = [25, 20, 10, 12, 15];

const svg = d3
  .select("#chart-area")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

// ์—ฌ๊ธฐ์„œ selectAll("circle")์€ ์‹ค์ œ์ ์œผ๋กœ ์•„๋ฌด๊ฒƒ๋„ ๋‚˜์˜ค์ง€ ์•Š์„๊ฑฐ ์˜ˆ์š”. ์•„์ง ๊ทธ๋ฆฌ๊ธฐ ์ „์ด๊ฑฐ๋“ ์š”.
const circles = svg.selectAll("circle").data(data);

๊ทธ๋ž˜์„œ ๋ฐ”๋กœ ์ด๋•Œ enter๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

const data = [25, 20, 10, 12, 15];

const svg = d3
  .select("#chart-area")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

const circles = svg.selectAll("circle").data(data);

// enter๊ฐ€ ์ผ์–ด๋‚˜๋ฉด์„œ ์ด์ œ data๋ฅผ ์ˆœํšŒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
circles
  .enter()
  .append("circle")
  // ์ฒซ๋ฒˆ์จฐ ์ธ์ž๋Š” data์˜ datum์„ ๋‘๋ฒˆ์งธ ์ธ์ž๋Š” index๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค.  
  .attr("cx", (d, i) => i * 60) // ์ƒ์ˆ˜๋กœ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ•จ์ˆ˜๋กœ๋„ ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  .attr("cy", 250)
  .attr("r", (d) => d);

๐Ÿ“Œ Loading external datas

d3์—์„œ๋Š” json์ด๋‚˜ csv... ๊ฐ™์€ ํŒŒ์ผ๋“ค์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ƒฅ d3.csv์ด๋Ÿฐ์‹์œผ๋กœ ์จ์ฃผ๋ฉด๋˜์š”. ๊ทธ๋ฆฌ๊ณ  promise๋ฅผ ๋ฆฌํ„ดํ•˜๊ธฐ ๋•Œ๋ฌธ์— then์œผ๋กœ ์ด์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

d3.csv("./js/ages.csv").then((data) => {
  console.log(data);
  // {name: "Tony", age: "10"}
  // {name: "Jessica", age: "12"}
  // {name: "Andrew", age: "9"}
  // {name: "Emily", age: "10"}
  // {name: "Richard", age: "11"}
});

๐Ÿ“Œ Conclusion

์˜ค๋Š˜์€ ํ•œ๋ฒˆ ์ด๋ ‡๊ฒŒ d3์˜ ๊ธฐ๋ณธ์ ์ธ ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ๋Š” d3์˜ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ๋Š” scale๊ณผ axes๋ฅผ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์•ˆ๋…•~!

๋ฐ˜์‘ํ˜•

'D3' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

D3 - Update pattern  (0) 2021.01.13
D3 - BarChart ๋งŒ๋“ค๊ธฐ  (0) 2021.01.07
D3 - Scale and Axes  (0) 2021.01.06
  1. ๐Ÿ“Œ ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Adding svgs with d3
  4. ๐Ÿ“Œ Selection and data joins
  5. ๐Ÿ“Œ Loading external datas
  6. ๐Ÿ“Œ Conclusion
'D3' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • D3 - Update pattern
  • D3 - BarChart ๋งŒ๋“ค๊ธฐ
  • D3 - Scale and Axes
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • Nextjs
  • react-component-slot
  • Vue
  • CSS
  • swift
  • D3
  • Vue test
  • react
  • svelte
  • jest
  • BDD
  • vue bdd
  • Kotlin
  • react useRef
  • storybook6
  • vue3
  • swift5
  • apollo
  • client only
  • javascript pattern
  • TDD
  • slot ํŒจํ„ด
  • Design Pattern
  • vue cypress
  • Cypress
  • React Native
  • vue storybook
  • Javascript
  • TypeScript
  • vue tdd

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
D3 - Baisc
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.