티스토리

스쿨 데브옵스

검색하기

블로그 홈

스쿨 데브옵스

schooldevops.tistory.com/m

IT 이것저것 배운것을 올리자

구독자: 0

방명록 방문하기

주요 글 목록

[D3 13] D3 Transition D3 Transition Transition 은 특정 도형이나 물체의 변화에 대해서 지정된 시간동안 변화를 보여주는 기법입니다. D3 에서는 transition 이라는 함수를 이용하여 다양한 변화를 줄 수 있습니다. 이번 아티클에서는 어떠한 변환이 있는지 그리고 어떻게 사용할 수 있는지 알아 보겠습니다. 일단 transition 을 주기 위해서는 selection 을 해야합니다. 그리고 셀렉션 된 물체에 대해서 전이를 발생시킵이다. Basic Transition 가장 단순한 예로 body 의 배경색을 녹색에서 파란색으로 서서히 변화 시키는 예제입니다. style("background", "green") 이 시작 값이되고 이후, transition() 을 설정하면 트랜지션이 걸립니다. 그리고나서 durat.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 12] D3 Transform 알아보기 D3 Transform 알아보기 D3 에서 트랜스폼은 SVG 엘리먼트에 변형을 가하는 행위를 할 수 있습니다. Transform 은 attr 을 통해서 속성으로 지정할 수 있으며 변화를 줄 수 있는 메소드는 다음과 같습니다 matrix(a, b, c, d, e, f): 이 변환은 6개의 값을 가진 매트릭스에 의해서 특정 변환을 수행할 수 있습니다. translate(x, [y]): 이 변환은 x와 y위치로 위치 이동을 지정된 값으로 수행합니다. x 값은 필수이며, y값이 없다면 0으로 설정됩니다. rotate(degree): 지정된 각도로 회전합니다. cx, cy 를 지정하면 해당 축을 기준으로 회전을 합니다. scale(x, [y]): 이 변환은 x와 y값에 따라서 스케일 오퍼레이션을 지정합니다. 만약.. 공감수 1 댓글수 0 2022. 5. 13.
[D3 11] Group Element Group Element D3 에서 Group 엘리먼트는 SVG 엘리먼트들을 논리적 단위로 묶어주는 컨테이너 역할을 합니다. SVG 엘리먼트를 서로 묶어서 그룹을 만들어 줍니다. 그룹으로 일단 지정하면, 그룹 하위의 모든 컨테이너에 포함된 엘리먼트가 됩니다. 그룹은 ... 으로 묶어줄 수 있습니다. Group 엘리먼트들은 자식으로 여러 그룹을 가질 수 있습니다. 엘리먼트 그룹 짓기. 기본 엘리먼트는 아래와 같다고 생각해 보겠습니다. 둥근원, 사각형 번갈아 가면서 아래와 같이 그려보았습니다. 기본 엘리먼트 그려주기 그룹 지어주기 이번에는 그룹을 만들어 보겠습니다. 첫번재, 두번째 원을 첫번째 그룹으로 그리고 세번째, 네번째 사각형을 두번째 그룹으로 만들어 주겠습니다. 위 소스를 살펴보면 우리는 firstG.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 10] Line Chart Line Chart 이번에는 차트 중에서 가장 많이 사용하는 라인 차트를 그려보겠습니다. 라인 차트를 이루는 구성 요소를 알아볼께요. 라인차트 구성요소 타이틀 표시할 데이터: 라인차트를 그려주기 위해서는 데이터가 준비 되어야겠지요? 데이터는 월별 판매지수 그대로 이용하겠습니다 . x축, y축 바 차트 line 함수 line 데이터를 path 를 이용하여 그려주기. 라인에 커브 속성 넣어주기 (꺽은선, 연속선) 등 표시하기 위와 같이 라인 구성요소는 바 차트와 대부분 유사하지만, 라인차트를 그려줄때 사용하는 함수는 조금 다릅니다. 우리는 소스에서 라인차트를 좀더 명확하게 표시하기 위해서 circle 을 추가하여, 라인의 지점마다 핑크색 점을 찍어보도록 하겠습니다. 라인차트 소스 데이터 설정하기. var d.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 09] BarChart BarChart 이번에는 BAR 차트를 그려보겠습니다. 위 차트 그림과 같이 차트를 그리기 위해서 우리가 해야할 일이 어떤것이 있는지 알아 보겠습니다. 차트를 그리기 위해서 무엇이 필요한지 알아보겠습니다. 타이틀 표시할 데이터 x축, y축 바 차트 rect 엘리먼트 우리는 이러한 요소들을 사용하여 차트를 그리겠습니다. 차트 데이터 var datas = [ { date: "1월", sales: 1000 }, { date: "2월", sales: 800 }, { date: "3월", sales: 950 }, { date: "4월", sales: 1100 }, { date: "5월", sales: 1050 }, { date: "6월", sales: 1500 }, { date: "7월", sales: 1700 .. 공감수 0 댓글수 0 2022. 5. 13.
[D3 08] AXES AXES 차트에서 Axis 는 데이터를 가시화 할때 매우 중요한 부분중에 하나입니다. 차트에서 Axis 가 있어야, 현재 보는 그래프의 데이터를 확인할 수 있으며, 해당 그래프의 특정 지점이 연관된 축의 값을 파악함으로 해서 데이터 인지를 더욱 명확하게 할 수 있습니다. 특히 데이터의 최소/최대 범위를 알지 못하는 상황에서 축의 영역을 고정한다면 매우 큰 데이터가 들어왔을때 올바르게 차트를 그려줄 수 없게 됩니다. Axis d3에서 축은 다음과 같은 메소드로 구현할 수 있습니다 . d3.axisTop() : 상단 수평 축을 그립니다 . d3.axisRight() : 오른쪽 수직 축을 그려줍니다. d3.axisLeft() : 왼쪽 수직 축을 그려줍니다. d3.axisBottom() : 하단 수평 축을 그립.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 07] Scale Scale d3에서 중요한 또하나의 값은 Scale 이라고 할 수 있습니다. 실제 데이터는 매우 큰 값들이 올 수 있으며, 그 값들을 고정된 화면 영역에 표현하는 것은 쉽지 않습니다. 적절한 축적에 따라서 데이터를 화면 영역으로 변경 매핑이 될 수 있도록 일관된 수식으로 변환을 해야합니다. 이러한 일을 해 주는 것이 Scale 입니다. D3 에서는 다음과 같은 Scale 범주와 기능을 제공하고 있습니다. Scale Category Continuous 연속적인 데이터를 처리할 수 있습니다. d3.scaleLinear(): 연속적인 리니어 스케일을 지정한다. 이것은 입력 데이터를 특정 출력 범위로 지정한다. d3.scaleIdentity(): 리니어 스케일을 생성한다. 이것은 입력데이터와 출력데이터가 같은 .. 공감수 0 댓글수 0 2022. 5. 13.
[D3 06] SVG(Scalable Vecotr Graphics) SVG(Scalable Vecotr Graphics) SVG 는 벡터 기반의 그래픽을 지원하는 엘리먼트 입니다. 그래픽이라고 하면 2가지가 존재합니다. Raster: 고정된 이미지 영역에서 픽셀을 이용하여 하나의 그림을 나타냅니다. 점을 찍어서 그림을 그린다고 생각하면 될것 입니다 . Vector: 벡터는 점과 점을 연결하는 수학식을 이용하여 도형을 그리거나, 그림을 그립니다. HTML5 에서는 2가지 엘리먼트를 제공합니다. Canvas: Raster 이미지를 표현하기 위한 그림판 영역입니다. 확대/축소를 하게 되면 이미지가 깨지는 단점이 있습니다. 그래거 Canvas 는 redraw 를 통해서 이미지를 다시 그려주는 방식을 이용하여 이를 해결합니다. SVG: Vector 이미지를 그려주기 위한 그림판 .. 공감수 0 댓글수 0 2022. 5. 13.
[D3 05] Enter and Exit Enter and Exit DATA JOIN 은 D3에서 데이터를 인제스천 하는 방법에 대한 기초적인 내용이었습니다. 이미 준비된 데이터를 d3에 주입하고, 그래프를 그려줄 수 있고, DOM 처리를 수행할 수 있습니다. 그러나, 이전 예제에서는 정해진 dom element 내에서만 작업을 할 수 있었고, 데이터가 엘리먼트보다 적거나, 많아도 오류는 나지 않지만 원하는 데이터를 모두 그려줄 수 없는 문제가 있었습니다. Enter 와 Exit 를 이용하면, 데이터의 변경에 따라 DOM 을 동적으로 변경시켜 줄 수 있는 기능을 제공할 수 있습니다. Enter 우선 enter 에 대해서 알아보겠습니다. enter는 dom 엘리먼트가 join 된이후 데이터보다 작은 값을 얼마나 더 추가해야하는지를 계산하고, 엘리.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 04] D3 Event D3 Event 정적인 데이터를 보여주는 것보다, 마우스가 특정 객체에 Over 되었을때 화면이 보여진다면, 더욱더 다이나믹 할 것입니다. 사용자도 원하는 마우스 커서를 가져다 대면, 데이터를 보여준다거나, 줌인 아웃등을 통해서 데이터, 차트등을 확대, 축소 할 수 이쓸 것입니다. 이번에는 D3의 이벤트에 대해서 알아보겠습니다. D3 Event 시작하기. D3에서 이벤트의 가장 기본은 Selection 으로 부터 시작합니다. # selection.on(typenames[, listener[, options]]) on 메소드를 통해서 이벤트 리스너를 등록할 수 있습니다. typenames 는 이벤트를 나타내는 문자열입니다. (mouseover, click, ubmit 등 다양한 이벤트가 올 수 있으며 D3.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 03] D3 Data JOIN D3 Data JOIN D3가 Data Driven Document 라는것을 보아도 Data를 다루는 방법이 매우 중요합니다. 이번에는 Data JOIN 데해서 알아보겠습니다. Data Join D3 에서 사용하는 데이터는 JSON 을 기본으로 이용합니다. 텍스트별 색상 지정하기. 텍스트와 색상을 가진 JSON 객체가 있고, 이들 텍스트를 출력하는 예제입니다. 위 예제를 살펴보면, div.container 내부에 p 엘리먼트가 5개가 있습니다. 그리고 textData 는 6개의 Object 를 가지고 있습니다. text 를 출력하고, 각 텍스트에 색상을 지정하고 있습니다. 결과보기 결과화면과 같이 우리가 지정한 5개의 엘리먼트에만 텍스트가 출력하고, 마지막 End. 는 출력되지 않습니다. 이유는 셀렉션을.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 02] D3 에서 DOM 알아보기. D3 에서 DOM 알아보기. 지난번 연재 내용에서 D3 에서 DOM 셀렉션을 알아보았습니다. 돔을 선택한 후 DOM 에 신규 엘리먼트를 추가하거나, 속성값을 추가하거나, css 스타일도 먹일 수 있습니다. DOM 관리 기능 element 삽입, 제거 엘리먼트에 attribute 추가 엘리먼트 프로퍼티 추가하기 css styling 하기 html 코드 삽입 위와 같이 DOM 에 접근하고, DOM 을 관리할 수 있습니다. 이제부터 D3가 가진 DOM 기능들을 알아보고 어떻게 운용할 수 있는지 살펴보도록 하겠습니다. DOM Manipulating Sample append() 를 이용하여 엘리먼트 추가하기 selection.append(name) append 는 셀렉팅된 엘리먼트 마지막에 신규 엘리먼트를 추가합.. 공감수 0 댓글수 0 2022. 5. 13.
[D3 01] D3 소개 D3 (Data Driven Document) D3는 Data Driven Document의 의미로 D가 3개 들어있다고 하여 D3라고 합니다. D3 특징 D3는 다음과 같은 특징이 있습니다. Custom Interactive data visualization 가능 SVG 이용 (Scalable Vector Graphics) 으로 벡터그래픽을 지원합니다. (즉, 확대/축소에 화면이 깨지지 않습니다.) HTML 과 CSS 를 지원하여 디자인 할 수 있습니다. D3 Install D3를 이용하기 위해서는 다음 몇가지 요소가 필요합니다. D3 library D3룰 이용하기 위해서 다음 링크를 header 에 추가해 줍니다. 혹은 실제 소스 코드를 로컬에 설치하고자 한다면 다음 zip 파일을 다운받아 압축을 풀.. 공감수 0 댓글수 0 2022. 5. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.