[음악 연주] 

데이비드는 Chouinard : 나는 데이비드 해요 는 Chouinard, 이는 D3이다. 에 오신 것을 환영합니다. 우리는 오늘 D3에 대해 배울 것입니다. D3는 자바 스크립트 프레임 워크입니다 높은 품질을 구축 웹에 대한 대화 형 시각화. 우리가 왜 왔는지 같은 것들 내 뒤에보고, 우리는 사람들을 배울거야 일, 그것의 기초 가지. 그러나 그것은 멋진거야. 시작하자 예쁜 그림을. 우리는 더 많은 데모있어 사용 가능 전망. 현실을하자. 

법 I, DOM은 manipulation-- 우리는거야 멋진 일을 바로 시작합니다. 먼저, 왼쪽에, 우리는 코드를 가지고있다. 오른쪽에, 우리는이 우리의 코드의 결과. 의 그것을 통해 가자. 

의이 원을 만들어 보자. 어떻게 그런 소리를합니까? svg.append circle-- 우리는 원했다. 당신이 바로 저를 믿지 않는? 그것은이 아니다. 

그래서 우리는 바로 여기에 무슨 짓을했는지, SVG는 확장 가능한 벡터 그래픽입니다. 이것은 우리가 브라우저를 말할 방법입니다 브라우저에서 벡터 그래픽을 제공합니다. 우리가 지금 당장 않았다 찾아 원을 추가됩니다. 

약속은 원 있다는 것입니다 기본 속성의 비트가 필요 우리는 실제로 볼 수 있습니다 전에. 우리는 그것의 x 위치를 알려줄 필요 그 y 위치, 반경. 우리는 그 어떤 것도 그것을 말해주지 않았다, 그래서 우리는 지금 그것을보고 아닙니다. 그러나의 물건을 말할 수 있습니다. 

그래서 우선, 당신이있어 우리 원의 이름을 지정합니다. 그럼 원을 호출 할 수 있습니다. 우리 원은 이제 이름이 있습니다. 그리고 이제 그것을 몇 가지 속성을 부여 할 수 있습니다. 어떻게 CX에 대해 너무, X를 중심 것 x 위치의 중심. 의 200 픽셀, 200을 가정 해 봅시다. 

의뿐만 아니라 그것을 200 픽셀의 Y를 줘 보자. 약 40 픽셀의 R, 반경. 이제 보자. 나는 철자 수 없습니다. 

거기 당신은 간다. 우리는 위치 200 원이 픽셀, 200 픽셀, 40 픽셀의 반경. 종류의 멋진, 오른쪽? 우리는 원을 가지고있다. 그래. 

그래서 필요 함께 따라가 없습니다. 이러한 모든 예, 모든 내가 오늘하고있어 코드 단부에서 온라인 제공한다 대화식 예의 형태 에서 검사 점 모든 행동, 등등. 

좀 더 물건을하자. 이 검은 색 원이 정말 밉다. 나는 그 오류에 대 한 미안 해요 거기 메시지. 우리가 이동합니다. 

의 그것에게 색을 줘 보자. 어때? 나는 스틸 블루에 좋아한다. 글쎄, 우리 원은 색상을 변경했습니다. 잘 됐네요. 의 그것이 반투명 만들어 보자 너무 ... 반투명. 

따라서 이러한 특성은 우리는 원을 정의하고 있습니다. 우리가했던 첫 번째 일은이다 우리는 페이지에 원을 넣어. 그리고 우리는 정의하고 속성의 무리입니다. 이들 중 일부가 필요합니다, CX, CY 및 반경 등을들 수있다. 그리고 다른 사람은 선택 사항입니다. 

더 많은 속성이 있습니다. 그들 중 많은이있다. 예를 들어, 우리가 있었다 뇌졸중뿐만 아니라, 빨간색의 뇌졸중. 그러나 이제 그를 제거 할 수 있습니다. 우리는 다시 원, 파란색 원에있어. 

그래서 좀 더 서클을 만들어 보자. 어때? 의 다른 원을 만들어 보자. 이거 흥미로운? 

그래서 난 그냥 복사 - 붙여 말 우리는 이미 있었다. 현실을 circle2를 부르 자. 그리고의 정확한 해 보자 같은 일을하고 그것을 제공 (300)의 x 위치 주어진 속성. 야호, 우리는 지금 두 개의 원이있다. 

그리고 물론, 우리는 할 수 이 값을 업데이트합니다. 나는 400에 넣을 수 있고, 지금은 이동합니다. 이 성가신 이후 그리고,하자 그래서 circle2.remove 제거합니다. 지금은 사라 졌어요. 

그래서 우리는 무슨 일을하는지와 이 아주 - 그냥 아주이다 당신 것과 매우 유사하다 예를 들어, jQuery를에서 할 수 있습니다. 우리는 단지 조작하고 DOM, 그것은라고. 전에는 그 말을 들어 본 적이 있습니다. 우리는 설정, 물건을 만드는 물건을 제거, 물건에 속성. 

흥미 얻는 경우 지금, 여기. 그래서 나중에 코드에서, 우리는 여전히 수 여기에 원래 원을 참조하십시오. 그럼 CX는 그것의 속성을 재설정 할 수 있습니다. 400의 x 위치,의가 있다고 가정 해 봅시다. 그리고 전환거야 즉, 그것은 분명 그렇게. 우리가 이동합니다. 

