정보실

웹학교

정보실

javascript D3.js를 배우는 방법

본문

D3.js는 무엇이며 어떻게 배울 수 있습니까?


D3이란 무엇입니까? 


D3.js가 포괄적 인 프레임워크 인 것처럼 보이지만 실제로는 작은 모듈의 모음일 뿐입니다. 다음은 모든 모듈입니다. 각 모듈은 원으로 표시됩니다. 큰 원은 파일 크기가 큰 모듈입니다.


98d0b54c2b96eb8120cae03ca9979010_1567988043_8717.png
 

와우! 이 모든 패키지를 한 번에 보는 것은 정말 압도적입니다.


기능별로 그룹화 된 특정 모듈에 대해 이야기합시다.


https://wattenberger.com/blog/d3 


목 차

  1. Intro
  2. Grabbing data
  3. Manipulating data
  4. Manipulating the DOM
  5. Drawing SVG shapes
  6. Converting data to the physical domain
  7. Dealing with colors
  8. Dealing with datetimes
  9. Animation
  10. Maps and globes
  11. Specific visualizations
  12. Resources

데이터 잡기 


데이터를 시각화 할 때 가장 먼저 해야 할 일은 무엇입니까?


물론 데이터를 얻으십시오!


웹 페이지의 데이터에 액세스하는 방법에는 여러 가지가 있습니다. Javascript 파일에서 하드 코딩하는 것부터 데이터베이스 쿼리에 이르기까지 다양합니다.


가장 간단한 방법 중 하나는 정적 파일에 저장하고 가져 오는 것입니다.


네이티브 자바 스크립트 API를 사용하여 파일에서 텍스트를 가져올 수는 있지만 직접 파싱해야 합니다.


d3-fetch 


d3-fetch는 파일에서 데이터를 가져 와서 자바 스크립트 객체로 파싱하는 유틸리티 메소드를 제공합니다.


json 


JSON (JavaScript Object Notation)은 일반적인 Javascript 객체와 매우 유사한 파일 형식입니다.

{
2.
"items": [{
3.
"date": "2018-10-10",
4.
"weather": "cloudy",
5.
},{
6.
"date": "2018-10-11",
7.
"weather": "sunny",
8.
}]
9.
}

JSON 파일은 일반적인 음성과 비슷하기 때문에 날씨가 맑기 때문에 읽기 쉽습니다. 또한 매우 유연하며 중첩 된 데이터 구조를 나타낼 수 있습니다.


dsv 


DSV (구분 기호로 구분 된 값)는 클래식 테이블을 모방 한 파일 형식입니다. 텍스트의 첫 번째 행은 열이 무엇인지 말하고 나머지 행은 데이터의 "행"입니다.


date, weather
2.
2018-10-10, cloudy
3.
2018-10-11, sunny


각 열은 특정 구분 기호로 구분됩니다.


D3을 사용하면 구분 기호를 지정할 수 있지만 가장 일반적인 두 가지 유형에 대한 특정 방법도 있습니다.


