[D3.js] Observable 사이트 소개
[D3.js] Observable 사이트 소개
오늘은 D3.js를 공부할 때 시각화 코드에 대한 이해를 돕기 위해 학습용으로 좋을 것 같은 사이트를 소개 합니다. 지난 시간에 곡선 라인을 간단히 소개했는데 컴퓨터 상에서 라인을 그릴 때 대표적인게 베지에 곡선이고 이 곡선은 선형대수학을 공부하시면 수학적으로 한번 풀어 보셨을 거에요. 아무튼 이 곡선을 어떻게 만들어지는지에 대한 설명이 이 곳에서 자세히 설명이 되고 있는데 보시면 좋을 것 같아 소개 합니다.
Observable 사이트

보시는 것처럼 다양한 수학적 시각화한 이미지들을 보실 수 있을 거에요.

베지에 곡선 예제
베지에 곡선에 대한 설명을 살펴 보기 위해서 클릭하면 d3.js Mike Bostock 이분은 D3.js에서 계속 봐왔던 분이시죠. 이곳에 게시물이 검색되어 나와 있네요.

이 페이지 아래로 이 곡선에 대해서 자세히 설명이 나와있는데 한번 가보셔서 어떻게 곡선이 만들어지는지 그 과정으 살펴 보시기 바랍니다.
이 곡선에 대해서 애니메이션효과로 설명이 되어 있는데 녹화프로그램을 해당 페이지를 영상을 찍어 봤네요.

애니메이션으로 보니깐 뭔지는 모르지만 곡선이 이렇게 그려지는 구나하고 시각적으로는 이해 하실 수 있을 거에요.
마무리
하나를 선택해서 깊게 이야기 하면 좋은데 그러지는 못했네요. 제가 이야기 하는 것보다 해당 저작물을 보시면 이해하시는 것이 더 나을 것 같아서 소개만 간단히 합니다.
다양한 시각화 이미지드이 많으니깐 그 이미지가 어떻게 만들어졌는지 설명을 읽어보시는 것도 괜찮을 것 같아서 강력 추천합니다.
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨 방문 감사합니다.
아.. 어렵군요..ㅠ
수학하고 안친해서 더 그런가 봅니다.
뭔지는 모르겠지만 에니메이션으로 보이는 부분은
곡선이 그려지는 모습이 신기하네요..^^;
저분이 d3.js 저자라 저 외국분 글을 보면 도움되는게 많더군요.
정말 다양한 그래프를 만들 수있군요
이걸 이해하면 꽤 고퀄리티 차트를 만들 수 있을 듯 싶네요.
재주가 정말 뛰어나심니다.ㅎㅎ
이번 편은 그냥 소개만 했는데...
솔직히 잘 이해못하겠는데요. 그래서 더 재밌는 것 같기도 하고 그래요 ㅎㅎ
수학은 어렵지만 알고 나면은 신기하고 재밌는 것 같아요.
저도 수학 진짜 좋아합니다. ㅋㅋ 광이에요. ㅎㅎ
다른 영역과 다르게 수학은 정답이 있어서 좋아요
음. 저도 그렇게 생각했었는데 요새는 잘 모르겠습니다.