그래서 우리는 원을 추가했습니다. 우리는 일부 속성을 설정합니다. 우리는 또 다른 원을 추가 그것을 제거. 그리고 우리는 수정하고 원래 원. 

그것은 도착하지만 어디 여기 더 많은 흥미 롭군요. 뿐만 아니라 우리는 속성을 설정할 수 다만이 값으로, 우리는 말할 수있다 이봐, 원, 200 위치로 이동합니다. 우리는 또한 함수로 설정할 수 있습니다. 

그래서 대신에, 여기에 400을주는 우리는 몇 가지 계산을 할 수 있습니다 무엇에 대한 즉시 우리 그 속성이되고 싶어요. 그래서이 부분을 표현하는 것 방법이다. 우리는 대신 400의 나를 보자, 말 대신 당신에게 기능을 제공합니다. 그리고 여기,이 함수 내에서, 우리는 어떤 미친 계산을 할 수 있습니다. 

우리는 시간이 걸릴 수 있으며, 다른 일을보고 동적으로 결정할 우리가 원하는 값 원. 어떻게 우리가 줄에 대해 그것은 임의의 x 위치? 그래서 그입니다. 

그래서 그 말하는 것은 들면, 모든 x는,이 기능을 실행합니다. 그리고 우리가하는 일은 계산이다 몇 가지, 임의의 시간 폭 그 반환. 그래서 우리가 실행할 때마다, 우리는 얻을 임의의 장소로 이동 원. 그것은 멋진 가지입니다. 내가 볼 수 있었다 같은 느낌 작은이의. 우리는에 도착하기 시작하고 여기에 흥미로운. 의 지금 구동이 데이터를 만들어 보자. 여기에 데이터가 없습니다. 의 그 바꾸면된다. 

법 II, 데이터 기반 Documents-- 그럼 여기로 돌아가 보자. 그리고, 그냥 circle2를 없애 보자 우리는 단지 추가 및 제거하고 있기 때문에 그것. 그래서 우리는 정말 필요하지 않습니다. 우리는 여기에 훨씬 더 영리 할 필요가있다. 우리가,의 말을하자 어떤 종류의 일부 데이터. 하나는,의 말을하자 순간은 우리는이 형태의 데이터를했다. 우리는 단지, 배열했다 숫자의 무리입니다. 우리는 여기에 일곱 번호를 어떤이 represent-- 양 사람들의 은행 계좌, 방법에 많은 사람들은 하나님이 무엇을 알고, 무게. 

이러한 숫자이며, 우리 우리의 원을 사용하려면 어떻게 든 그 숫자를 나타냅니다. 우리는 우리의 넥타이 할 그 숫자에 동그라미. 그래서 우리가하는 일. 의 말을하자, 우리가 원하는 모든 번호에 대한 원. 우리는 이전을 할 수 우리가 하는거죠 된 것 원 APPEND와 circle2를하고 circle3. 그러나 이것은 손에서 가져오고 논리를 반복 많아요. 

그래서 그와 더 영리한하자. 대신 VAR 원을 사용 , 우리가 사용하고 있음을 svg.append 우리가 사용하는거야 여기이 작은 블록. 나는 깊이에 가고 싶지 않아 무엇에 모든 부품은 않습니다. 그리고 고급 주제 가지입니다. 그리고 나는 내가 할 수있는 바랍니다. 

그러나 중요한 점은 recognize--하고 당신은 D3 코드에서 매우 자주 볼 수 있습니다. 텍스트 기본이 블록 많은 원을 만듭니다 데이터 요소가 있기 때문에 바로 여기에이 배​​열. 그래서 이것은 많은 사람을 만듭니다 이 같은 원 요소입니다. 그것은 우리에게 일곱 원을 만들 것입니다. 그리고 그것은 정말, 정말 중요한 일을한다. 그럼 그 실행하자. 이제 우리의 다른 원을 제거 할 수 있습니다. 그냥이를 언급하자 아웃 분해하고 다시이 프로그램을 실행합니다. 

우리가 이동합니다. 그래서 여기에 우리의 원 인 많은 어두운, 우리 때문에 일곱 원을, 하나 다른 상단에. 우리는 단 7 원, 하나를 만들어 이들 데이터 요소 각각에 대한 각. 하지만 무슨 일이 있었 중요한 건 거기 바로 여기에이 조각으로. 

그것은 데이터가 결합 된 것을입니다. 그래서 하나 하나의 이들 데이터 요소, 10, 45, 105, 결합했다 특히 원에. 그래서이는 생성되지 원의 무리 하지만 함께 그 두 가지를 묶어. 

그리고 미래에, 우리가 만든 때문에 이 D3 기능과 그 원, 내가 당신에게 원을 주면, 당신은 할 수 저와 연관된 데이터를 제공한다. 그래서 우리는 D3를 요청할 수 있습니다. 이봐, D3,이 원을 가지고있다. 원이 가지고있는 데이터는 무엇입니까? 그리고 D3는 우리에게 10 또는 45 또는 105을 말할 것. 

이런 일들은 바인딩됩니다. 즉, 아주, 아주 기본적인 개념이다. 의 그 살펴 보자. 

