d3js6 [D3JS] 7. 데이터 준비하기 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리하였습니다. 이번 강의에서는 html 표에서 데이터를 뽑는 방법, csv를 만들고 정리하는 방법, Github Gist를 이용해 데이터를 publish 하는 방법을 배웁니다. https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다. developer.mozilla.org css named color에 대해 들어보신 적이 있나요? 우리가 html에서 속.. 2021. 10. 21. [D3JS] 5. 얼굴 그리기 with Semantically meaningful JSX refactoring 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 듣고 정리하였습니다. [Compartmentalizing Complexity] Compartmentalize는 "서로 영향을 주지 않도록 구분하다"라는 뜻입니다. https://vizhub.com/curran/be34ae5bb6ef438b9047b0c717d5315c?edit=files&file=index.js Smiley Face Part V Splitting React components into multiple files using ES6 modules. Bonus: React Fragments! vizhub.com 지난 강의에 이어 위의 코드를 리팩토링 해봅시다. 19~20 번째 라인은 not semantically meaning.. 2021. 10. 11. [D3JS] 4. 얼굴 그리기 with React & ES6 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리하였습니다. 이번 강의에서는 - 리액트 컴포넌트 - 리액트 Props - JSX transpilation - ES6 - ES5의 함수와 ES6의 화살표 함수 - ES5의 var vs ES6의 let, const - ES6의 비구조화 할당 에 대해서 배웁니다. 우리가 사용하는 앱들도 새로운 업데이트가 생기듯 자바스크립트도 새 기능들이 업데이트 됩니다. 자바스크립트의 표준은 ECMA 스크립트인데요, 그래서 자바스크립트는 ECMA 스크립트 2019 혹은 ES6와 같은 이름으로 버전이 명명됩니다. ECMA 스크립트에 대한 설명은 위키백과 한국어보다 영어에 더 설명이 잘 되어 있습니다. https://en.wikipedia.org/wiki/E.. 2021. 10. 9. [D3JS] 3. React + d3 얼굴 그리기 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리한 것입니다. [ React + D3 얼굴 그리기 ] 드디어 D3를 사용하는군요! svg와 어떻게 다를지 궁금합니다. svg 에는 arc가 없지만 d3에는 arc가 있습니다. arc란 뭘까요? arc는 d3-shape에 있습니다. https://github.com/d3/d3-shape GitHub - d3/d3-shape: Graphical primitives for visualization, such as lines and areas. Graphical primitives for visualization, such as lines and areas. - GitHub - d3/d3-shape: Graphical primitives f.. 2021. 10. 4. [D3JS] 2. svg로 얼굴 그리기 이 글은 https://youtu.be/2LhoCfjm8R4 강의의 2번째 강의를 요약하였습니다. [ 웹 기술을 이용하는 이유 ] 시각화를 하는데 다른 기술(파이썬, R, 자바 등)이 아니라 웹 기술을 이용하는 이유는? 1. 웹 브라우저를 이용하여 누구나 접근 가능하다. 2. 내 컴퓨터에 설치할 필요가 없다. 3. 모던 자바스크립트 기술을 이용할 수 있다. 4. 커스텀 디자인 작업이 가능하다. 5. 상호 작용이 가능하다. 우리가 데이터 시각화를 하기 위해 쓰이는 기술은 위와 같습니다. 1. HTML : 웹 페이지의 내용과 간단한 형식을 표현합니다. 일종의 뼈대(Skeleton)과 같습니다. 2. CSS : 웸 페이지를 꾸밀 수 있습니다. 일종의 Skin(피부), Theme(테마)와 같습니다. 같은 HTM.. 2021. 10. 3. [D3JS] 데이터 시각화란 무엇인가 회사에서 D3JS를 써먹어 보기 위해 강의를 듣기 시작했습니다. https://youtu.be/2LhoCfjm8R4 이 강의를 들으며 정리를 해보려고 합니다! 이 강의는 양이 많고 자막이 없지만 d3js를 심도 있게 공부할 수 있고, 영어 리스닝 실력이 좋아지고(?), 무료이고, 무엇보다 Hooks를 이용한 React로 구현을 알려준다는 게 좋아서 이 강의를 선택했습니다. 강의를 해주시는 분은 Curran Kelleher이고 그의 유튜브 채널은 https://www.youtube.com/channel/UCSwd_9jyX4YtDYm9p9MxQqw 여기입니다. Visualization Analysis & Design (Tamara Munzner)의 책을 바탕으로 만든 강의라고 합니다. 데이터 시각화는 시각적.. 2021. 9. 25. 이전 1 다음
