본문 바로가기

Workshop Index

[한국어 ]Digital Mapping, Data Visualization / 디지털 매핑, 데이터 시각화

Web based Digital Mapping, Data Visualization / 웹 베이스 디지털 매핑, 데이터 시각화

플레이리스트 link

 

Web based Digital Mapping, Data Visualization / 웹 베이스 디지털 매핑, 데이터 시각화

 

www.youtube.com

 

 

✍️이런 걸 배워요!

GIS 데이터를 매핑할 수 있어요

데이터를 Canvas에 시각화 할 수 있어요

인터액티브 시각화를 할 수 있어요

Typescript 언어를 사용해요

HTML Canvas, ArcGIS JSAPI 등의 API를 사용해요

 

주제 소개 📝

빅데이터(Big Data), 혹은 GIS 들어 보셨나요? 지리정보시스템(Geographic Information System)으로서, 쉽게 설명해 위치 정보를 가지고 있는 데이터 시스템이라 볼 수 있어요. 위치 정보를 가지고 있는 이러한 데이터들은 어떻게 시각화를 하면 좋을까요? 디지털 매핑 워크숍을 통해 함께 공부해봐요!

 

웹(Web)에서, 여러분들만의 매핑 툴을 만들어 봐요! ArcGIS의 JSAPI를 이용해서 인터액티브 데이터 시각화를 공부할 수 있어요. 크리에이티브 코딩, 데이터 시각화, 매핑에 관심 있으신 분들에게 추천드립니다. JSAPI를 어떻게 활용할 수 있을지, HTML Canvas에 그림을 어떻게 그리는지, 인터액티브 시각화 혹은 매핑에 대해서 공부해 봐요! 나중에 관련된 예제들도 업데이트 예정입니다.

왜 배워야 하는지 ✒️

4차 산업 혁명은 디자인 영역에도 큰 변화를 가져옵니다.

특별히 디자이너들이 디자인 데이터를 접근하고 활용하는 방법에 대해서 학습할 수 있습니다.

크리에이티브 코팅, 컴퓨테이셔널 디자이너, 데이터 시각화 전문가로 커리어를 쌓고 싶으신 분들께 추천드려요.

이 강의에서 배우는 것들 ✏️

도시 정보를 시각화 시키고 싶으신 분들

인터액티브 시각화 앱을 만들 수 싶으신 분들
데이터를 통한 크리에이티브 코딩을 공부하고 싶으신 분들


강의 수강 꿀팁!

 

🎓이런 분들께 추천드려요!

건축 혹은 3D 디자이너 중, 코딩을 공부하고 싶으신 분들

컴퓨테이셔널 디자인을 공부하고 싶은신 분들

컴퓨테이셔널 지오메트리를 공부하고 싶으신 분들

라이노와 그라스하퍼를 코딩으로 제어하고 싶으신 분

 

📚 선수 지식, 필요한가요?

Javascript

 

강의수준

입문 / 초급 / 중급 이상

 

 

 


Mapping Workshop 01, Introduction / 시작하면서-link

00:21 - 오늘의 주제 Mapping / Data Visualization

00:53 - 도시재생, 도시 디자인(Urban design), 도시 분석...

01:32 - Web-based data visualization, 그리고 기술 설명(Typescript, ArcGIS JSAPI)

 

Mapping Workshop 02, Basic Code Structure / 코드 구조 - link

00:00 - Github 소개

01:20 - IDE(개발 환경), Visual studio code

03:29 - 실행하기

04:01 - 코드 구조 설명

05:18 - Sandbox main 클래스 설명

06:00 - 프로젝션(Projection) 설명

...............................................

06:57 - 렌더러(Renderer) 설명

07:34-! 중요한 부분 - 우리가 수정해야 영역

10:54 - 포인트 만들기

16:29 - 마무리

 

Mapping Workshop 03, US ZIP Data Visualization - link

00:00 - 오늘의 주제: US Zip

00:21 - 데이터 설명

00:53 - 랜더러(Renderer) 세팅

05:06 - 데이터 출력

05:36 - 지도 위치 설정 (setting zoom and extent)

06:19 - 데이터로 포인트 만들기

07:28 - 프로젝션(Projection)

09:34 - 랜더러(Renderer) 수정

10:22 - 포인트 데이터 줄이기

12:56 - 나머지 연산자(Modulus Operator)

14:26 - 랜더러(Renderer): 컬러(Color) 수정

18:16 - 요약


Introduction to Mapping Sandbox for Mapping & Data Vis on Web - 한국어 - link

ArcGIS JSAPI를 활용한 매핑 Sandbox입니다! HTML Canvas를 사용합니다. 즉 웹(Web)에서, 여러분들만의 매핑 툴을 만들어 봐요!

 

00:00 - 오늘의 주제: 매핑 시각화 업데이트

00:15​ - GitHub 그리고 설치 설명!

01:55 - ArcGIS JSAPI

02:45 - Visual Studio Code

03:18 - 노드 패키지 매니저, NPM

..............

05:39​ - 코드 설명!

06:41 - 구조/패턴 설명

08:45 - 맵뷰 이벤트 / MapView Event

09:54 - 캔버스/ HTML Canvas

12:36 - 마우스 이벤트 / Mouse Event

16:03 - 프로젝션 / Projection

..............

17:50​ - 예제 설명!

19:00 - 다른 예제 설명!

19:37 - HTML Canvas API 설명

..............

21:13 - Point class 설명

21:45 - Vector class 설명

24:16 - 과제

..............

28:35 - 마무리

 


Coming soon...

Geometry Polyline / Area

 

Visualizing GeoJson

 

Bin System for data visualization

 

Clustering Points: Collision-Based Dynamic Graph method