d3 js tutorial data visualization framework
이 D3.js 자습서는 D3.js가 무엇인지, 그 이점, 기능, 단계별 설치 프로세스 및 다양한 실습 예제를 설명하므로 D3.js를 빠르게 배울 수 있습니다.
이 자습서에서는 데이터 기반 오픈 소스 JavaScript 라이브러리 인 D3.js를 HTML, DOM (문서 개체 모델), CSS (Cascading Style Sheets), SVG (Scalable Vector Graphics), Canvas 및 웹 브라우저를 통한 JavaScript.
이 프레임 워크를 사용하면 XML, CSV 또는 JSON 형식의 외부 데이터를 웹 서버를 통해 차트, 그래프 또는 여러 시각화 형식으로 변환 할 수 있습니다.
이 튜토리얼에서는이 JavaScript 라이브러리의 모든 기능에 대해 배우고 웹 브라우저를 사용하여 웹 서버를 통해 데이터를 시각화하는 데 어떻게 활용할 수 있는지 살펴 봅니다.
시작하자!!
학습 내용 :
D3.js 란?
D3.js는 경량 JavaScript 라이브러리이며 더 적은 코드 라인이 필요한 데이터 기반 프레임 워크로, 대화 형 데이터 시각화 차트, 그래프 및 지리 공간지도를 얻기 위해 대용량 데이터를 처리하는 데 적합합니다.
데이터 탐색 및 분석을 위해 웹 페이지의 DOM 요소를 조작하여 그래픽 시각화를 그리는 데 주로 사용되는 오픈 소스 JavaScript 라이브러리입니다.
배열, XML, CSV 및 JSON과 같은 데이터 형식으로 저장된 데이터는이 JavaScript 라이브러리를 사용하여 HTML 요소, 캔버스 또는 확장 가능한 벡터 그래픽 (SVG)의 모양을 그룹화하여 그래프, 차트 및 여러 방법으로 변환 할 수 있습니다.
모바일 및 기타 장치의 통화 내역 기록, Twitter, Facebook, WhatsApp과 같은 소셜 미디어 플랫폼의 메시지, 토론 또는 트위트 로그와 같은 빅 데이터, 시장 동향의 로그 및 거래 정보 로그는 차트, 그래프 또는 이 JavaScript 라이브러리를 사용하여 다양한 시각화.
Twitter, Facebook, WhatsApp 등 다양한 소셜 네트워킹 플랫폼이 등장한 이후 트위트, 메시지, 댓글 로그 등 다양한 커뮤니케이션을 캡처하여 차트, 그래프 등의 시각적 형식으로 변환하여 트렌드 주제를 이해하고 감성을 창출 할 수 있습니다. 분석.
의심스러운 범죄 행위에 연루된 경우 용의자의 전화 세부 정보 기록 그룹의 통신 방식을 이해하고 통화 패턴을 모니터링하는 것이 쉬워집니다.
증권 거래소에서 발생하는 변화를 기반으로, 주가의 움직임을 반영하는 봄베이 증권 거래소 (BSE), 국립 증권 거래소 (NSE)와 같은 주가 지수가 시장 심리를 결정하고 투자자의 구매 또는 판매를 안내합니다. 주식의.
D3.js는 시장 점유율 활동을 변환하여 시장 동향의 확률을 신속하게 예측할 수있는 차트 또는 그래프를 만들거나 범죄에 대한 용의자의 관여 또는 예측 조사에 대한 정보를 조사하기위한 통화 정보 기록 형태의 모바일 데이터를 만들 수 있습니다.
D3.js의 특징
- 데이터 기반 : 주로 데이터를 탐색 및 분석하고 대화 형 실시간 그래프, 차트 및 데이터를 시각화하는 광범위한 방법을 만드는 데 사용됩니다.
- DOM 조작 : DOM 요소를 조작하여 다양한 시각화 형식으로 데이터를 변환하는 오픈 소스 JavaScript 라이브러리입니다.
- 웹 표준 활용 : DOM (Document Object Model), HTML, CSS (Cascading Style Sheet), SVG (Scalable Vector Graphics) 및 캔버스를 사용하여 데이터 시각화 형식을 만듭니다.
- 빠르고 대화 형 : 데이터 변경에 매우 민감하며 선택한 DOM 요소를 한 상태에서 다른 상태로 빠르게 애니메이션하거나 변환 할 수 있습니다.
- 동적 전환 표시 : 이 라이브러리는 DOM으로 빠르게 반응하는 시각화를 생성하기 위해 빠른 동적 전환을 생성하도록 설계되었습니다.
D3.js 사용의 이점
- Angular.JS, Ember.JS 또는 React와 같은 다른 JavaScript 프레임 워크와 함께 사용할 수있는 오픈 소스 JavaScript 라이브러리입니다.
- 이 라이브러리는 오픈 소스이므로 목표를 달성하기 위해 소스 코드에 고유 한 기능을 추가 할 수 있습니다.
- DOM, HTML, CSS, SVG 및 캔버스와 같은 웹 표준을 처리하므로 브라우저 이외의 다른 플러그인이 필요하지 않으며 추가 디버깅 또는 학습 도구가 필요하지 않습니다.
- DOM 요소를 조작하여 지연없이 데이터 시각화로 빠르게 동적 실시간 변환을 생성 할 수 있습니다.
- 데이터에 대해 작동하며 JavaScript 라이브러리에 포함 된 데이터 시각화 기능에 특화되고 적합합니다.
D3.js 학습을위한 전제 조건
- 텍스트 에디터: 메모장 ++ 또는 Vim과 같은 텍스트 편집기는 HTML, CSS, JavaScript와 같은 프로그래밍 코드를 작성하고이를 통합하여 원하는 요구 사항을 생성하는 데 필요합니다.
- 웹 브라우저: 코드 통합 후 생성되는 출력을 확인하고 확인하려면 Firefox, Google Chrome, Safari, Opera 또는 IE9와 같은 최신 웹 브라우저 중 하나를 설치해야합니다.
- HTML : HTML 태그 및 구조를 잘 이해하면 기본 웹 페이지를 구축하고 요소를 정렬하여 시각화를 다음 단계로 끌어 올리는 데 도움이됩니다.
- CSS : CSS (Cascading Style Sheet)는 디자인, 레이아웃 및 화면 크기를 포함한 스타일을 웹 페이지에 적용하는 데 사용됩니다.
- 심판: 웹 문서의 구조와 내용을 더 쉽게 알고 데이터 시각화를 위해 D3.js의 DOM 요소에 액세스하기 때문에 DOM (Document Object Model)에 대한 강력한 이해가 필수적입니다.
- 자바 스크립트 : 기초 및 JavaScript 객체에 대한 지식은 데이터 시각화를 웹 서버에서 볼 수 있도록 D3.js를 학습하고 애플리케이션에 구현하기위한 전제 조건입니다.
- 웹 서버: Apache Tomcat 또는 IIS (인터넷 정보 서비스) 서버와 같은 웹 서버를 설치하는 것이 필수적입니다. 그러면 데이터를 배열, 개체, XML, CSV, JSON 형식으로 외부에 업로드하고 D3의 도움으로 변환 할 수 있습니다. js를 그래프, 차트 및 지리 공간 시각화와 같은 시각화 형식으로 변환합니다.
D3.js 설치 / 설정
웹 페이지에서 데이터 시각화를 생성하려면 HTML 웹 페이지에 D3.js를 포함해야합니다.
다음과 같은 방법으로 수행 할 수 있습니다.
- D3.js 라이브러리를 클라이언트 컴퓨터에 다운로드하고 d3.min.js의 경로를