JS와 D3를 이용한 시각화(Visualization): d3-data-loading

D3.js - Data Loading

외부 파일에서 데이터를 로드하기 위한 Methods
CSV File Format

CSV File Format 개요
d3.csv() 메서드
d3.csv() Method를 사용한 CSV Data Loading 예

JSON File Format

JSON File Format 개요
d3.json() Method를 사용한 JSON Data Loading 예

TSV File Format

TSV File Format 개요
d3.tsv() Method를 사용한 TSV Data Loading 예

XML File Format

XML File Format 개요
d3.xml() Method를 사용한 XML Data Loading 예

파일로부터 읽은 데이터 결합(Binding)하기

JSON 데이터를 파일로 부터 Load하여 Binding 하는 프로그램 예

D3.js - Data Loading 관련 페이지 보기

외부 파일에서 데이터를 로드하기 위한 Methods

D3는 외부 파일에서 다양한 유형의 데이터를 로드하기 위해 다음과 같은 방법을 제공한다.

Method	설명
d3.csv()	http 요청을 지정된 URL로 전송하여 .csv 파일 또는 데이터를 로드하고 구문 분석 된 csv 데이터 개체로 콜백 함수를 실행한다.
d3.json()	http 요청을 지정된 URL로 전송하여 .json 파일 또는 데이터를 로드하고 구문 분석 된 json 데이터 객체로 콜백 함수를 실행한다.
d3.tsv()	지정된 URL로 http 요청을 보내 .tsv 파일 또는 데이터를 로드하고 구문 분석 된 tsv 데이터 객체로 콜백 함수를 실행한다.
d3.xml()	http 요청을 지정된 URL로 전송하여 .xml 파일 또는 데이터를 로드하고 구문 분석 된 xml 데이터 개체로 콜백 함수를 실행한다.

CSV File Format

CSV(Comma Separated Values) 확장자가있는 파일은 콤마로 구분 된 값이 있는 데이터 레코드를 포함하는 일반 텍스트 파일이다. CSV 파일의 각 줄(Line)은 파일에 포함 된 레코드 세트의 새 레코드이다.

이러한 파일은 한 스토리지 시스템에서 다른 스토리지 시스템으로 데이터를 전송할 때 유용하다. 대부분의 응용 프로그램이 콤마로 구분 된 레코드를 인식 할 수 있기 때문에 CSV 데이터 파일을 용이하게 데이터베이스로 가져올 수 있다. Microsoft Excel 또는 OpenOffice Calc와 같은 거의 모든 스프레드 시트 응용 프로그램은 대부분 CSV를 가져올 수 있는 기능을 포함하고 있다.

CSV File Format 개요

각 레코드는 아래 예와 같이 줄 바꿈(CRLF)으로 구분 된다.

aaa,bbb,ccc CRLF

xxx,yyy,zzz CRLF

파일의 첫 번째 줄(Line)에 필드의 이름에 해당하는 줄(Header line)이 있을 수 있다. 이 줄은 파일의 필드에 해당하는 이름을 포함하며 파일의 나머지 부분에있는 레코드와 동일한 수의 필드를 포함하여야 한다.

field_name1,field_name2,field_name3 CRLF

aaa,bbb,ccc CRLF

헤더(Header)와 각 레코드는 콤마로 구분된 하나 이상의 필드로 구성된다. 각 줄은 동일한 수의 필드를 포함하여야 한다.

d3.csv() 메서드

d3.csv() 메서드를 사용하여 csv 파일 또는 csv 데이터를 로드 할 수 있다.

기본형: d3.csv(url[, row, callback]);

첫 번째 매개 변수(url)는 csv 데이터를 반환 할 .csv 파일, webapi 또는 webservice의 url 이다.
두 번째 선택적 매개 변수는 표현을 변경할 수있는 변환 함수이다.
세 번째 선택적 매개 변수는 .csv 파일/데이터가 로드되면 실행되는 콜백 함수이다. 파싱 된 데이터 객체를 콜백 함수에 매개 변수로 전달한다.

d3.csv() Method를 사용한 CSV Data Loading 예

아래 데이터를 복사하여 sales-person.csv 파일에 저장한다.

아래 html 파일을 복사하여 d3-csv-loading.html 파일에 저장한다.

CSV Data Loading 프로그램 실행하기

웹서버(예: Apache)를 실행한다.
위 HTML 문서를 복사하여 d3-csv-loading.html 파일을 만들고, 웹서버의 폴더에 저장한다.
Chrome(or Microsoft Edge) 웹브라우저에서 웹서버의 d3-csv-loading.html에 연결하면 브라우저에 "CSV Data Loading 예: d3.csv() Method를 사용" 메세지가 출력된다.
웹브라우저에서 웹서버에 연결하는 url 예: 웹서버가 localhost에 설치되어 있고 d3-csv-loading.html 파일이 localhost/d3-test 폴더에 위치하는 경우의 예

http://localhost/d3-test/d3-csv-loading.html

웹브라우저에서 "도구 더보기 -> 개발자 도구"를 실행하고 Console 창을 선택하여 console.log 출력을 확인한다.
Chrome 웹브라우저 "개발자 도구"의 Console 창 예

