🚔
24년 하반기 책 집필 목록/
사각사각 데이터 시각화 with React: 프론트엔드 개발자를 위한 데이터 시각화 실전 가이드사각사각 데이터 시각화 with React: 프론트엔드 개발자를 위한 데이터 시각화 실전 가이드
사각사각 데이터 시각화 with React: 프론트엔드 개발자를 위한 데이터 시각화 실전 가이드/
📝
목차
📝

목차

들어가며

머리말과 저자목록

Notion 링크, PDF 파일 및 QR 코드

Notion 링크
PDF 파일 및 QR 코드

1장 데이터 시각화란?

1.1 데이터 시각화, 왜 중요할까?
1.2 데이터 시각화의 긍정적인 사례
1.2.1 첫 번째 사례: 뉴욕 타임즈 'How the Virus Got Out' 기사
1.2.2 두 번째 사례: FiveThirtyEight의 선거 예측
1.2.3 세 번째 사례: Flightradar24
1.3 FE 개발자에게 데이터 시각화 지식이 필요한 이유
1.4 데이터 시각화에서 FE 개발자가 고려해야 할 점
1.4.1 반응형
1.4.2 접근성
1.4.3 직관성
1.5 이 책의 목적과 구성

2장 데이터 시각화 기초

2.1 데이터 시각화의 기본 개념
2.1.1 데이터, 정보, 지식의 관계
2.1.2 데이터 시각화의 목적
2.1.3 게슈탈트 원리와 데이터 시각화
  1. 가까운 것끼리 묶자 (근접성)
  1. 비슷한 것끼리 묶자 (유사성)
  1. 닫힌 것을 하나로 묶자 (폐쇄성)
  1. 나열된 요소를 하나로 묶자 (연속성)
2.1.4 색상 이론과 시각화에서의 적용
  1. 색상 조화
  1. 색상의 의미
  1. 색각 이상자를 위한 고려
2.1.5 데이터 인코딩: 시각적 변수
  1. 위치
  1. 길이
  1. 각도
  1. 면적
  1. 부피
  1. 색상
  1. 질감
2.2 데이터 시각화 유형
2.2.1 막대 차트
2.2.2 선 그래프
2.2.3 파이 차트
2.2.4 산점도
2.2.5 버블 차트
2.2.6 히트맵
2.2.7 지도: 단계구분도, 버블맵, 히트맵
  1. 단계구분도
  1. 버블맵
  1. 지도 히트맵

3장 사용 라이브러리 소개

3.1 데이터 시각화 라이브러리 소개
3.1.1 Chart.js
  1. 특징
  1. Chart.js는 언제 사용하는게 좋을까?
3.1.2 D3.js
  1. 특징
  1. D3.js는 언제 사용하는게 좋을까?
3.1.3 Leaflet
  1. 특징
  1. Leaflet은 언제 사용하는게 좋을까?
3.1.4 Canvas
  1. 특징
  1. Canvas는 언제 사용하는게 좋을까?
3.2 프로젝트 폴더 구조

4장 Chart.js를 사용한 데이터 시각화

4.1 소개
4.2 차트 사용법
4.3 차트 유형
4.3.1 Area Chart
4.3.2 Bar Chart
4.3.3 Bubble Chart
4.3.4 Doughnut and Pie Charts
4.3.5 Line Chart
4.3.6 Mixed Chart Types
4.3.7 Polar Area Chart
4.3.8 Radar Chart
4.3.9 Scatter Chart
4.4 공통 기능
4.4.1 x, y축 계산식
4.4.2 애니메이션 효과
4.4.3 컬러 설정
4.4.4 데이터 처리 방법 (JSON, CSV)
4.4.5 유용한 메소드들
4.5 실전예제
4.5.1 MBTI
4.5.2 나의 소비 패턴 확인하기
  1. 개요
  1. 데이터 준비
  1. 구현
4.6 실무에서 사용하는 Chart.js 폴더 구조
4.7 주의사항
4.7.1 공통 주의사항
4.7.2 차트 종류별 주의사항

5장 D3.js를 사용한 데이터 시각화

5.1 D3 개요
5.1.1 D3는 무엇인가?
5.1.2 D3 is low level toolbox
5.1.3 D3 구성요소
5.1.4 D3의 특징
5.1.5 D3와 React는 악어와 악어새 관계이다.
5.2 D3 시작하기
5.2.1 설치 방법
5.2.2 D3 이용에 필요한 요소 및 주의할 점
5.3 D3로 시각화 구성하기
5.3.1 시각화 구성 시작하기
5.3.2 D3 Architecture flow
5.3.3 시각화 구성요소
  1. selection
  1. axis
  1. scale
  1. color
  1. transition
5.3.4 D3 shape 종류
  1. Lines
  1. Bar
  1. Areas
  1. Pies
5.4 실전 예제
5.5 끝 마치며

6장 Leaflet.js를 사용한 지도 시각화

6.1 지도 데이터 시각화
6.2 Leaflet.js 소개 및 설치
6.2.1 CDN으로 불러오기
6.2.2 npm으로 설치하기
6.2.3 React Leaflet 라이브러리 사용하기
  1. 생명주기
  1. 주의사항
6.3 간단한 지도 생성하기
6.3.1 MapContainer - 지도 영역 만들기
6.3.2 TileLayer - 지도 보여주기
6.4 지도 위에 표현하기
6.4.1 Marker
6.4.2 Tooltip, Popup
  1. 인스턴스를 생성하여 bind하기
  1. 바로 bind하기
6.5 CSV를 사용한 데이터 시각화
6.6 지도 스타일링 및 커스터마이징
6.6.1 좌표계 설정하기
6.6.2 유용한 메서드 소개
6.7 왜 D3로 하지 않고 Leaflet을 사용하는가?
6.7.1 D3.js와 Leaflet의 차이점
  1. 데이터 시각화 vs 지도 생성
  1. 일반성 vs 특수성
  1. 코드 복잡성
  1. 커뮤니티와 문서
  1. 상호작용과 애니메이션
  1. 지리공간 기능

7장 Canvas를 사용한 동적 데이터 시각화

7.1 Canvas란?
7.1.1 Canvas란?
7.2 React에서 Canvas 사용하기
7.2.1 Canvas API의 주요 메서드
7.2.2 깃허브 Canvas 코드
7.2.3 Canvas 기본 코드
7.3 Canvas API 실습
7.3.1 useRef와 useEffect
7.3.2 width와 height
7.3.3 fillStyle와 fillRect()
7.3.4 beginPath()
7.3.5 moveTo(x, y)와 lineTo(x, y)
7.3.6 stroke()와 strokeStyle
7.3.7 lineWidth
7.3.8 JavaScript 추가 예제
7.4 Canvas 데이터 시각화 예제 - 일출 일몰 그래프
7.4.1 예제 사이트 확인하기
7.4.2 예제 조건 정의하기
7.4.3 구현 목표
7.4.4 배경 그리기
7.4.5 sin 그래프 그리기
7.4.6 슬라이더와 해 연결하기
7.4.7 시간에 따른 위치 계산 및 그래프로 표현하기
7.4.8 디자인 적용하기