Thumbnail
개발 · 프로그래밍 프론트엔드

지금 바로 D3.js 시작하기 : 웹 데이터 시각화 대시보드

(4.8)
9개의 수강평 ∙  716명의 수강생
SVG

33,000원

지식공유자: The Oreum
총 36개 수업 (6시간 22분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드] 강의입니다.

🤔 D3를 공부하고 싶지만 너무 어려워 고민하셨나요?? 지금 바로! 이 강의로 D3에 대한 기본 개념과 활용법을 익혀 쉽고 빠르게 나만의 시각화 결과물을 만들어보세요

✍️
이런 걸
배워요!
데이터 시각화
D3의 기본 개념과 활용법
SVG 개념과 컨트롤
기본 메소드를 활용한 도형과 그래프 그리기
다양한 형식의 데이터 다루기(csv, tsv, json 등)
bar, line 을 이용한 실용(실전) 그래프 그리기
필수 생성기, 컴포넌트, 레이아웃 활용법
지도 등 화려한 그래프 그리기

D3.js란? 🤔

 

GitHub - d3/d3-logo: D3 brand assets.
D3는 Data - Driven Documents의 약자로
동적이고 인터렉티브한 정보 시각화를 구현하기 위한
자바스크립트 라이브러리입니다.

최근 코로나 맵을 비롯한 다양한 정보 시각화에 사용되고 있습니다.


D3.js를 사용하는 이유 🎨

  1. SVG를 통해 다양한 해상도에서 깨짐없는 시각화 표현이 가능합니다.
  2. 단순히 템플릿을 선택하는 것이 아닌 자유로운 커스텀이 가능합니다.
  3. 웹 표준인 HTML, CSS, SVG로 구현되어 프레임워크의 제약이 적습니다.


강의에서 무엇을 배우나요? 🕵️‍♀️

  1. D3의 기본 개념과 활용법
  2. 데이터를 다루고 시각화 하는 방법
  3. SVG 개념과 컨트롤
  4. 기본 메소드를 활용한 도형과 그래프 그리기
  5. 다양한 형식의 데이터 다루기 (csv, tsv, json 등)
  6. 실무에서 다루는 그래프
  7. 실무에서도 다루지 않을 것 같은 화려한 그래프


이런 분들께 추천드려요 🙋

  1. 지금 바로 실무에 투입되어야 하는 개발자
  2. D3가 무엇인지 궁금하신 분
  3. D3의 기본 개념과 활용을 공부하고 싶은 입문자
  4. 공식 문서를 활용하여 다양한 시각화를 경험하고 싶으신 분
  5. JavaScript를 사용해 나만의 데이터를 시각화하고 싶으신 분
  6. 데이터 시각화 라이브러리를 찾으시는 분

 

지금 바로 실무 투입 되어야 하나요?
지금 바로 프로젝트 하셔야 하나요?
지금 바로 과제 제출하셔야 하나요?
지금 바로 학생, 신입사원 교육해야 하나요?
지금 바로 웹 데이터 시각화 해야 하나요?

✔️ 빠르게 보고 적용하세요!
 - 소스코드만 가져다 복붙으로 만들 수 있는 다양한 예제를 준비하였습니다.

✔️ 강의자료에서 편하게 찾아보세요!
 - 검색하지 않아도 이해하실 수 있도록 강의 Notion 페이지를 제공합니다.

✔️ 이 Notion 강의자료로 교육하세요!
 - 2022년 5월 기준 v7 최신 버전입니다.
 
* 2022년 6월에 D
3 네트워크 그래프 (Force-Directed graph, 힘-방향 그래프)가 추가되었습니다.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
데이터를 시각화 해야 하는 분
실무에서 D3를 지금 바로 사용해야 하는 개발자(개발자 분들은 4배속으로 보세요.)
D3가 무엇인지 궁금하신 분
D3의 기본 개념과 활용을 공부하고 싶은 입문자
공식 문서를 활용하여 다양한 시각화를 경험하고 싶으신 분
JavaScript를 사용해 나만의 데이터를 시각화 하고 싶으신 분
📚
선수 지식,
필요할까요?
JavaScript 기본 문법
CSS 기본 문법