그래서 방법은 우리가 그렇게 D3-- 물어 것 이,이에 대한 무관하다 하지만 그냥 날 믿어. 이것은 우리가 D3를 요청하는 방법입니다. 이봐, D3는, 나에게 먼저 제공 당신이 찾을 수있는 원. 나에게 당신이 찾을 수있는 첫 번째 원을 제공합니다. 그리고 우리는 D3 질문을 할 수 무엇이다 이 같은 그의 데이터, 10. 

그래서 우리가 D3를 물어 저를 찾아 당신이 찾을 수있는 첫 번째 원. 데이터는 무엇입니까? 10, 그건 참으로 우리를이다 첫번째 데이터 요소. 우리는, 헤이, D3 그것을 질문을 할 수 우리에게 세 번째 원을 찾을 수 있습니다. (105). 왜 이런 일이 정말 중요합니까? 

그래서 여기, 내가 언급 것을 우리는 기능을 사용할 수 있습니다. 그리고 나는 그것이 있다고 말했습니다 매우 강력한 것. 그래서 우리의 기능은 일을 할 수 없습니다 같은 예를 들어, 일부 연산을 수행 난수를 그 수 리턴 또한 데이터에 기초하여 작업을 수행. 이 데이터 중심의 문서를 의미하는 것입니다. 즉, D3가 약자거야. 

그래서이 X postition-- 대신 다만, 모든 원 말, x 위치 (200)를 얻을, 우리 그것에게 기능을 줄 수 있습니다. 그리고 여기, 우리는 몇 가지 계산을 할 수 있습니다. d는 여기에 데이터의 위치에 서있다. 그래서 때마다 우리는이 원, 기본적으로, D3는이 일곱 원을 만듭니다. 그리고마다 

원,이, 야, 갈거야 인 circle1은 x 위치거야. 이전에, 우리는 있었다 항상 200 응답. 하지만 지금은 때마다 D3 묻습니다 우리가 당신의 x 위치 무엇, 그것은 우리가이 좋고 줄 것 그 원은, 그래서 우리는 데이터를 가지고있다. 그것은 우리에게 데이터를주고 말 것 무엇 당신이 박람회가 원하는 않는, 그 데이터에 기초하여. 

그냥 실제 데이터를 반환 할 수 있습니다. 우리가 이것을 실행한다면, 이것은 제공 미국 데이터는 문서를 구동. 이 원을 기반으로 관계 position--에 이들은 데이터의 함수로서 기지있어. 

첫 번째 원에 대한 그래서, D3는 원을 둔다. 그리고 D3는 무엇을, 우리를 요청 당신은 박람회가되고 싶어요. 그리고 우리는 단지 데이터가 무엇이든, 말한다. 박람회 (10)를 확인합니다. 

그런 다음 당신이 원하는 게 무엇인지 묻는다 박람회는 두 번째 원이 될 수 있습니다. 그리고 우리는 45, 대답합니다. 그리고 우리는, 물론, 수 여기에 몇 가지 계산을합니다. 나는 그 원 것을 발견 가지 몰려 있습니다. 

그래서 3하여 데이터를 곱하면, (3)을 곱하면됩니다. 우리 원은 그냥 확장있어. 우리의 가치는 배로되었다. 

원은, 정말 가장자리에 그래서 아마 가지를 상쇄 할 수 있습니다. 의는 (20)에 의해, 가정 해 봅시다. 여기 당신은 간다. 

이것은 데이터 시각화이다. 그것은 매우 기본적인 일이지만,이 우리에게 데이터에 대한 통찰력을 제공합니다. 그것은 우리에게 알려줍니다, 그 예를 들어, 요소의 작은 클러스터 있습니다. 그리고 우리는 여기에 큰 특이점이있다. 이것은 우리에게 약간의 정보를 제공 배포에 대한. 

우리가 있었던 경우, 예를 들어, 변경 여기에 150과 새로 고침 데이터, 우리의 시각화가 변경됩니다. 이 문서는 데이터 구동된다. 

물론 그래서, 이러한 모든 요소, 여기에 모든 속성, 우리는 기능을 사용하지 않을 수 있습니다 단지 숫자뿐 아니라 x와 y 위치. 그래서 우리는 색에 대한 기능을 사용할 수 있습니다. 그래서 우리는 동일한 작업을 수행합니다. 우리는 그것을 기능을 제공합니다. 

그리고 우리가 가질 수,의 말을하자 우리의 기능 조건문. 이 기능은 할 수있다 긴 줄의 백. 그것은 매우, 매우 복잡한 일을 할 수있다. 

그래서 여기서 if 문을 만들어 보자. 우리의 데이터가 작은 경우,의 말을하자 (50)보다, 그 어떤 임계 값입니다 우리는 관심이 있음 어떤 이유에서. 의는 녹색합시다. 그렇지 않으면,의는 빨간색 만들어 보자. 어때? 니스. 

그래서 우리의 데이터 시각화 시작 더 흥미로운 정보를 전달하기 위해 많은 채널. 그래서 지금 우리는 조금 알고 배포에 대한. 그리고 우리는 어떤 종류의가 있음을 알고있다 우리가 관심있는 50 잘라. 우리는 두 개의 데이터 포인트가 있다는 것을 알고 대부분 그 임계 값 이하 및 위. 

그래서 마지막 단계로, 여기에이 데이터, 그것은 그런이를 보는 것은 매우 드문. 그래서 그냥 변수에 움직이자 즉,이 같은, 청소기이기 때문에. 그리고 우리는 여기에 변수를 사용합니다. 그것은 정확히 똑같은 일입니다. 그것은 조금 청소기입니다. 

