D3의 창시작인 엠보스톡의 워크샵 정리하기

링크 : https://bost.ocks.org/mike/d3/workshop/#0

D3 Workshop - Mike Bostock

서문

D3는 표준인 HTML과 SVG를 이용하여 새로운 시각화를 쉽게 만드는 것입니다. 따라서 현재 사용되고 있는 도구들인 CSS나 디버거들을 모두 자유롭게 사용할 수 있습니다.

시각화는 데이터로부터 DOM(Document Object Model-W3C)을 생성하는 것입니다. 또한 DOM은 데이터가 변화하는 것과 연동하여 업데이트되어야 합니다. D3는 데이터와 엘리먼트 간의 맵핑(mapping)을 도와줄 수 있습니다.

D3를 배우는 것은 Web 표준을 배우는 것이며, Web 표준을 배울 수 있는 방법은 상당히 많습니다.

HTML5

HTML5 스펙은 많은 도움을 줍니다. 또한 스펙들은 기술들을 이해하는데도 많은 도움을 줄 수 있습니다.

SVG

SVG(Scalable Vector Graphics)는 브라우저상에서 벡터 그래픽을 그리는데 사용됩니다. 여러분들은 오직 HTML만을 가지고 간단한 바 차크를 만들수 있습니다만, 여러분 대부분은 데이터를 시각화하는데 SVG를 사용하길 원할 겁니다.

SVG의 간단한 예제는 다음과 같습니다:

<!DOCTYPE html>

CSS

HTML이나 SVG와는 달리, CSS(Cascading Style Sheets)는 새로운 것이 아니다. 이것은 컬러나 폰트와 같은 미적인 요소를 표현하는 데 사용합니다. CSS를 사용하면 여러분들이 작성하는 코드를 단순화할 수 있습니다. 예를 들어, JavaScript를 사용하여 컬러를 할당하는 것보다는 클래스를 할당하는 것이 좋습니다. 클래스를 사용하게 되면 쉽게 색상의 정의를 변경할 수 있습니다.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { background: steelblue; }
</style><body>
Hello, world!

JavaScript

D3는 JavaScript 관련 함수 관용구(functional idioms)를 사용합니다. 이러한 개념은 익숙하지 않을 수 있지만, 고상하고 강격합니다. 여러분들이 이러한 D3 코드에 익숙하지 않다면, JavaScript 관련 특징에 관련된 문서를 읽어보시는게 도움이 될 겁니다.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script>
console.log("Hello, world!");
</script>

시작은 작게!!! 모든 것을 한꺼번에 통달할 필요는 없습니다.