안녕하세요
The Oreum 입니다.
The Oreum의 썸네일

더 오름은 제주코딩베이스캠프의 프리미엄 브랜드로 주로 실무, 취업과 연관된 강의를 제작하고 있습니다.

제주코딩베이스캠프에서 이론적인 지식을 획득하셨다면, 더 오름의 실전 강의들을 통해 포트폴리오와 실무 능력들을 모두 가져가세요! 

" 2%를 채우기 위한 여러분의 집념과 열정을 응원합니다! "

 

︎ 더 오름 로드맵

image

공동 지식공유자: 제주코딩베이스캠프의 썸네일 Hojun Lee의 썸네일
커리큘럼 총 36 개 ˙ 6시간 22분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의소개 및 강의 자료
강의소개 미리보기 02:58
강의 자료(노션 페이지 링크)
코딩연습장 미리보기 제코베 포트폴리오 템플릿 미리보기
제코베 챌린지
제코베 챌린지(개발자 버전)
섹션 1. 지금 바로 D3.js 시작하기
D3의 개념과 도형 그리기 미리보기 13:09 SVG 미리보기 09:32
막대 그래프 그리기 09:11
산점도 그래프와 enter, exit 08:40
데이터 로드(csv, tsv, json, xml) 16:04
데이터 컨트롤 14:36
실전처럼 막대 그래프 그리기(bar) 21:47
실전처럼 막대 그래프 그리기(bar and line) 03:29
(참고) 실전처럼 막대 그래프 그리기(scatter 그려보기) 04:44
생성기, 컴포넌트, 레이아웃(생성기 line) 08:53
생성기, 컴포넌트, 레이아웃(생성기 area) 02:27
생성기, 컴포넌트, 레이아웃(생성기 arc) 05:34
생성기, 컴포넌트, 레이아웃(컴포넌트) 05:37
생성기, 컴포넌트, 레이아웃(레이아웃_pie) 02:53
생성기, 컴포넌트, 레이아웃(레이아웃_historgram) 02:27
생성기, 컴포넌트, 레이아웃(레이아웃 _pack과 _hierarchy(stratify)) 15:52
생성기, 컴포넌트, 레이아웃(레이아웃 _tree와 tree 그래프 그리기) 05:17
지리데이터 08:38
상호작용 03:44
[22년 6월 추가영상] D3 네트워크 그래프 (Force-Directed graph, 힘-방향 그래프) 20:17
섹션 2. [부록] React에서 D3 기본차트 그려보기
React 프로젝트 생성, 배포하기 07:25
D3 설치하고 기본차트 React에서 그려보기 04:41
섹션 3. [부록] Chart.js, Canvas API
공지(Chart.js 버전 차이)
Chart.js 미리보기 14:14
Canvas API 11:38
강의 게시일 : 2022년 05월 30일 (마지막 업데이트일 : 2022년 07월 20일)
수강평 총 9개
수강생분들이 직접 작성하신 수강평입니다.
4.8
9개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
우디 thumbnail
5
강의 알차요
2022-06-03
장현철 thumbnail
5
잘가르키노
2022-06-10
digilog thumbnail
5
d3.js 기본을 빠르게 overview 볼수 있는 것이 좋은 것 같습니다.
2022-06-14
SoriBada thumbnail
5
빠르게 개념을 정리하기에 좋았습니다
2022-10-12
soeun8477 thumbnail
5
이 강의를 들으며 제공해주신 코드를 참고하여 열심히 실습해보았습니다. 확실히 직접 해보니 응용도 할 수 있게 되고 제 지식이 된 것 같아 너무 좋았습니다!!
2023-04-27