다음은, 법 III, Scales-- 그래서 하나의 문제를 잘 우리는 변경하는 경우 여기에, 우리의 이 200 value-- 데이터 우리는 400로 변경하는 경우 또는 뭔가 새로 고침, 이 값은 오프 스크린 갔다. 바로 여기에 우리의 논리는 그래서 방법의 우리가 할 3 배 20, 다음을 확산하기 그것은 오프셋 비트 정말 투박하다. 

그 숫자는 무엇을 의미합니까? 그들은 단지가 힘들 코딩하고 있습니다. 그리고 그들은 매우 많은 데이터에 연결하고 있습니다. 우리는 데이터 중심의 문서를 원한다. 우리는 매우 유연한 문서를 원하는, 주어진 데이터 것을,에 적응하여 그것을 나타내는. 

우리가 기본적으로 필요한 것은 우리가있다 숫자 10의이 범위가 있습니다. 45, 105. 그리고 우리는에 그를 매핑 할 폭, 여기에 전체 폭. 그래서 우리는의 범위가 0-100 갈 번호. 그리고 우리는이 캠퍼스 내가가는이 이 경우, 20-700. 

우리는 종류의 것을에 매핑 할. 우리는 그 규모를 확대하고 싶은 다음에게 약간의 오프셋 (offset)입니다. 그것은 D3이가 밝혀졌습니다. 그것은 규모라고합니다. 그래서 그것을 사용할 수 있습니다. 

내가 갈거야 works-- 방법 이를 입력 한 다음 그것을 설명. 이 규모입니다. 무엇은 할 것, 그것은 밖으로지도합니다 에 20-600에 1-200 값. 우리는 그것을 확인할 수 있습니다. 우리는 여기에 볼 수 있습니다. 

그래서 내가 먹여 1-- 한 순간을. 나에게 1 초 줘. 나는 그것을 잘못 입력해야합니다. 거기 당신은 간다. 나는 그것에 대해 죄송합니다. 

그래서 규모가 무엇을 할 것 인 그것은 값을 취할 것입니다 다음이 변환, 그 밖으로 확장하므로 당신이 요구하고있는 전체 범위를 채 웁니다. 이 경우에 따라서, 우리가 하나를 주면, 그것은 20에 그를 매핑하는 것입니다. 우리가 200을 주면, 그것은이다 (600)에 그에 매핑하는 것. 그리고 그 사이에, 우리가 100을 얻는 경우에, 그것은이다 어딘가에 될 것 20과 600 사이. 

그리고 물론, 지금이 무슨이다 우리는 그 하드 코드를 제거해야 상황이 우리가 바로 거기에있다. 그래서 우리가 원하는 것입니다 우리가하고있는 데이터를 가지고 주어진 개별 데이터 요소는 먼저 확장을 전달합니다. 그래서 규모를 확장합니다. 

아 글쎄 ..., 우리는 여기에 약간의 오류가 있습니다. 우리는 데이터를 누락하고 있습니다. 거기 당신은 간다. 그리고 그것을 밖으로 확장합니다. 

즉, 우리에게 동일하게 제공 그 결과 우리는 전에했다 하지만 대신 그 데 하드 제약을 코딩. 그리고 만약의 크기에 우리의 캔버스 변화, 예를 들면, 우리는이 이상을 갖고 싶어 400 픽셀 그리고 밖으로 squishes, 우리는 그것을 시달리고 할 수 있습니다 우리는 그것을 확장, 또는 우리가 할 수있는 에이 왼쪽 마진을 줄일 수 있습니다 작거나 20 개 이상의 무엇인가. 이 숫자는,이 하드 코딩 숫자는 지금 우리에게 의미합니다. 

그리고 우리는 더 많은 것을 할 수 뿐만 아니라 흥미로운 것들. 그래서 대신 갖는 선형 규모, 우리는 규모를 기록 할 수 있습니다. 그리고 그것은 우리에게 로그 스케일을 줄 것이다. 

그래서 지금 우리의 규모, 대신 다만 그 범위를 확대, 그것은 더 복잡한 일을하고 있어요. 대신 열심히 범위를 갖는 , 대신 그 600있는의 코딩, 우리는 폭을 사용할 수 있습니다, 그래서 폭 마이너스 40에 20에서, 2 회 반대쪽 여백. 그리고 이것은에 더 많은 의미가 있습니다 코드를 보일 수 있습니다 누군가. 

흥미롭게도, 비늘 얻을 매우, 매우 정교한뿐만 아니라. 그들은 흥미로운 것들을 많이 할. 그래서 저울은 반드시이 없습니다 단지 숫자로 작동합니다. 의 컬러 스케일을 만들어 보자. 

그래서 우리의 범위는 나중에 ... 수 우리의 도메인은 1-200입니다. 즉, 입력 것이다. 그러나 우리는에서지도 할 수 있습니다 예를 들어, 빨간색 녹색. 그리고 지금, 우리는 일을 전달하는 경우, 우리는 녹색받을거야. 우리가 200을주는 경우에, 우리는 붉은거야. 그리고 우리 사이에 뭔가를 전달하면, 그것은 그 중 일부 혼합 될 것, 어딘가에 그라데이션에 녹색과 빨간색 사이. 

