2f:null 30:["$","title",null,{"children":"D3 튜토리얼 2 : Observable로 하는 D3 소개 | Chloe Noh | Observable"}] 35:T5bf,md `### A. Building DOM using SVGs ### A. SVG를 사용하여 DOM을 만들기 We saw in the previous tutorial chapter that D3 is built on SVG. We also built a svg shape (a star in our example) using HTML. Now we will learn to built svg elements using D3. 우리는 D3가 SVG로 만들어지는 것을 이전 튜토리얼 챕터에서 봤습니다. 또한 HTML을 사용해서 svg 모양을 만들었습니다(별 예제). 이제 D3를 사용해서 svg element 만들기를 배워봅시다. __But why built svg using D3?__: __왜 D3로 svg를 만드나요?__: D3 visualization utilizes SVG *(Scalable Vector Graphics)* elements out of vast options of DOM objects like div, span, p, etc.. as vector-based graphics are drawn by the browser itself by plotting each described point and line, rather than filling some space with pre-defined pixels. This ensures SVG images can adapt to different screen sizes and resolutions unpixelated. D3 시각화는 div, span, p 등과 같은 DOM 객체의 다양한 옵션들 중 SVG *(Scalable Vector Graphics)* 요소를 사용합니다. 벡터 기반 그래픽은 공간을 미리 정의된 픽셀로 채우는 것이 아니라, 각각 묘사되는 점, 선을 그린 것으로 브라우저 자체에 그립니다. 이는 SVG 이미지가 다양한 화면 크기 및 해상도(픽셀화되지 않음)에도 적응할 수 있음을 보장합니다. `36:Td63,md `--- ### C. Connecting data to the DOM (D3:data-driven document) ### C. Dom에 데이터 연결하기 (D3:data-driven document) We have learned how to select, update, and append elements to the DOM. 지금까지 우리는 DOM에 element(요소)를 선택, 업데이트, 추가하는 방법을 배웠습니다. But D3 is **Data Driven**, meaning DOM manipulation is done based on data. Lets learn how to connect data to the DOM: 그러나 D3는 **데이터 기반**(데이터 기반으로 DOM 처리하는 것을 의미)입니다. 자 DOM에 데이터를 연결하는 방법을 배워봅시다: We will be using the DOM selection method (just learned above) to select DOM element for data connection. DOM 선택자 메소드를 사용해서 데이터를 연결할 DOM 요소를 선택합니다. Now to connect data to the DOM we use the method chain as follows: 이제 해당 DOM에 데이터를 연결하기 위해 아래의 메소드 체인을 사용합니다: **d3.selectAll(DOM element).data(ArrayOfData).enter().append('rect/circle/etc')** **d3.selectAll(DOM element)** Selects all defined elements in the DOM and hands off a reference to the next step in the chain. DOM에 정의된 모든 element를 선택하고 chain(체인 *이하 동일)에서 다음 단계로 참조를 넘깁니다. **.data(ArrayOfData)** Creates a 1-to-1 mapping between each data point in an array and DOM elements. 배열의 각 데이터 포인터 사이와 DOM elements의 1 대 1 매핑을 생성합니다. **.enter()** To create new, data-bound elements, you must use enter(). 새로운 Data-bound elements를 만들기 위해 반드시 enter()를 사용해야 합니다. This method looks at the current DOM selection, and then at the data being handed to it. 이 메소드는 현재 DOM 선택자와 넘겨질 데이터를 봅니다. If there are more data values than corresponding DOM elements, then enter() creates a new placeholder element on which you can work your magic. 만일 해당 DOM 요소보다 더 많은 데이터 값이 있다면, enter()은 여러분이 뭐든 작업할 수 있는(매직같은) 새로운 placeholder element(영역 element)를 만듭니다. It then hands off a reference to this new placeholder to the next step in the chain. 그러고 나서 이 새로운 영역을 체인의 다음 단계로 참조를 넘깁니다. **.append("rect/circle/etc")** Takes the empty placeholder selection created by enter() and appends an element to the DOM. enter()에서 생성된 빈 영역 선택자를 받아서 DOM에 element를 추가합니다. Hooray! Then it hands off a reference to the element it just created to the next step in the chain. 만세! 체인의 다음 단계로 막 새로 만들어진 이 element에 대한 참조를 넘깁니다. __But why use enter, instead of directly using append__ : __ 왜 직접 append하는 것 대신 enter를 사용할까 __ : D3 is designed for dynamically updating data. \`enter()\` handles adding DOM elements, \`exit()\` removes them, thus this is a highly optimized way. D3는 동적으로 데이터를 업데이트하도록 설계되었습니다. \`enter()\`는 DOM element를 추가하고, \`exit()\`로 삭제합니다. 따라서 이는 매우 최적화된 방법입니다. `37:T40a,{ const width = 500 //width of svg const height = 250 //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width, height)) const ArrayofData = [50,90, 120,250,200,150,100,50,10,40,80,60,40,70,50,90, 120,60,40,70,50,60,40,70] svg.selectAll('rect') .data(ArrayofData) //connect ArrayofData with DOM elements .enter() // returns the portion of the data which is new ("entering") and not yet bound to DOM elements .append('rect') // for each data value, append a to selected svg .attr('x', (d, itemsIndexInArray) => itemsIndexInArray * 20)// For each, set x attr .attr('y', d => height - d) // for each, set y attr .attr('width', 15) // for each, set width attribute .attr('height', arrayItemTypicallyNamed_d => arrayItemTypicallyNamed_d) .attr('fill', 'purple') // Once we append the visualization elments to it, we return the DOM element for Observable to display above. return svg.node() }38:[] 33:{"id":"b4e87c9c3a4bc871","slug":"d3-tutorial-2-introduction-to-d3-with-observable","title":"D3 튜토리얼 2 : Observable로 하는 D3 소개","thumbnail":"f8b29fef20c10ed8132b3b6941c5a1114b70bc583eee51e7870d09c1dc758003","access_level":"public","create_time":"$D2020-06-15T12:44:26.851Z","update_time":"$D2020-06-16T02:44:53.485Z","view_time":null,"first_public_time":"$D2020-06-15T14:06:28.788Z","has_unpublished_edits":null,"fork":{"id":"50e27c0d1af3bf0c","slug":"d3-tutorial-2-introduction-to-d3-with-observable","title":"D3 Tutorial 2 : Introduction to D3 with Observable","owner":{"id":"43bb0790b569329d","login":"uvizlab","name":"Uviz"}},"stars":2,"starred":false,"owner":{"type":"team","id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":"starter_2024"},"version":253,"publish_version":253,"role":null,"authored":false,"authors":[{"type":"individual","id":"225ae9197ed1774c","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":null}],"members":[{"type":"individual","id":"225ae9197ed1774c","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4e4d912bb6f278ce","slug":"d3-tutorial","title":"D3 tutorial","owner":{"id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh"}},"type":"notebook","body":{"title":"D3 튜토리얼 2 : Observable로 하는 D3 소개","cells":[{"id":0,"value":"md`# D3 튜토리얼 2 : Observable로 하는 D3 소개\n# D3 Tutorial 2 : Introduction to D3 with Observable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`---\n## Objective\n## 목표\nTo get familiar with D3 and start visualizing data with Observable using D3. \nD3와 친숙해지고 D3를 사용하는 Observable로 데이터 시각화를 시작하기 \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`---\n## What is d3.js?\n## d3.js 란?\n\n[D3](https://d3js.org) is a JavaScript library for data visualization. \n[D3](https://d3js.org)는 데이터 시각화를 위한 JavaScript 라이브러리.\n\nD3 binds the data to Document Object Model (DOM) elements of a web page in order to update the web elements based on the data : therefore called \nD3는 데이터를 기반으로 Web elements를 업데이트하기 위해 웹페이지 DOM (Document Object Model) element에 데이터를 바인딩합니다. \n\"**Data-Driven Documents**\". \n\"**Data-Driven Documents(D3) 데이터 기반 문서**\".\n\nD3 is very popular because it is interactive, flexible, expressive, and fast as it directly interact with DOM. \nD3는 빠르고 표현력 있고 유연하고 대화식으로 DOM을 직접 상호 작용하여 매우 유명합니다.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"DOM // expand and get familiar with the DOM elements","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"DOM // 확장해보면 DOM element와 친숙합니다","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md `---\n## Getting started with D3\n## D3로 시작하기`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md `---\n### B. Introducing D3 DOM manipulation methods\n### B. D3 DOM 선택 메소드 소개\n- \\select\\ \n- \\append\\ \n\n**d3.select(\"p\")** \nIt is a function that finds the *p* in the DOM (here a paragraph) and hands off a reference to the next step in the chain. \nDOM에 *p* element(여기에 단락)를 찾고, chain으로 연결된 다음 단계에 참조를 넘기는 함수\n* select 함수에 DOM 요소를 지칭하는 것을 매개변수로 넣습니다.\n\n**.selectAll(\"p\")** \nIt is a function that selects all defined element (here all paragraphs) to the DOM. \nDOM에 정의된 모든 element(여기 모든 단락)를 선택하는 함수\n\n**.append(\"p\")** \nIt is a function that appends a defined element into the DOM. \n정의된 element를 DOM으로 추가붙이는(append) 함수\n\nD3 can dynamically manipulate the DOM by making selections, updating those selected elements, or appending new elements to a specific selected item. \n이처럼 D3는 선택자(selections)를 만들고, 그 선택된 요소(elements)을 업데이트하고, 또는 특정 선택된 항목(item)에 새로운 요소를 추가로 붙여서(append) 동적으로 DOM을 처리할 수 있습니다.\n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md `Lets see with an example what we have learn so far. \n지금까지 배운 것을 예제로 확인해보기\n\n__What we will be doing__: : We will buil svg using D3, and selecting and append elements using the methods defined above. \n__우리가 배운 것__ : D3를 활용해서 svg를 build하고, 위에 정의된 메소드들을 활용해서 element들을 selecting, append 한다.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html`\n

\n\n