이 무료 D3 시각화 데이터로 공부하세요.js 과정

강좌에 들어가려면 이미지를 클릭합니다.
D3.js는 HTML, SVG, CSS를 사용하여 데이터를 생활로 가져올 수 있는 JavaScript 라이브러리입니다.데이터에서 가치를 추출하는 것과 관련이 있을 때, 그것을 배우는 것은 당신에게 초능력을 가져다 줄 것이다. 왜냐하면 당신은 기본적으로 당신이 생각할 수 있는 가시화 효과를 만들 수 있기 때문이다.
그러나 가장 배우기 쉬운 창고가 아니기 때문에 공부를 시작하는 것은 좀 어려울 수 있다.이것이 바로 우리가 웹 개발자와 강사Sohaib Nehal와 합작하여 전체 과정에 하나의 강력한 라이브러리를 만들었기 때문입니다.
어떻게 배치했는지 봅시다!

컨텐트

이 과정은 총 한 시간도 안 되는 10개의 화면을 포함한다.그것은 선택, 조작, 데이터 로드 등 가장 기본적인 개념에서 시작한다.이것은 귀하가 이 과정의 나머지 부분에서 창설한 각종 가시화를 학습할 수 있도록 기초를 다졌습니다.

#1: 과정 소개

Scrimba 강좌와 마찬가지로 D3를 소개하는 동시에 강좌 내용을 빠르게 탐색합니다.js와 강사.

#2: 선택 및 작업

D3를 사용하여 DOM 요소를 선택하고 조작하는 방법을 배워야 합니다.js.이 라이브러리는 실제로 DOM을 조작하는 데 상당히 강하기 때문에 이론적으로 사용할 수 있다replacement for jQuery.

#3: 데이터 로드 및 바인딩

시각화를 만들 때 에서 데이터를 로드하는 방법과 DOM에 연결하는 방법을 배우는 것이 중요합니다.이 시간에 너희들은 이 점을 배울 것이다.

#4: 간단한 막대 그림 만들기

세 번째 수업에서 당신은 첫 번째 가시화: 간단한 조형도를 구축하는 방법을 배울 것입니다.우리가 이렇게 일찍 여러분께 구축 물건을 소개한 것은 단순히 이론을 이야기하는 것보다 시각화를 만드는 것이 훨씬 재미있기 때문입니다.그래서 우리는 네가 이 수업을 좋아할 것이라고 생각한다.

#5: 레이블 만들기

다음 단계는 라벨을 스트립트에 추가하는 것입니다. 왜냐하면 현실에서 당신은 항상 이렇게 하기를 원하기 때문입니다.이것은 간단한 강좌다.코드와 상호작용하는 간단하고 재미있는 방식이기 때문에, 탭의 위치를 사용하는 것을 권장합니다.

# 6: 천평

척도는 D3의 핵심 개념입니다.사용 가능한 공간과 같은 다른 관련 범위에 데이터를 매핑할 수 있습니다.본 과목에서 당신은 scaleLinear() 방법을 배울 것입니다.

var yScale = d3.scaleLinear()  
    .domain(\[0, d3.max(dataset)\])  
    .range(\[0, svgHeight\]);

#7: 축선

축은 모든 차트의 구성 부분입니다. D3는 간단한 방법을 제공합니다.이 과정은 축을 만들 때 축척을 사용하기 때문에 위의 과정을 바탕으로 합니다.이 과정의 마지막 화면에서 배울 수 있는 멋진 접선도를 이해하는 데도 도움이 된다.

#8: SVG 요소 생성하기

이 과정에서 SVG 요소를 만들었지만 매우 중요한 개념입니다.본고에서 당신은 <rect>, <circle> 및 <line> 원소를 이해하게 될 것입니다.

#9: 떡 그림 만들기

떡그림은 많은 경우에 편리하기 때문에 본 수업에서 떡그림을 만드는 방법을 배울 것입니다.D3는 간단한 API를 제공하므로 이 점에서 어렵지 않을 것입니다.

#10: 폴리라인 다이어그램 생성하기

마지막으로 비트코인 가격을 가시화하기 위해 접선도를 만드는 방법을 배울 것입니다.데이터를 가져오려면 외부 API를 사용합니다.이 프로젝트는 또한 당신이 전체 과정에서 배운 많은 개념을 한데 연결시킬 수 있기 때문에 이것은 매우 좋은 가시화 끝이다.
이렇게!이 10교시를 다 읽은 후에 당신은 D3를 사용하기 시작할 준비를 해야 합니다.당신의 일이나 개인 프로젝트에서
만약 네가 이 점에 도달한다면, 만약 네가 Sohaib 소리를 질러 줄 수 있다면, 우리는 감격을 금할 수 없을 것이다.

Scrimba 형식

당신이 떠나기 전에 수업 뒤의 기술을 빨리 알아보겠습니다.이것은 인터랙티브 인코딩 화면 재생 도구를 사용하여 구축된 것이다.scrim은 일반 영상처럼 보이지만 완전히 상호작용적이다.이것은 화면 방송에서 코드를 편집할 수 있다는 것을 의미합니다.
다음은 gif입니다. 이 개념을 설명합니다.
화면 재생 일시 중지→ 코드 편집→ 빨리 뛰어!→ 변경 내용 보기
코드를 정확하게 이해하기 위해 실험을 해야 한다고 생각하거나, 코드를 복사하고 싶을 때 유용합니다.
그럼 뭐 공부 해요?
읽어주셔서 감사합니다!저는 Per라고 합니다. 공동 창시자입니다. 저는 사람들이 새로운 기술을 배우는 것을 돕는 것을 좋아합니다.새 기사와 자원에 대한 통지를 받고 싶으시면 저에게 연락 주세요.