그리고 대신 필요 어설픈 논리 이런 종류의 우리는 여기있다 거기 조건, 우리는 그 어떤 것도 할 수 그 사이 리니어 스케일. 그래서 우리는 스케일을 사용하십시오 우리 단지 생성 우리는 색이라고한다. 그리고 우리는,가 D가 줄 것이라고하는 우리의 데이타 요소이다. 그리고 거기에서 우리는 간다. 우리는 색 눈금이 있습니다. 

따라서이 매핑입니다. 그래서 맨 왼쪽이 완전히 녹색입니다. 맨 오른쪽은 완전히 빨간색입니다. 그리고 그 사이의 모든 (D)의 함수이다. 우리는 흥미를 가지고 여기 시각화. 그러나 우리의 데이터는 가지 지루했다. 의 우리가하면 무엇을 할 수 있는지 보자 우리는 더 많은 흥미로운 데이터를했다. 

법 IV, 작업하기 먼저 Data-- 우리는 수 있도록해야 할 것입니다 우리의 더 흥미로운 시각화 다른 곳에서 데이터를 이동하는 것입니다. 그것은이 매우 투박이다 데이터는 하드 코딩 된 여기. 그리고 일반적으로, 우리는 물어있을거야 데이터에 대한 다른 사람. 우리는 어쩌면, 정부가 요구됩니다 인구 조사국은, 데이터 무엇 그리고 그 음모를 꾸미고 또는 요청 일부 데이터에 대한 일부 타사의 실체 다음 건물 그에 시각화. 

먼저 우리는하고 싶은 다른 곳에서 해당 이동합니다. 그래서를 만들거야 여기라는 data.json 파일. JSON 데이터 포맷이다. 당신은 그것에 대해 많이 알 필요가 없습니다. 그리고 우리는 복사거야 우리가이 작은 데이터, 이 그대로에 붙여 이동 다시 우리의 시각화 코드 여기, 그리고 여기이 기능을 사용합니다. 당신은 세부 사항을 알고 필요가 없습니다. 하지만이 할 것입니다 것은입니다 그것은 해당 파일을 찾을 수 있습니다, 그것을 가져, 우리에게 돌려줍니다. 그래서이 무엇을 그것은 간다이다 그리고 data.json 파일을 얻을. 그리고 모든 코드의 그 본질적으로 inside-- 들여 쓰기, 모든 코드 우리는 저기 의지가 우리가 데이터를 얻을 경우에만 실행합니다. 그리고, 그것은 그것을 실행하는 것 우리가 가지고있는 데이터와 코드입니다. 좋아요, 우리가 조회 시각화 일부 코드 어딘가에 또, 이는 일반적으로 어디는 일부의 데이터를 쿼리 다른 곳, 보통이다 시각화가 작동하는 방법. 

하지만 데이터에 다시 가고 싶어요. D3-- D3 근본적 그래서 데이터 것들의 목록의 데이터를 사용합니다. D3는 데이터가 단지리스트가 될 것으로 예상 사물의 사물의 배열입니다. 그것은 어떤 것들을 중요하지 않습니다 그래서 그것이 그들의 배열이기 때문에입니다. 

그래서 여기에, 예를 들어, 우리는의 수 이 과정은 부동 소수점 값을했다. 우리는 네거티브를 가질 수있다. D3는 너무 오래, 상관하지 않는다 그것은 것들의 목록입니다있다. 

우리로 흥미로운 것들 가질 수있다, 우리는 또한 수 같은 문자열 목록을 가지고있다. 그래서 이들은 크림슨 헤드 라인은 나는 며칠 전 집어 들었다. 그리고 어쩌면 당신은 몇 가지 흥미로운를 찾을 수 있습니다 이 헤드 라인에 대한 것들. 

그래서 다시,이 물건의 목록입니다. D3는 상관하지 않는다. 이러한 문자열 될 일이. 우리는 우리의 데이터를 변경했습니다. 

의 우리의 시각화로 돌아가 보자. 지금, 우리의 시각화 기대 입력은 숫자이어야합니다. 그래서 우리는 할 겁니다 몇 가지 변경 사항을 확인합니다. 그래서 예를 들어, 우선, 어쩌면 우리는 함께이 원을 넣을 헤드 라인의 길이에 의해, 제목의 문자 수입니다. 

그래서 우리는 모든 시간은 ... 할 거 야 우리 함수는 문자열로 호출, 우리가 길이입니다 찾을 수 있습니다 그리고 다음 규모로 그 전달합니다. 색상은, 내가 돌아갑니다 스틸 블루에 그. 그리고 거기에서 우리는 간다. 우리는 시각화를 크림슨 헤드 라인. 

우리의 규모는 비트 꺼져 있습니다. 의 가장 긴 것으로 가정 표제는 100 자입니다 그래서 조금 그를 걸쳐. 그리고 우리는 시각화있다. 그래서 대부분의 헤드 라인을 것 같다 함께 아주 가까이 있습니다, 문자 외선 환산. 그러나 하나가 정말 눈에 띈다. 

우리는 몇 가지 도구를 만들 수 더 많은 것을 탐구. 나는이 작업을 할 때, 나는이었다 호기심 여부,이 데이터 세트에, 콜론 헤드 라인 그들에 이상이 될 것이다. 나는 그들이 것이라고 가정한다. 