쉼표로 구분 된 값 (csv

탭으로 구분 된 값 (tsv).


dsv 파일은 읽기가 다소 어려울 수 있지만 열 이름을 반복하지 않기 때문에 json 파일보다 훨씬 작습니다. 위의 두 작은 예제를 비교하십시오.


과거에는 두 형식간에 데이터를 변환해야 했습니다. 편리 할 수 있는 CSV2JSON이라는 훌륭한 도구가 있습니다.


misc 


d3-fetch는 svg, image, html xml과 같이 데이터를 저장하지 않는 다양한 다른 형식도 지원합니다.


d3-fetch에서 메소드는 파일 형식의 이름 일 뿐이며 파일의 URL이라는 하나의 매개 변수를 사용합니다. 이러한 방법 중 하나를 실행하면 분석 된 데이터로 해결되는 Promise으로 응답합니다.


Promises에 익숙하지 않다면 The Coding Train 또는 MDN 문서에서 이 훌륭한 비디오 설명을 확인하십시오.


예를 들어 노르웨이 오슬로의 현재 날씨를 파악하기 위해 MetaWeather API를 쿼리하고 구문 분석 된 응답에서 온도를 가져올 수 있습니다.


브라우저의 개발자 도구 콘솔 탭에서 이 예제를 복사하여 실행하거나을 눌러 실행하십시오.


const url = "https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/862592/"

d3.json(url)

  .then(res => {

    alert(`Current temperature: ${

      res.consolidated_weather[0].the_temp

    }°C`)

  })

  .catch(() => {

      alert("Oh no, something horrible happened!")

  })


d3-fetch는 정말 작은 라이브러리입니다. 각각 약 8 줄의 코드를 가진 8 개의 파일 만 있습니다. 실제 무거운 작업은 실제로 다른 모듈에서 발생합니다.


문서에서 d3-fetch에 대해 자세히 알아보세요.


d3-dsv 


d3 API의 장점 중 하나는 매우 모듈 식이라는 것입니다. 이를 통해 원하는 경우 내부 논리를 자주 사용할 수 있습니다.


d3-dsv에는 Javascript 객체와 dsv 형식간에 변환하는 많은 방법이 있습니다. 또한 구분 기호가 다른 JSON, dsv 및 dsv 간 변환을 위한 명령 행 유틸리티도 있습니다.


문서에서 d3-dsv에 대해 자세히 알아보십시오.


데이터 조작 


이제 데이터를 가져 왔으므로 작업 할 수 있는 형식으로 데이터를 연결해야 합니다. d3에는 데이터를 변환하고 쿼리 할 때 매우 유용한 모듈이 있습니다.


d3-array 


d3-array가 cov하지 않는 것에 대해 이야기하면서 시작합시다.


비싼 데이터 조작 


장기 실행 작업으로 인해 사용자의 기기 속도가 느려질 수 있기 때문에 (특히 오래된 전화를 사용하는 경우) 웹 사이트의 데이터에 액세스하기 전에 실제로 이러한 상황이 발생해야 합니다.


기본 자바 스크립트 메소드 


바닐라 자바 ​​스크립트는 요즘 꽤 강력합니다. 브라우저에서 데이터 변환에 도움이 되는 많은 방법이 이미 있습니다. 다음은 Array 메서드의 전체 목록입니다.


이 방법 중 일부는 d3 모음에서 다루었으며 이제는 더 이상 특수 라이브러리가 필요하지 않으므로 더 이상 사용되지 않습니다! 🎊 


d3 배열로 무엇을 할 수 있습니까?


기본 통계 


d3 배열에는 데이터 세트에 대한 기본 질문에 답변하는 11 가지 방법이 있습니다.


아마도 가장 많이 사용하는 메소드는 가장 높은 값과 가장 낮은 값을 찾는 방법 (d3.max() / d3.min())과 극단 값 (d3.extent())을 반환하는 방법입니다. 이것들은 스케일을 만들 때 유용합니다 (데이터 도메인 간 변환을 위해 모듈에서 다룹니다).


d3.mean(), d3.median(), d3.quantile(), d3.variance() 및 d3.deviation()과 같은 다른 통계를 찾는 방법도 있습니다.


이러한 메소드를 사용하려면 두 가지 매개 변수를 사용하여 호출하려고 합니다.


our dataset 


첫 번째 매개 변수는 우리가 관심 있는 값을 포함하는 배열이어야 합니다


an accessor function (optional) 


두 번째 파라미터는 d3에게 하나의 데이터 포인트 내에서 값을 찾는 방법을 알려줍니다. 기본적으로 항등 함수 (d => d)로 설정됩니다. 이는 데이터 집합이 값 배열인 경우 이 매개 변수가 필요하지 않음을 의미합니다.


예를 들어,이 온도 목록의 평균을 찾으십시오.


const dataset = [{

    date: "2019-10-10",

    temp: 10,

},{

    date: "2019-10-11",

    temp: 12,

}]


const mean = d3.mean(dataset, d => d.temp)

alert(mean)


Questions about order 


d3- 배열은 또한 두 가지 주요 방법으로 배열에서 특정 항목을 찾는 데 도움이 될 수 있습니다.


가장 작은 값을 가진 항목을 찾으십시오. 

d3.least()는 항목을 반환하고 d3.leastIndex()는 항목의 인덱스를 반환합니다.


특정 값에 가장 가까운 항목을 찾으십시오. 

d3.bisect()는 정렬 된 배열과 값을 가져 와서 값이 맞는 인덱스를 반환합니다.


예를 들어 이 배열에서 숫자 12가 적합한 위치를 찾을 수 있습니다.


const array = [10, 20, 30, 40, 50, 60]

const nearestValueIndex = d3.bisect(array, 12)

alert(nearestValueIndex) // is 1

// compiled array: [10, 12, 20, 30...]


접근 자 또는 비교기 함수 (d3.bisector())를 사용하거나 인덱스를 (d3.bisectLeft())보다 낮게 또는 (d3.bisectRight()보다 높게 할 지 여부를 지정하는 것과 유사한 몇 가지 bisect 함수가 있습니다. ) 기존 일치하는 값


이 이등 분선 함수는 툴팁을 만들 때 매우 유용합니다. 사용자 커서와 가장 가까운 지점을 찾는 것이 차트와 쉽게 상호 작용할 수 있는 좋은 방법입니다.


사용할 수 있는 편리한 비교기 함수는 d3.ascending()과 d3.descending()입니다.


Transformations 


Lodash와 같은 유틸리티 라이브러리에서 볼 수 있는 소수의 d3 배열 함수가 있습니다. 이를 통해 다음과 같은 작업을 수행 할 수 있습니다.


특정 키로 객체 목록을 그룹화합니다. d3.group()은 그룹화 된 객체를 반환하고 d3.rollup()은 그룹화 된 인덱스를 반환했습니다.


두 배열의 순열 목록을 작성하십시오. d3.cross()


특정 인덱스나 키에서 항목을 가져 와서 새 배열을 만듭니다. d3.permute()


배열 항목 섞기 : d3.shuffle()


두 숫자 사이의 개수를 세는 배열을 만듭니다. d3.range()


두 배열 압축 : d3.zip()


이러한 방법 중 일부는 아직 핵심 d3 패키지에서 사용할 수 없습니다. 새 패키지 표시 ... 이를 직접 확인하려면 모듈 버전은 기본 d3 packages.json 파일에 있고 모듈의 변경 로그는 릴리스 목록에 있습니다. 이 새로운 방법을 사용하려면 d3-array, 버전 2+를 가져와야 합니다.


Binning 


데이터 세트를 빈으로 청크하는 d3 배열 메소드 그룹도 있습니다. 이것은 히스토그램과 같은 버킷 차트를 만드는 데 정말 유용합니다.


d3-random 


테스트 데이터를 생성해야 할 때처럼 데이터 시각화에 임의의 숫자가 필요한 경우가 있습니다. 또한 난수를 사용하여 지터를 추가하여 차트의 포인트를 배치하는 데 도움을 줍니다. 지터가 데이터를 나타내지 않는 것이 분명하다면 도움이 됩니다!


......
















  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 10회 ]  작성일19-09-09 09:43

웹학교