주의: d3.csv() 메서드는 http 프로토콜 환경에서 동작하기 때문에 d3-csv-loading.html 파일을 직접 실행(더블 클릭)하면 sales-person.csv 파일을 로드할 수 없다. sales-person.csv 파일도 웹서버 폴더에 저장되어 있어야 한다.

JSON File Format

JSON(JavaScript Object Notation)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우).

JSON File Format 개요

JSON 데이터는 키(Key)와 값(Value)의 쌍으로 작성된다. 키와 값은 왼쪽에 키가 있고 가운데에 콜론 (:)으로 구분되고 오른쪽에 값이 있는 구조이다. 다른 키와 값의 쌍(Pairs)은 콤마(,)로 구분된다. 키는 "name"과 같이 큰 따옴표로 묶인 문자열이다.
값(Value)은 다음과 같은 데이터 유형이 올 수 있다.

Number
String: 큰 따옴표(" ")로 묶인 문자열.
Boolean: True or False.
Array: Array의 값은 대괄호([ ])로 묶인 값의 배열.

Array 예

["Apple", "Orange"]

Object: 중괄호({ })로 둘러싸인 키와 값의 쌍(Pairs) 모음.

Object 예

{"name": "Jack", "age": 30}

d3.json() Method를 사용한 JSON Data Loading 예

아래 데이터(JSON Array)를 복사하여 sales-person.json 파일에 저장한다.

아래 html 파일을 복사하여 d3-json-loading.html 파일에 저장한다.

JSON Data Loading 프로그램 실행하기

웹서버(예: Apache)를 실행한다.
위 HTML 문서를 복사하여 d3-json-loading.html 파일을 만들고, 웹서버의 폴더에 저장한다.
Chrome(or Microsoft Edge) 웹브라우저에서 웹서버의 d3-json-loading.html에 연결하면 브라우저에 "JSON Data Loading 예: d3.json() Method를 사용" 메세지가 출력된다.
웹브라우저에서 웹서버에 연결하는 url 예: 웹서버가 localhost에 설치되어 있고 d3-json-loading.html 파일이 localhost/d3-test 폴더에 위치하는 경우의 예

http://localhost/d3-test/d3-json-loading.html

웹브라우저에서 "도구 더보기 -> 개발자 도구"를 실행하고 Console 창을 선택하여 console.log 출력을 확인한다.
Chrome 웹브라우저 "개발자 도구"의 Console 창 예

주의: d3.json() 메서드는 http 프로토콜 환경에서 동작하기 때문에 d3-json-loading.html 파일을 직접 실행(더블 클릭)하면 sales-person.json파일을 로드할 수 없다. sales-person.json 파일도 웹서버 폴더에 저장되어 있어야 한다.

TSV File Format

TSV(Tab-Separated Values) 파일 형식은 데이터를 탭(Tab)으로 구분한 일반 텍스트 형식의 파일이다. CSV와 같이 서로 다른 애플리케이션간에 가져 오기 및 내보내기를 위해 구조화 된 방식으로 데이터를 구성하는 데 사용된다.

TSV File Format 개요

각 레코드는 아래 예와 같이 줄 바꿈(CRLF)으로 구분 된다.
각 필드는 아래 예와 같이 탭(Tab)으로 구분 된다.

aaa bbb ccc CRLF

파일의 첫 번째 줄(Line)에 필드의 이름에 해당하는 줄(Header line)이 있을 수 있다. 이 줄은 파일의 필드에 해당하는 이름을 포함하며 파일의 나머지 부분에있는 레코드와 동일한 수의 필드를 포함하여야 한다.

field_name1 field_name2 field_name3 CRLF

aaa bbb ccc CRLF

헤더(Header)와 각 레코드는 탭(Tab)으로 구분된 하나 이상의 필드로 구성된다. 각 줄은 동일한 수의 필드를 포함하여야 한다.

d3.tsv() Method를 사용한 TSV Data Loading 예

아래 데이터를 복사하여 sales-person.tsv 파일에 저장한다.

아래 html 파일을 복사하여 d3-tsv-loading.html 파일에 저장한다.

TSV Data Loading 프로그램 실행하기

웹서버(예: Apache)를 실행한다.
위 HTML 문서를 복사하여 d3-tsv-loading.html 파일을 만들고, 웹서버의 폴더에 저장한다.
Chrome(or Microsoft Edge) 웹브라우저에서 웹서버의 d3-tsv-loading.html에 연결하면 브라우저에 "TSV Data Loading 예: d3.tsv() Method를 사용" 메세지가 출력된다.
웹브라우저에서 웹서버에 연결하는 url 예: 웹서버가 localhost에 설치되어 있고 d3-tsv-loading.html 파일이 localhost/d3-test 폴더에 위치하는 경우의 예

http://localhost/d3-test/d3-tsv-loading.html

웹브라우저에서 "도구 더보기 -> 개발자 도구"를 실행하고 Console 창을 선택하여 console.log 출력을 확인한다.
Chrome 웹브라우저 "개발자 도구"의 Console 창 예