그래서 찾아 보자. 의이 색을 사용하자 채널 우리는 전에했던 것처럼 여부에 대한 몇 가지를 인코딩합니다 콜론 또는 더가 없습니다. 그래서 우리는 다시 조건을 사용합니다. 당신은 알 필요가 없습니다 이 세부 사항, 그러나 이것은 우리가를 확인하는 방법입니다 특정 문자에 대한 문자열 자바 스크립트에서, 다시, 관련이 없습니다. 

하지만 우리를 찾을 수없는 경우 대장, 우리는 녹색 돌아갑니다. 우리가 할 경우, 우리는 붉은 돌아갑니다. 그래서 다시 것을 헤드 라인 콜론은 빨간색으로 표시됩니다있다. 이것은이 좋은 의미 하든지 것입니다. 

그래서 보인다 내 가설은 부딪된다. 두 있습니다. 우리는 6 개의 데이터 포인트를 만 두 콜론을했다. 그러나 조금 더 많은 것 하단에, 사실. 콜론 표제는 것 일반적으로 짧게, 우리의 데이터 적어도 흥미로운 set--. 

의가 그를 돌려 보자 스틸 블루와 다음 참조 우리는 심지어로 만들 수있는 더 흥미로운 데이터. 그래서 다시, 나는 언급 D3의 데이터는 것들의 목록입니다. 우리는 많은 종류의 숫자를 본 적이있다. 우리는 문자열을 본 적이있다. 하지만 물건은 객체가 될 수 있습니다. 

그들은 복잡한 일이 될 수 있습니다 그 많은 것들을 포함한다. 더 명확하게 말하려면, 대부분의 경우에, 우리 같이 모든 데이터 포인트를 구축하고자 더 한 값보다 복잡합니다. 당신은 상상하려는 경우 학생들에 대한 데이터베이스, 학생이있을 수 있습니다 이름, 학생 ID, 사물의 많은 관련 특정 레코드, 다만 문자열이나 숫자. 그럼 그 살펴 보자. 

이 설정 하나의 데이터입니다. 이 지진에 대한 데이터 세트입니다. 우리의 목록 또는 배열에 모든 것을 여기 그래서 사물의 여러 가지 자체가 포함되어 있습니다. 그러므로 모든 데이터 포인트가 보유 크기와 좌표입니다. 그리고 자신을 좌표 두 가지가 포함되어 있습니다. 

그래서 매일 이제 더 많은입니다 복잡하고 더 많은 흥미 등을 포함 흥미로운 정보. 이제 우리가 밖으로 만들 수 보자. 다시, 다시 여기로 돌아 사용 우리의 히스토그램 원 시각화 우리가 구축했습니다, 우리는을 구축 할 수 있는지 보자 크기 분포의 시각화 우리의 데이터 세트. 

그래서 여기에, 동일한 개념이다. 하지만 지금, D는 더 많은 것들을 포함되어 있습니다. D는 많은 데이터 요소가 포함되어 있습니다. 그래서 우리는 다시 거라고 얻을. D3는 우리에게 D를 제공합니다. 그리고 우리는 크기를 찾아 응답 D 다음 규모로 그 전달의. 

그리고 우리는 변경해야 우리의 규모, 물론. 크기는 간단하지 않도록 더 많은 10보다 이동합니다. 사실,이 적이 없네 10 크기의 지진. 그러나 그것은 우리의 상단 가지의 끝, 우리의 상단 스펙트럼. 

의 새로 고침 보자. 니스, 우리는 시각화있다. 너무 note-- 흥미 롭다 두 개의 데이터 포인트가있다 그 거의 정확하게 각각의 상단에있는 다른 크기의 관점에서. 당신은 우리가 사용하고있는 불투명하여이 작업을 참조하십시오. 

우리는 지금 지리 데이터가 있습니다. 우리는 위도와 경도를 가지고있다. 어쩌면 우리는 뭔가를 할 수 많은 것을 더 흥미 롭군요. 이제 좀 더 찾아 보자 시각화하는 흥미로운 방법 이 더 복잡 데이터 우리는에 액세스 할 수 있습니다. 

법 V, Mapping-- 근본적으로, 우리는지도에이를 넣을. 나는이가는 곳이고, 의미한다. 우리는에 대한 정보를 인코딩 할 이 지진 측정 값의 위치, 뿐만 아니라 자신의 크기, 우리는 지금 가지고 있기 때문에. 우리는 소비하는 방법을 이해 더 복잡한 데이터. 

우리가 할 것입니다 우선입니다 지도, 배경 맵을 만들 수 있습니다. 내가 통해 갈거야 이 매우 빠르게. 이 까다로운 코드입니다. 그것은 이들의 또 다른 하나 조리법 당신은 정말하지 않습니다 당신이 사용할 수 있도록 완벽하게 이해해야한다. 하지만이 코드입니다. 이 코드는 바로 여기지도를 만듭니다. 

우리는 세부 사항에서 이동하지 않을거야. 그러나 표면적으로, 그것은 무엇이며, 그것은이 us.json 파일을 쿼리 할 데이터 파일 등이있다 우리가 전에 가졌던. 그것은 물론, 더 복잡하다. 그러나이 경우, 모든 것을, 각 데이터 포인트는이 상태 그리고 목록을 가지고 위도와 경도 그 다각형을 정의, 그 형태, 그 상태. 

