From f69c49372292a043a08a114e5b0f60a40dddafd4 Mon Sep 17 00:00:00 2001 From: NAAE CHO <tinon1004@ajou.ac.kr> Date: Sun, 23 Jun 2024 23:53:40 +0900 Subject: [PATCH] Update README.md --- README.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index daabbdb..702726a 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ ## 주제: D3.js 튜토리얼 및 공공 데이터를 이용한 실습 ## 0. D3.js + + D3.js (Data-Driven Documents)는 데이터 시각화를 위한 자바스크립트 라이브러리로, HTML, SVG, CSS를 사용하여 데이터를 동적으로 시각화하는 데 사용된다. D3는 데이터와 DOM(Document Object Model) 요소를 바인딩하고, 데이터를 기반으로 문서의 요소를 만들고 변형하는 데 필요한 강력한 기능을 제공한다. ### 주요 특징과 기능 @@ -88,28 +90,46 @@ SVG 좌표계를 이해하고, 각 요소의 속성을 설정할 때 상대적 - SVG(Scaleable Vector Graphics)는 XML 기반의 벡터 이미지 형식으로, 위치와 크기를 설정할 때 특정 좌표계를 사용한다. 일반적으로 좌상단이 원점(0, 0)이며, x는 좌에서 우로 증가하고, y는 위에서 아래로 증가한다. +### 문제점 3: CORS 문제 +외부 파일에서 데이터를 바인딩을 하거나 연동을 하면 CORS 문제가 발생하여, 처음에는 굉장히 당황했다. 해결하면서 SERVER를 직접 설치하고, 실행하는 과정을 거치면서 해결할 수 있었다. + +``` +# http-server 전역 설치 (-g 옵션) +npm install -g http-server + +# 로컬 디렉토리에서 http-server 실행 +http-server +``` + +해결 방법: +하지만 이 방법은 초보자 대상 실습에서 진입장벽을 제공하기 때문에, 서버를 설치하는 대신 HTML 파일 안에 직접 데이터를 넣어 코드를 작성하는 방법으로 진행했다. 이 방법은 실습을 더 간편하게 하기 위한 선택이었다. + + ## 3. 동영상 제작 과정 ### 1. D3.js 소개 및 SVG 설명 및 실습 - `svgtest.html` - **내용:** D3.js 소개와 SVG 기본 요소인 rect, circle, line, polygon 등을 설명하고 실습. - **학습 목표:** D3.js와 SVG의 기본 개념을 이해하고, 간단한 SVG 요소를 활용하여 기본 도형을 그려보는 것을 목표로 하했다. - + ### 2. 막대 그래프 구현 실습 - `bar.html` - **내용:** 데이터 배열을 바인딩하고, 각 데이터 요소에 대해 rect 요소를 추가하여 그래프를 구성. 각 막대는 데이터 값에 따라 위치와 크기가 결정됨을 설명하고 실습 - **학습 목표:** 데이터 바인딩과 rect 요소를 활용하여 막대 그래프를 구현하는 방법을 익히고, 데이터 시각화의 기본 개념을 이해하는 것을 목표로 했다. + ### 3. 산포도 그래프 구현 실습 - `scatter.html` - **내용:** 데이터 배열을 바인딩하고, 각 데이터 요소에 대해 circle 요소를 추가하여 그래프를 구성. 각 점은 데이터 값에 따라 위치가 결정됩니다. x축과 y축을 설정하여 데이터의 범위를 시각적 표현함을 설명하고 실습 - **학습 목표:** 산포도 그래프를 구현하는 방법과 축 설정 방법을 익히고, 데이터를 시각적으로 표현하는 방법을 이해하는 것을 목표로 했다. + ### 4. 공공데이터 이용한 막대 그래프 구현 및 지도 svg 사용 실습 - `car.html`, `map.html` - **내용:** 공공 데이터를 활용하여 지역별 전기차 수를 막대 그래프와 지도로 시각화. - **학습 목표:** 공공 데이터를 활용하여 실제 데이터를 시각화하는 방법을 익히고, 다양한 SVG 요소를 활용하여 지도를 표현하는 방법을 이해하는 것을 목표로 했다. + ## 4. 참고 자료 -- GitLab