시작합시다. (http://d3js.org)

<!DOCTYPE html>

PS> D3 홈페이지에는 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 를 사용하고 있습니다.

개발툴은 크롬 등 브라우저에서 제공하고 있는 개발도구와 JavaScript Console을 사용하면 됩니다.

D3

표준은 아니지만, D3를 배우는데 필요한 많은 자원들 - 예를 들면 투토리얼 - 이 있습니다.

가능하면 D3 Group을 많이 활용하시기 바랍니다.

Selections

엘리먼트의 선택(selection)은 D3의 가장 기본적인 연산자입니다. jQuery와 매우 유사합니다.

Selectors

CSS는 특정 엘리먼트를 참조하는 데 상당히 쉬운 방법을 제공하고 있습니다. CSS는 selector들을 이용하여 스타일을 할당합니다.

pre, code {

font-family: "Menlo", monospace;

font-size: 48px;

}

위 코드는 모든 <pre>와 <code> 엘리먼트들에게 2개의 스타일 속성 - 폰트 패밀리와 크기 - 을 할당하고 있습니다.

아래는 자주 사용하는 selector들입니다.

#foo // <any id="foo">

foo // <foo>

.foo // <any class="foo">

[foo=bar] // <any foo="bar">

foo bar // <foo><bar></foo>

여러 개를 혼합하여 사용할 수도 있습니다.

foo.bar // <foo class="bar">

foo#bar // <foo id="bar">

W3C 표준 selector는 아래와 같이 JavaScript를 지원합니다.

document.querySelectorAll("pre, code")

W3C Selectors API는 selector들을 제공하지만 selection을 제공하고 있지는 않습니다. W3C Selectors API를 사용하여 여러분들은 엘리먼트들을 쉽게 선택할 수 있지만, 각각 속성과 스타일을 할당하기 위해서 반복적으로 선택할 수 밖에 없습니다. 따라서 웹 개발을 쉽게 할 수 있는 JavaScript 라이버러리가 필요하게 되었습니다.

D3는 다음과 같이 선택과 조작을 위한 단순한 방법을 제공하고 있습니다.

d3.selectAll("pre, code")

jQuery에서는 다음과 같이 사용합니다.

$("pre, code")

Selections are Arrays

// select all <circle> elements

var circle = d3.selectAll("circle");

// set some attributes and styles

circle.attr("cx", 20);

circle.attr("cy", 12);

circle.attr("r", 24);

circle.style("fill", "red");

attr과 style 메서드로 각각의 속성들과 스타일들을 설정할 수 있습니다.

주의할 점은 속성과 스타일을 설정하게 되면 숫자 및 다른 값들이 자동으로 모두 문자열로 전환됩니다. 따라서, 따로 문자열로 전환하는 작업이 없어지게 됩니다. 또한 d3.rgb와 d3..hsl과 같은 헬퍼 클래스들을 사용할 수도 있습니다.

// select all <circle> elements
// and set some attributes and styles
d3.selectAll("circle")
.attr("cx", 20)
.attr("cy", 12)
.attr("r", 24)
.style("fill", "red");

메서드 체이닝(method chaining)을 사용하여 코드를 간결하게 만들 수 있습니다.

Selection.append

// select the <body> element

var body = d3.select("body");

// add an <h1> element

var h1 = body.append("h1");

h1.text("Hello!");

<body> 엘리먼트를 선택하고, <h1> 엘리먼트를 추가합니다.

// select all <section> elements

var section = d3.selectAll("section");

// add an <h1> element to each

var h1 = section.append("h1");

h1.text("Hello!");
많은 <section> 엘리먼트들을 선택하고, 각각의 엘리먼트에 <h1> 엘리먼트를 추가합니다.

var h1 = d3.selectAll("section")

.style("background", "steelblue")

.append("h1")

.text("Hello!");

메서드 체이닝을 사용함에 있어 저는 일반적으로 4칸을 들어쓰기 합니다. 반면 append와 같은 selection을 변경할 때에는 2칸을 들여쓰기 합니다. 이렇게 하는 이유는 컨텍스트 변경 부분을 잘 확인할 수 있도록 하기 위해서입니다.

위의 예제에서는 <section> 엘리먼트들을 선택하면서 시작하였지만, 반환하는 값은 <h1> 엘리먼트가 됩니다.

Data

Data are Arrays

Selection도 배열이며, 데이터도 배열입니다. 우연의 일치일까요? 아닙니다.

// A bar chart, perhaps?

var data = [1, 1, 2, 3, 5, 8];

bar-chart.html

데이터는 숫자도 됩니다.

// A scatterplot, perhaps?

var data = [

{x: 10.0, y: 9.14},

{x: 8.0, y: 8.14},

{x: 13.0, y: 8.74},

{x: 9.0, y: 8.77},

{x: 11.0, y: 9.26}

];

dot-chart.html

데이터는 오브젝트도 됩니다.

Data -> Elements

D3는 여러 개의 엘리먼트들을 생성하기 위한 하나의 메서드를 제공하고 있지 않습니다. 대신에 D3는 데이터를 엘리먼트로 대응하도록 패턴을 제공하고 있습니다. 스크레치(scratch)에서 엘리먼트들을 생성하는 방법은 일반적인 방식의 특별케이스입니다.

svg.selectAll("circle")

.data(data)

.enter().append("circle")

.attr("cx", x)

.attr("cy", y)

.attr("r", 2.5);

This common snippet creates new elements from data. The first line may be surprising—why select <circle> elements if you know they don’t exist? Well, you’re telling D3 that you want them to correspond to data.

This parsimonious approach means that when you need to handle update and exit in the future (for your interactive or dynamic visualizations), it’s a simple extension of a pattern you already know.

var circle = svg.selectAll("circle")

.data(data);

The data method does all the work. The enter and exit methods just return the subselections computed in the join.

var circle = svg.selectAll("circle")

.data(data);

circle.enter().append("circle");

The append method on enter selections is special; it still creates one new element per selected element, but it adds them to the parent node (here the SVG element).

var circle = svg.selectAll("circle")

.data(data);

circle.enter().append("circle")

.attr("cx", x)

.attr("cy", y)

.attr("r", 2.5);

X and y here refer to accessor functions, such as function x(d) { return d.x; }. I couldn’t fit them on the slide. I commonly use anonymous functions to compute attributes from data.

Enter, Update & Exit

I wrote a tutorial on joins recently which is hopefully my best attempt yet at explaining D3’s data join. The data join is likely the hardest concept of D3 to grasp, but it’s a powerful way of manipulating the DOM.

Enter

var circle = svg.selectAll("circle")

.data(data)

.enter().append("circle")

.attr("cx", x)

.attr("cy", y)

.attr("r", 2.5);

This is the same code snippet as before. In effect, we’ve simplified the general pattern by assuming there are no updating or exiting elements.

Update

var circle = svg.selectAll("circle")

.data(data)

.attr("cx", x)

.attr("cy", y)

.attr("r", 2.5);

Exit

이 블로그 검색

pusanbear's everything