그래서 D3 수행 할 작업과 유사 우리가 전에 무슨 짓을했는지에. 그것은 그 요청하고 요소에 그 바인딩합니다. 그리고 기능이있다 그 해당 요소를 매핑합니다, 위도와 경도에 따라. 당신은에 더 많은 정보를 얻을 수있다. 그리고 나는 그것을 추천합니다. 

상기 링크가 있습니다 이 코드의 끝 기록했다. 그리고 코드는 주석. 이에 대한 자세한에 대한 링크가 있습니다. 나는 당신이 그것을 찾아 볼 것을 권장합니다. 그러나 우리는 약하든 상관 이 프로젝션 기능. 그 통해 가고 싶어요. 

우선, 내가 보여주지 당신이 그, 그래, 우리는지도를 가지고있다. 지도는 멋진. 그럼이 살펴 보자 생산 함수. 

투영 매우 많이 규모처럼, 다시 조정합니다. 그래서 생산 이 투영 함수 우리는 그것을 경도를 통과 할 수있다 않습니다 이 경우에 latitudes--, 여기서 이들 값은 아르 건물의 위도 - 정수 (Long) 우리는 오른쪽에 앉아있어 지금은 - 투영. 그리고 투영 변환 x 및 y 픽셀 값에있다. 

그래서 투사를하고있다 우리의 규모와 매우 유사합니다. 그것은 우리의 위도를 복용하고 전체 세계를 나타내는 경도 줄어드는 것을 크기 조정 우리가 원하는 광장에 이르기까지, 우리는 그것을 준 것을. 이 경우, 우리는 야 이들 값을 전달. 그리고는, 음, 우리를주고 화면에 640 픽셀을 의미한다. 이 화면 전체 700 픽셀 폭, 즉 여기에 대한 정보를 수 있도록, 아래로 154 픽셀, 내가 것 추정치는 거의 여기에있다. 

그래서 그 위도-걷고을 복용하는 전 세계에 뭔가를 나타냅니다 그리고 함부로 대하지 그 주변에 이동 우리 x 및 y 픽셀 값 정제하여, 이입니다 제일 먼저 이 매핑 코드에서 수행. 의 그리고 나머지 코드는 데이터를 소비 다음 해당 위도-걷고 매핑 화면에 뭔가. 

그러나 우리는이 투사를 사용하는거야 기능이 밝혀 때문에 우리는뿐만 아니라 북 - 걷고 걷고있다. 우리의 데이터를 돌아 보면, 우리가 위도와 경도 좌표 모든 관찰. 그럼 프로젝션을 사용하자. 

그래서 우리의 박람회를 찾고, 우리는 우리의 exposition--을 원하는 우리는 위도와 경도를 가지고있다. 그러나 우리는 픽셀 값을 할 수 있습니다. 그리고 그것은 밝혀, 우리는 정확히이 우리는 무엇을 투사를 원하는 건 .... 우리는 있었다 아주 많이 좋아 여기 스케일을 사용하여, 우리는 지금 투사를 사용하는거야 그리고 좌표를 전달합니다. 첫 번째 것은 그래서 우리는 우리가있어 그렇게 하는거죠있어 개별 데이터가 점점 D, 개별 지진의 요소 읽기. 우리가 가장 먼저하는 일 좌표를 얻을 수있다. 좋아, 우리는 좌표를 가지고있다. 

우리가 두 번째 일이다 투영에 그를 전달합니다. 투사는 그 좌표를 변환 화소 값, x 및 y 내로. 그리고는 마지막 일 우리 그냥 X를 얻을 수 있습니다 싶은, 이는이 경우는 첫 번째이다. 그것은 두 가지 중 첫 번째입니다 그 투사에 의해 반환됩니다. 

우리는 y를 위해 동일한 작업을 수행합니다. 하지만 그 대신, 우리는 돌아갑니다 두 번째 요소, Y. 새로 고침을 준비하십시오. 오, 여분의 문자 이곳에 좋은, 우리가 의 데이터 중심의 문서 객체의이 JSON 파일을 은폐, 지도를 제작하고, 변화 데이터 관련 속성 지도에 투영합니다. 이건 정말 재미있다. 이 멋지다. 

의 한 단계를 그것을 보자. 나는 우리가 두 가지를 의미 모든 데이터 포인트 정보를 제공합니다. 나는 3, 의미한다. 우리는 좌표를 가지고, 이는 x와 y입니다. 그리고 우리는 크기를 가지고있다. 

우리는 어떻게 든 크기를 인코딩 할 필요가있다. 우리는 채널을 많이 가지고 있어요. 우리는 색상을 사용할 수 있습니다. 우리는 반경을 사용할 수 있습니다. 우리는 불투명도를 사용할 수 있습니다. 우리는 코드에서 여러 가지를 사용할 수 있습니다. 이러한 특성과 많은의 모든 거기에 열거되지 않은 이상 그들은 선택 사항이기 때문에, 우리는 할 수 이 데이터를 인코딩하는 데 사용, 스트로크 이 모든 것을 내가 언급했습니다. 

의 반경을하자. 나는 반경이 가장 직관적 생각합니다. 그래서 다시, 우리는 하드 코딩 교체합니다 (40)과는 약간의 계산을합니다. 우리는 다시 우리의 마음에 드는 스케일을 사용합니다. 그리고 우리는 D 지나서. 우리가 크기를 원하기 때문에 싶지만하지 D의. D는 데이터 포인트입니다. 우리는 크기가 확장 통과합니다. 