주의: d3.tsv() 메서드는 http 프로토콜 환경에서 동작하기 때문에 d3-tsv-loading.html 파일을 직접 실행(더블 클릭)하면 sales-person.tsv파일을 로드할 수 없다. sales-person.tsv 파일도 웹서버 폴더에 저장되어 있어야 한다.

XML File Format

XML(Extensible Markup Language)은 W3C에서 개발된, 다목적 마크업 언어이다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어졌다.

XML File Format 개요

XML은 eXtensible Markup Language를 의미한다.
XML은 데이터를 저장하고 전송하기 적합하게 설계되었다.
XML은 사람과 기계가 모두 읽을 수 있도록 설계되었다.

XML File Format에 대한 설명은 자료의 양이 많기 때문에 아래 참고자료를 참고 바람.

참고자료: W3C XML Tutorial

d3.xml() Method를 사용한 XML Data Loading 예

아래 데이터를 복사하여 sales-person.xml 파일에 저장한다.

아래 html 파일을 복사하여 d3-xml-loading.html 파일에 저장한다.

XML Data Loading 프로그램 실행하기

웹서버(예: Apache)를 실행한다.
위 HTML 문서를 복사하여 d3-xml-loading.html 파일을 만들고, 웹서버의 폴더에 저장한다.
Chrome(or Microsoft Edge) 웹브라우저에서 웹서버의 d3-xml-loading.html에 연결하면 브라우저에 "XML Data Loading 예: d3.xml() Method를 사용" 메세지가 출력된다.
웹브라우저에서 웹서버에 연결하는 url 예: 웹서버가 localhost에 설치되어 있고 d3-xml-loading.html 파일이 localhost/d3-test 폴더에 위치하는 경우의 예

http://localhost/d3-test/d3-xml-loading.html

웹브라우저에서 "도구 더보기 -> 개발자 도구"를 실행하고 Console 창을 선택하여 console.log 출력을 확인한다.
Chrome 웹브라우저 "개발자 도구"의 Console 창 예

주의: d3.xml() 메서드는 http 프로토콜 환경에서 동작하기 때문에 d3-xml-loading.html 파일을 직접 실행(더블 클릭)하면 sales-person.xml파일을 로드할 수 없다. sales-person.xml 파일도 웹서버 폴더에 저장되어 있어야 한다.

파일로부터 읽은 데이터 결합(Binding)하기

파일로부터 읽은 데이터를 데이터 개체로 사용할 수 있다. 이 예에서는 "sales-person.json" 파일에 저장된 JSON 데이터를 읽어 d3 data() 함수에 전달한다.

JSON 데이터를 파일로 부터 Load하여 Binding 하는 프로그램 예

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
  
<body>	
  <h3>JSON Data Loading 과 Binding 예 </h3>
  <script>	
    // json Format data file로 부터 Data를 가져온다.
    d3.json("sales-person.json").then(function(data) {
        // console 창에 data를 출력한다.
        console.log("data: ", data);

d3.select("body")
        // 데이터를 단락(Paragraphs)에 출력하도록 선택한다.
        // 만약 <dody>에 단락이 없으면, 아래 append 메소드에서 추가한다.
        .selectAll("p")
        // 데이터를 바인딩한다. 데이터 객체를 D3의 data() 함수에 제공한다.
        .data(data)
        // enter() 함수는 data()에서 값을 받는다. 이 경우에는 네 가지 값이 있다.
        // 그러나 이러한 데이터 값에 해당하는 <p> 요소에 대한 참조가 아직 없기 때문에
        // enter()는 새 요소에 대한 빈 자리 표시자의 참조를 반환한다.
        .enter()
        // append() 메서드는 enter()에서 반환된 새 요소를 DOM에 추가한다.
        .append("p")
        // 해당 데이터 값을 사용하여 출력한다.
        .text(function(d) {
            return "Person: " + d.person + ", Sales: " + d.sales;
        });
    });
  </script>
</body>
</html>

프로그램 실행하기

웹서버(예: Apache)를 실행한다.
위 HTML 문서를 복사하여 d3-json-load-bind.html 파일을 만들고, 웹서버의 폴더에 저장한다.
위 "d3.json() Method를 사용한 JSON Data Loading 예"에서 만든 sales-person.json 파일을 동일한 폴더에 저장한다.
Chrome(or Microsoft Edge) 웹브라우저에서 웹서버의 d3-json-load-bind.html에 연결하면 브라우저에 아래와 같이 "d3-json-load-bind.html 출력 예"가 출력된다.

웹브라우저에서 웹서버에 연결하는 url 예: 웹서버가 localhost에 설치되어 있고 d3-json-load-bind.html 파일이 localhost/d3-test 폴더에 위치하는 경우의 예

http://localhost/d3-test/d3-json-load-bind.html

d3-json-load-bind.html 출력 예

웹브라우저에서 "도구 더보기 -> 개발자 도구"를 실행하고 Element 창을 선택하면 아래와 같이 d3에 의하여 단락(Paragraphs)이 HTML 문서에 추가(Append)된 것를 확인할 수 있다.
Chrome 웹브라우저 "개발자 도구"의 Element 창 예

D3.js - Data Loading 관련 페이지 보기