diff --git a/README.md b/README.md index 1d284b21f10b7d9aae464395e0431b88d6071db4..6ed68822e03b9b94608fab838cd932c7e3ab9950 100644 --- a/README.md +++ b/README.md @@ -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와 같은 강력한 도구를 더 많은 사람들에게 알리고, 이를 통해 데이터 시각화의 중요성과 활용 가능성을 널리 알리는 계기가 되었다고 생각한다. 앞으로도 이러한 교육 콘텐츠 제작을 통해 더 많은 사람들에게 도움이 될 수 있도록 노력할 것이다.