의 다시 실시한다. 오, 그것은 작동하지 않습니다. 왜 작동하지 않는 이유는 무엇입니까? 

그래서 무엇 규모 기억한다. 다시 한 규모를 살펴 보자. 1-10 스케일지도 22-600, 더욱 이하이다. (600)는 거대하다. 우리가이 있어요 이유입니다. 

그래서 우리는 우리의 규모를 변경하려면 보다 합리적인 뭔가. 우리가 60 0 원의가 있다고 가정 해 봅시다. (60)은 큰이지만 10 지진 믿을 수 없을 정도로 드물다. 사실, 그들은 일어난 적이 없다. 

그래서 할 것이 무엇인지, 그것은 할게요 1-10가는 우리의 크기 그것을 밖으로 확장하는 데에 매핑합니다. 그리고 0-60로에 매핑합니다. 의 새로 고침 보자. 

니스, 우리는 시각화있다. 이 중대하다. 이는 실제 데이터이다. 당신은 내 작은 장난감, 알 수 있습니다 예를 들어, 가장 큰 지진 바로 우리의 상단에 있습니다. 그러나 그것 뿐이다. 우리는 일 중심의 시각화가 즉, 데이터를 소비 정말 우리를 제공합니다 흥미로운 정보. 그래, 몇 가지를 추가 할 수 그것에 상호 작용. 나는 그것이 있다고 말했습니다 D3의 강한 힘. 

그래서 여기, 모든 요소에 대해, 우리는있어 속성의 무리를 설명. 그러나 우리는 또한 우리가 원하는 것을 설명 할 수 있습니다 상호 작용 요소와 발생합니다. 예를 들어, 우리는 설명 할 수 무슨 일이 때 마우스를 통해 발생합니다. 그리고 매우 유사, 그 기능을합니다, 매우 유사 우리가 전에했다 속성 여기서 우리가 뭔가를 할 우리는 그 위에 요소를 가져 가면. 

그래서 일단 우리는 필요 그 요소를 선택하면된다, 브라우저에서 기본적으로 그것을 찾을 수 있습니다. 그리고, 우리는 설정할 수 있습니다 그것에 속성. 우리가 가져 가면 그래서 내가 여기서 뭘하고있어,이다 뭔가 이상, 우리는 그 요소를 얻을 수 있습니다 다음 다시 불투명도를 설정 1, 완전히 불투명합니다. 이제 그 모습을 보자. 

우리가이 나타납니다 여기에 추가 세미콜론. 우리가 이상 여기에 마우스를한다면, 그것은 전체 가져옵니다. 하지만 지금은, 물론, 그것을 전체 숙박 우리 때문에 무슨 설명해야 때 우리의 커서를 제거합니다. 그럼 그에 정확히하자 마우스 커서가 벗어나면, 마우스를 움직일 반대로. 

그리고 우리는에 재설정합니다 우리가 0.5 before--했다. 그리고 지금, 때마다 우리 호버, 우리는 완전한 원을 얻을. 그것은 우리가 무엇을 참조하는 데 도움이 우리 우리는 본질적으로 선택하고 있습니다. 

그리고 지금의이 정말 잘 만들어 보자. 의 실제 데이터에 연결합니다 보자. 그럼 물어 보자 수 USGS 데이터에 대한. 미국 지질 조사국 (US Geological Survey) 그래서 지진에 대한 데이터가 있습니다. 그들은 수있어 공개 API를 JSON 형식으로 소비한다. 그럼 그렇게하자. 

그래서이 코드의 비트입니다 USGS의 API에 연결합니다. 그리고 그것에 처리의 비트가있다. 이것은 관련이 없습니다 그러나 그것을 단순화 같은 단순 데이터 형식 우리는 전에했다. 그래서 우리의 호출을 제거 파일에 대한 우리의 가짜 data.json. 그리고 대신에, 나는 전화 드렸습니다 기본적으로 USGS. 

,의 새로 고침 좋은 보자. 이것은 실제, 실제 데이터입니다 지진이 주에서. 이건 정말 재미있다. 이것은 놀라운 일이 아니다 우리를 위해,하지만이 있습니다 에 지진이 많이 캘리포니아 서부 해안. 하지만 그것은 매우 흥미로운 생각 많은 지진이 있었다고 알래스카에서, 분명히, 여기에 중서부. 나는 흥미있는 말은, 우리는 좋은거야. 즉, 결론입니다. 

그러나 근본적으로,이 D3는 우리가 할 수 있습니다 것입니다. 그것은 우리가 데이터를 가지고하는 데 도움이 바인드 DOM 요소에 그것, 그 요소를 변경해야 데이터의 함수로서, 이러한 특성 모두를 가질 많은 요소 특성 모든 채널에 대한 유용 정보를 전달합니다. 

D3는 믿을 수 없을만큼 강력하다 도서관과 놀라 울 정도로 잘 실행합니다. 이것은 몇 가지 강력한 물건입니다. 데이터 시각화는 믿을 수 없을만큼 강력한 도구 깊은 사람들에게 전달하는 자신의 핵심에 도달 통찰력 그리고 그들에, 이해하는 데 도움이 이 심오하고 직관적 인 방법으로, 어떻게 데이터 작품과 방법 데이터는 우리의 삶을 변화시킨다.