@@ -62,12 +62,18 @@ SVG 요소를 정확하게 위치시키고 크기를 조정하는 것이 처음
해결 방법:
SVG 좌표계를 이해하고, 각 요소의 속성을 설정할 때 상대적 위치와 크기를 계산하는 연습을 했다. 또한, 브라우저의 개발자 도구를 활용하여 실시간으로 요소의 위치와 크기를 조정해보며 결과를 확인했다.
- svg 좌표계
- SVG(Scaleable Vector Graphics)는 XML 기반의 벡터 이미지 형식으로, 위치와 크기를 설정할 때 특정 좌표계를 사용한다.
일반적으로 좌상단이 원점(0, 0)이며, x는 좌에서 우로 증가하고, y는 위에서 아래로 증가한다.
## 3. 동영상 제작 과정
### 1. D3.js 소개 및 SVG 설명 및 실습
-`svgtest.html`
-**내용:** D3.js 소개와 SVG 기본 요소인 rect, circle, line, polygon 등을 설명하고 실습.
-**학습 목표:** D3.js와 SVG의 기본 개념을 이해하고, 간단한 SVG 요소를 활용하여 기본 도형을 그려보는 것을 목표로 하했다.
### 2. 막대 그래프 구현 실습
-`bar.html`
-**내용:** 데이터 배열을 바인딩하고, 각 데이터 요소에 대해 rect 요소를 추가하여 그래프를 구성. 각 막대는 데이터 값에 따라 위치와 크기가 결정됨을 설명하고 실습
...
...
@@ -83,6 +89,7 @@ SVG 좌표계를 이해하고, 각 요소의 속성을 설정할 때 상대적
-**내용:** 공공 데이터를 활용하여 지역별 전기차 수를 막대 그래프와 지도로 시각화.
-**학습 목표:** 공공 데이터를 활용하여 실제 데이터를 시각화하는 방법을 익히고, 다양한 SVG 요소를 활용하여 지도를 표현하는 방법을 이해하는 것을 목표로 했다.
## 4. 참고 자료
- D3.js 공식 문서: https://d3js.org/
- 다양한 D3.js 튜토리얼과 예제 코드
...
...
@@ -102,6 +109,6 @@ Open Source Software 도구를 교육하는 동영상 콘텐츠 제작 과정은
### 향후 계획과 개선점
- 사용자 피드백 반영: 사용자들의 피드백을 적극적으로 반영하여 강의 내용을 지속적으로 개선하고 업데이트가 가능하다면 지속적으로 할 예정이다. 이를 통해 더욱 효과적이고 유익한 교육 콘텐츠를 제공하고자 한다.
### 마무리
## 6. 마무리
이번 동영상 콘텐츠 제작 과제는 단순히 기술을 익히는 것을 넘어, 이를 효과적으로 전달하는 방법을 배우는 데 큰 도움이 되었다. D3.js와 같은 강력한 도구를 더 많은 사람들에게 알리고, 이를 통해 데이터 시각화의 중요성과 활용 가능성을 널리 알리는 계기가 되었다고 생각한다. 앞으로도 이러한 교육 콘텐츠 제작을 통해 더 많은 사람들에게 도움이 될 수 있도록 노력할 것이다.
