>> [音樂播放]
>> DAVID CHOUINARD：我是大衛 喬伊納德，這是維生素D3。
歡迎。
我們今天要學習D3。
D3是一個JavaScript框架 為建設高品質
交互式可視化的網頁。
東西像什麼我們 看在我後面，
我們要學習，使這些 的東西，那種它的基礎知識。
但它會很酷。
讓我們開始吧 讓漂亮的照片。
我們已經得到了更多的演示 可用的前景。
我們開始做吧。
>> 第一幕，DOM manipulation--我們要去 馬上開始做很酷的事情。
首先，在左側，我們有代碼。
在右邊，我們有 我們的代碼的結果。
讓我們通過它。
>> 讓我們做一個圓。
你覺得如何？
svg.append circle-- 我們剛剛作出了一個圓圈。
你不相信我，對嗎？
它不存在。
>> 所以，我們做了正確的這裡， SVG是可縮放矢量圖形。
這是我們告訴瀏覽器的方式 使在瀏覽器中的矢量圖形。
我們只是做了現在 添加了一圈瀏覽。
>> 承諾是圓 需要一點基本屬性
之前，我們其實可以看到它。
我們需要告訴它的x位置， 其y位置，它的半徑。
我們沒有告訴任何的是， 所以我們沒有看到它現在。
但是，讓我們告訴它的東西。
>> 所以，首先，你得 給我們的圈子名稱。
所以，讓我們把它叫做圓。
我們圈內有個名字吧。
讓我們給它一些屬性。
如何cx將中心X，所以 該中心的x位置。
比方說，200 200像素。
>> 讓我們給它200像素A Y為好。
和R為約40個像素，一個半徑。
現在，讓我們來看看。
我不會拼寫。
>> 你去那裡。
我們有一個圓圈位置200 像素，200像素，40個像素的半徑。
很酷吧？
我們有一個圓。
是啊。
>> 因此，沒有必要跟著。
所有這些例子中，所有的 我做今天的代碼
將在年底提供在線 在交互式示例的形式
與檢查站 每一個行為，等等。
>> 讓我們做更多的東西。
這個黑圈實在是太醜了。
我很抱歉的錯誤 信息就在那裡。
在那裡，我們走了。
>> 讓我們給它的顏色。
怎麼樣？
我喜歡藍鋼。
好了，我們的圈子變了顏色。
那很棒。
讓我們把它半透明 too--半透明。
>> 因此，這些都是屬性 我們定義的圈子。
我們做的第一件事是 我們把一個圓的頁面上。
然後我們定義 一堆屬性。
其中的一些是必需的， 像CX，CY和半徑。
等是可選的。
>> 有很多更多的屬性。
有很多人。
例如，我們可以有一個 行程為好，紅色的行程。
但是，讓我們刪除。
我們又回到了一圈，一個藍色圓圈。
>> 因此，讓更多的圈。
怎麼樣？
讓我們另一個圓。
這是令人興奮的，對不對？
>> 所以說，我只是複製粘貼 我們已經。
讓我們把它叫做CIRCLE2。
讓我們做精確 同樣的事情，並給它
屬性，定為300的x位置。
耶，我們有兩個圓了。
>> ，當然，我們可以 更新這些值。
我可以把它放在400，而現在它的動作。
並且由於它煩人，讓我們 刪除它，所以circle2.remove。
現在它不見了。
>> 所以，我們在做什麼，並 只是非常，very--這
非常類似於您 可能會做的jQuery，例如。
我們只是操縱 DOM中，它被稱為。
你可能已經聽說過這個詞。
我們正在創造的東西，設置 屬性上的東西，刪除的東西。
>> 現在，這裡的地方開始變得有趣。
所以在後面的代碼中，我們仍然可以 參考這裡原來的圈子。
因此，讓我們重新設置其屬性為CX。
比方說，它的x坐標為400。
而且我要轉型 這一點，所以很明顯。
在那裡，我們走了。
>> 所以我們增加了一個圓圈。
我們設置一些屬性。
我們增加了一個圈，刪除它。
然後我們修改 原來的圈子。
>> 但這裡那裡得到 很多更有趣。
我們不僅可以設置屬性 作為剛剛值，我們可以說，
哎，圈子，去定位200。
我們也可以將它們作為功能。
>> 所以給人，而不是在這裡400， 我們可以做一些計算
在什麼我們飛 希望該屬性是。
因此，這是你如何表達了。
我們說，400來代替，讓我 給你一個函數。
而在這裡，這個功能裡面， 我們可以做任何瘋狂的計算。
>> 我們可以花時間和 看一些其他的東西
動態決定 我們想要什麼樣的價值圈。
怎麼樣，我們只是給 它隨機x位置？
不過就是這樣。
>> 那麼，什麼是說的是，對於 每x，運行此功能。
我們正在做的事情是計算 有些事情，一個隨機時間寬度
並返回了。
所以，我們每次運行時，我們得到了一個 圓去隨機的地方。
這是一種很酷的。
我覺得我可以看看 在此一小。
我們開始去 這裡一些有趣的事情。
讓我們把這個數據現在驅動。
這裡沒有數據。
讓我們來改變這種狀況。
>> 第二幕，數據驅動Documents-- 因此，讓我們回到這裡。
讓我們剛剛擺脫CIRCLE2的， 因為我們只是添加和刪除
它。
所以，我們並不真正需要它。
我們需要在這裡有很多更聰明。
比方說，我們有 某種一些數據。
一個moment--讓我們說， 我們有這種形式的數據。
我們有一個數組，只是 一串數字。
我們有7個號碼在這裡， 無論這些represent--量
在人們的銀行賬戶，怎麼 很多他們的體重，上帝知道。
>> 這些數字，我們 要使用我們的圈子
代表這些數字在某種程度上。
我們希望我們的配合 圈子裡這些數字。
所以，我們做什麼。
比方說，我們希望有一個 圈每一個數字。
我們可以做舊 我們doing--的事情
圈追加和CIRCLE2和circle3的。
但這種失控的，而 有很多重複的邏輯。
>> 因此，讓我們更聰明這一點。
相反，使用var圈 svg.append，我們只是使用，
我們將使用 這裡這個小方塊。
我不想去深入 成什麼這些部位做。
它是一種先進的話題。
我希望我可以。
>> 但關鍵是要recognize--和 你會看到很多時候在D3的代碼。
文本基本的此塊 創建盡可能多的圈
因為有數據元素 在這陣就在這裡。
因此，這造成很多 圈的有元素。
這將創造我們七界。
它做了非常，非常關鍵的一點。
因此，讓我們運行。
讓我們刪除我們的其他圈子。
就讓我們評論這個 部分分離出來，並再次運行此。
>> 在那裡，我們走了。
所以在這裡我們的圈子是 很多暗，因為我們
有七界一 在另一個的頂部。
我們剛剛創建的七界一 每一個用於每個數據元素。
但有發生的重要事情 在這個片段就在這裡。
>> 這是該數據被綁定。
所以每一個人 這些數據元素之後，
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位置，
這將給予us--我們 這個圈子，所以我們的數據。
這將給予我們的數據說， 你怎麼想的論述是，
基於該數據。
>> 讓我們只是返回的實際數據。
因此，如果我們運行這個，這給 我們的數據驅動的文件。
這些圈子是基於 有關position--
它們的鹼作為所述數據的函數。
>> 所以對於第一圈， D3把一個圓。
然後D3要求我們，做什麼 你想博覽會是。
我們只是說，無論數據。
使博覽會10。
>> 然後問，你怎麼想的 博覽會是第二圈。
我們回答，45。
我們當然，可以 做一些計算在這裡。
我發現，那些圈子 有一種壓扁了。
>> 所以，乘以3吧，乘以3的數據。
我們的圈子剛剛被擴大了。
我們的價值翻了三倍。
>> 圈真的是在邊緣上， 所以我們也許種補償吧。
比方說，20。
幹得好。
>> 這是一個數據可視化。
這是一個非常基本的，但是這 給了我們一些洞察我們的數據。
它告訴我們，比如說我們 有元素的小集群。
我們有一個大的異常這裡。
這給了我們一些信息 約的分佈。
>> 如果我們，例如，改變 數據150在這裡和刷新，
我們的可視化被改變。
這個文件是數據驅動。
>> 所以，當然，所有這些元素， 所有這些屬性在這裡，
我們可以用一個函數，而不是 只是這些數字，不只是
x和y的位置。
所以我們可以用一個函數的顏色。
因此，我們將這樣做。
我們給它一個函數。
>> 讓我們說，我們可以有 條件語句中我們的函數。
此功能可 幾百行代碼的。
它可以做非常複雜的事情。
>> 所以，讓我們把一個if語句在這裡。
比方說，如果我們的數據較少 比50，這是一些門檻
我們感興趣 在由於某種原因。
讓我們把它的綠色。
否則，讓我們做它的紅色。
怎麼樣？
尼斯。
>> 因此，我們的數據可視化開始 傳達更有趣的信息
許多渠道。
所以，現在我們知道了一點 約的分佈。
而我們知道，有某種 切斷50，我們感興趣的問題。
我們知道，有兩個數據點 低於這個門檻，其中大部分
上面。
>> 所以作為最後一個步驟，此數據在這裡， 這是非常罕見的看到這個像。
因此，讓我們只是把它移動到一個變量 因為這是更清潔，這樣。
然後我們在這裡使用的變量。
這是完全一樣的東西。
這只是一個有點清潔。
>> 接下來，第三幕，Scales-- 因此一個問題吧
在這裡，如果我們改變 在這200 value--數據
如果我們將其更改為400 什麼和刷新，
那麼這個值只是去屏幕外。
所以，我們的邏輯就在這裡 我們如何做3次
20，宣揚出去，然後 抵消了一點確實是笨重。
>> 什麼是這些數字意味著什麼呢？
他們只是硬編碼在那裡。
而且他們非常依賴於數據。
我們希望有一個數據驅動的文檔。
我們希望有一個非常靈活的文件， 即給定的數據，去適應它，
並代表它。
>> 我們主要需要的是，我們 這個範圍的數字10。
45，105。
我們想映射出到 的寬度，在這裡的整個寬度。
因此，我們有範圍 數字去從0到100。
我們有這個校園我去 從20到700，在這種情況下。
>> 那種我們想要映射上。
我們希望以這和 那麼抵消它一點點。
事實證明，D3擁有這些。
這就是所謂的規模。
因此，讓我們使用它。
>> 這works--我要去的方式 鍵入此起來，然後解釋它。
這是一個尺度。
它會做的是，它會映射出 值從1到200上，以20至600。
我們可以檢查。
我們可以看到這一點。
>> 所以，如果我給它1--一個瞬間。
給我一秒鐘。
我一定是打錯了。
你去那裡。
對不起有關。
>> 那麼，什麼規模都行 是，這將需要一個值
然後將其轉換， 展開了，所以
填補了全方位你問的。
因此，在這種情況下，如果我們給它， 它會映射出到20。
如果我們給它200，它的 要在地圖上，為600。
而介於兩者之間， 如果我們得到100，這是
將是某處 在20和600之間。
>> 當然，現在這是什麼 我們需要刪除這些硬編碼
事情我們都在那裡。
所以，我們想要做的是 採取我們的數​​據
鑑於，個別數據 元素，並把它傳遞第一規模。
所以規模將擴大它。
>> Well--哦，我們有一點點的錯誤在這裡。
我們丟失的數據。
你去那裡。
而且擴大了出來。
>> 這給了我們同樣的 結果我們以前，
但有代替那些 硬編碼的限制。
如果尺寸我們 帆布的變化，例如，
如果我們希望有這種過度 400像素，它squishes出來，
我們可以把它over-- 我們可以展開它，或者我們
可以減少這種留有餘量，以 東西少或超過20。
這些數字，這些硬編碼 數字現在是有意義的我們。
>> 我們可以做更多的事情 有趣的事情也是如此。
所以具有代替線性 規模，我們可能要記錄一個規模。
那會給我們一個數刻度。
>> 所以，現在我們的規模，而不是 只是擴大了這個範圍，
它做更複雜的事情。
代替具有該範圍內的硬盤 編碼的，而是具有600，
我們可能希望只使用寬度， 所以從20到寬度減去40，
2倍的另一側緣。
這使得很多更有意義 有人誰可能看代碼。
>> 有趣的是，秤取 非常非常複雜的為好。
他們做了很多有趣的事情。
所以秤不一定 操作只需用數字。
讓我們做一個色階。
>> 因此，我們可能範圍be-- 我們的域名是1〜200。
這就是輸入的東西。
但是，我們可能需要從地圖 綠色到紅色，例如。
而現在，如果我們把它傳遞1， 我們將得到綠色。
如果我們給它200，我們會得到紅色。
如果我們通過它介於兩者之間， 這將是一些組合，
某處梯度 之間的綠色和紅色。
>> 並有代替 這種笨重的邏輯
我們在這裡與 有條件的就在那裡，
我們可以有一個something-- 那些之間的線性度。
所以我們會使用規模，我們只是 創建，我們稱之為顏色。
我們想給它D，它 是我們的數據元素。
還有，我們走了。
我們有一個色階。
>> 因此，這是映射。
所以，最左邊是完全綠色。
最右邊的是完全的紅色。
之間的一切 為d的函數。
我們有一個有趣的 可視化在這裡。
但是，我們的數據是種無聊。
讓我們來看看有什麼我們可以做的，如果 我們有更多有趣的數據。
>> 第四幕，正與 數據 - 的第一件事
我們想要做的，使我們的 可視化更有趣
是將數據在其他地方。
這是非常笨拙的有 數據硬編碼這裡。
一般，我們會問 別人的數據。
我們將可能要求政府， 人口普查局，什麼是你的數據
然後繪製的或要求 一些對某些數據的第三方實體
然後建立一個 可視化上。
>> 所以，第一件事我們想要做的 就是那個移動到別的地方。
所以，我要創建一個 文件這裡叫做data.json。
JSON是數據格式。
你不必知道太多有關。
而且我們要複製 數據很少，我們必須在那裡，
它粘貼在那裡逐字，去 回到我們的可視化代碼
在這裡，並使用此功能就在這裡。
你不必知道的細節。
但是，這會做的是， 它會發現文件時，
取水的時候，並返回給我們。
所以，這是什麼做的是，它會 並獲得data.json文件。
然後所有的代碼是 縮進inside--本質，
所有的代碼我們那裡 - 會 只有當我們得到的數據備份運行。
然後它會運行 與我們有數據的代碼。
太好了，我們有一個 可視化查詢
對一些地方的代碼 否則，這通常是
在此它查詢從一些數據 別的地方，這通常是
如何可視化工作。
>> 但我想回去的數據。
因此，在D3-- D3根本數據 消費數據的事情的清單。
D3預計，該數據只是一個列表 物聯網，物聯網的陣列。
不要緊，什麼這些東西 是，只要它是其中的​​一個陣列。
>> 所以在這裡，例如，我們可以對 當然也浮點值。
我們可能有負面影響。
D3並不關心，只要 因為它是一個事物的列表。
>> 有趣的東西，我們 可能有，我們也可以
有這樣的字符串列表。
因此，這些都是深紅頭條 我前幾天回升。
也許你可以找到一些有趣的 事情有關這些一個頭條新聞。
>> 如此反复，這是事情的清單。
D3並不關心。
這恰好是一個字符串。
我們已經改變了我們的數據。
>> 讓我們回到我們的可視化。
現在，我們的可視化預期 的輸入是數字。
因此，我們將不得不 做出一些改變。
因此，例如，首先，也許 我們希望把這些圈子沿
由標題的長度，所述 在標題字符的數目。
>> 因此，我們將每一次做is--我們 函數被調用的，
我們會發現它的長度和 然後傳遞到規模。
顏色，我會回來 該鋼藍色。
還有，我們走了。
我們有一個可視化 深紅色的頭條新聞。
>> 我們的規模是有點過。
讓我們假設時間最長 標題是100個字符長，
因此跨度了一下。
我們有一個可視化。
如此看來，最頭條 相當接近，
在字符行的條款。
但是，一個人也沒有真正脫穎而出。
>> 我們可以建立一些工具 探索更多。
但是，當我在這方面的工作，我 好奇，是否在這組數據，
頭條用冒號 在他們會更長。
我假設他們會。
>> 因此，讓我們了解一下。
讓我們使用的顏色 通道像我們以前那樣，
編碼一些關於是否 有一個冒號或沒有。
因此，我們將使用一個條件了。
你不必知道 這一細節，
但這是我們如何檢查 串為特定的字符
在JavaScript中，再次，不相關的。
>> 但是，如果我們沒有找到 結腸，我們將返回綠色。
如果我們這樣做，我們將返回紅色。
如此反复，頭條新聞 有一個冒號會變成紅色。
這是這是指：好的。
>> 如此看來，我 假設碰撞。
有只有兩個。
我們只有6個數據點 只有倆人冒號。
但似乎有點多 在其下端，實際上。
頭條用冒號似乎 到通常更短，
至少在我們的數據set--有趣。
>> 讓我們返回到 鋼藍色，然後看看
我們可以利用甚至使 更有趣的數據。
於是，我再次提到， 在D3的數據是事情的清單。
我們已經看到了很多類型的號碼。
我們已經看到的字符串。
但事情也可以是對象。
>> 它們可以是複雜的事情 包含了很多東西。
如果說的更清楚， 在大多數情況下，我們
要建立每一個數據點作為 不僅僅是一個值更複雜。
如果你想像 關於學生數據庫，
有可能是一個學生 名，學生證，
和很多相關的東西 與一個特定的記錄，
不只是一個字符串或數字。
因此，讓我們看一下。
>> 這是一種這樣的數據集。
這是一個數據集有關地震。
所以，這裡的一切我們的列表或陣列上 東西包含了很多東西本身。
所以，每一個數據點都具有 幅度和一個坐標。
和自己的坐標 包含兩件事情。
>> 所以每天是現在很多更 複雜，有很多更有趣
並包含更多 有趣的信息。
讓我們來看看，我們可以打造出這一點。
再次返回這裡，再次，用 我們直方圖圈的可視化
我們已經建立了，讓我們看看我們是否能夠建立一個 震級分佈可視化
在我們的數據集。
>> 所以在這裡，這是同一個概念。
但現在，D包含更多的東西。
D包含許多數據元素。
所以我們得到D背面。
D3給我們ð。
我們通過查找幅度響應 d和再遞過來的規模。
>> 然後，我們需要改變 我們的規模，當然。
所以幅度根本就沒有 去遠遠超過10。
其實，從來沒有 一個10級的地震。
但是，這是一種我們上的 為此，我們在上面的光譜。
>> 讓我們來刷新。
不錯，我們有一個可視化。
有趣的是note--等 有兩個數據點
幾乎正好在每個頂 其他，在幅度方面。
你看這通過我們使用的透明度。
>> 我們現在有地理數據。
我們有緯度和經度。
也許我們可以做的東西 很多與更有趣。
讓我們找一些更 有趣的方式來可視化
這更複雜 數據，我們有機會獲得。
>> 第五幕，Mapping--根本， 我們要在地圖上把這些。
我的意思是，這是這是怎麼回事。
我們想了解的信息進行編碼 這些地震讀數的位置，
以及其規模， 因為我們有現在。
我們知道如何消費 更複雜的數據。
>> 我們要做的第一件事就是 創建地圖，一個背景圖。
我會去通過 這非常快。
這是棘手的代碼。
這是另一個那些 食譜，你真的不
要充分了解供您使用。
但是，這是代碼。
這段代碼在這裡創建了一個地圖。
>> 我們不會去詳細。
但表面上，它的作用是， 它查詢該us.json文件，
就像一個數據文件 一個我們以前。
這是比較複雜的，當然。
但在這種情況下，一切， 每一個數據點是這樣的狀態，
並具有列表 緯度和經度
定義的多邊形， 這種形式，這種狀態。
>> 那麼，什麼D3會做類似 什麼我們以前那樣。
這將要求和 結合，為一個元件。
這裡面的一個函數， 將映射元素出來，
根據該緯度和經度。
你可以閱讀更多關於這一點。
我推薦它。
>> 有在鏈接 這段代碼的最終發布。
和代碼註釋。
在有關於該鏈接用於進一步。
我建議你查一下。
但我們關心的是 該投影功能。
我想通過這一點。
>> 首先，讓我告訴 你說，是的，我們有一個地圖。
地圖是冷的。
因此，讓我們看看這個 生產函數。
>> 投影是非常 像規模，再擴展。
那麼，什麼生產 該投影功能
確實是，我們可以通過它的經度 和latitudes--在這種情況下，
這裡，這些值是在 LAT-多頭的建設
我們坐在右 now--投影。
和投影將轉換 到這一點的x和y的像素值。
>> 那麼，什麼投影做 非常類似於我們的規模。
它以我們的緯度和 經度表示整個地球
和收縮和尺寸的 下來，我們希望廣場，
我們已經給了它。
在這種情況下，我們 通過這些值。
而且它給我們，好，那 在屏幕上指640像素。
這整個屏幕為700像素 寬，這樣就使得我們這裡，
和154像素下來，我會 估計是幾乎在這裡。
>> 所以服用這些緯度多頭，其中 代表東西就整個地球
和壓扁和移動周圍 給我們x和y的像素值，
這是第一件事，就是 在這個映射代碼完成。
的，然後休息 代碼消費數據
然後映射那些緯度多頭 到的東西在屏幕上。
>> 但是，我們要利用這個投影 功能，因為事實證明
我們有緯度多頭多頭為好。
回頭看看我們的數據，我們有 緯度和經度坐標
每一個觀察。
因此，讓我們使用投影。
>> 所以，看我們的闡述， 我們希望我們的exposition--
我們有一個緯度和經度。
但我們要的像素值。
而事實證明，我們有完全相同 我們want--投影。
很像我們 使用規模就在這裡，
我們現在要使用投影 並把它傳遞坐標。
所以，第一件事 我們doing--所以我們
得到D，它是一個單獨的數據 單個地震元素
閱讀。
我們要做的第一件事 是獲取坐標。
好吧，我們有坐標。
>> 我們要做的第二件事是 傳遞到投影。
投影轉換這些坐標 入的像素值，x和y。
再過去的事情，我們 想要做的是剛剛拿到X，
這此情況下是第一個。
它是第一個的兩件事 這是由投射返回。
>> 我們將y的做同樣的。
而是，我們將返回 第二元件，在y。
準備好刷新。
哦，多餘的字符 這裡 - 不錯，我們有
一個數據驅動的文件，是 隱瞞對象的這個JSON文件，
拍圖，並且改變 關於屬性的數據
突出它在地圖上。
這真的很有趣。
這是很酷的。
>> 讓我們把它上升了一個檔次。
我的意思是，我們有兩件 信息與每一個數據點。
我的意思是，三名。
我們有坐標， 其是x和y。
而我們的規模。
>> 我們需要以某種方式程度編碼。
我們有很多渠道。
我們可以使用的顏色。
我們可以使用半徑。
我們可以使用不透明。
我們可以在代碼中使用了很多東西。
這些屬性和許多 更多未列出的有，
因為他們是可選的，我們可以 使用這種數據進行編碼，行程
和我提到的所有這些事情。
>> 讓我們做半徑。
我覺得半徑是最直觀的。
所以，再一次，我們將取代硬編碼 40並進行一些計算。
我們將再次使用我們最喜歡的規模。
而且我們過去ð。
但不是D，因為我們想要的幅度 的D-。 d為僅僅是數據點。
我們將通過規模擴展。
>> 讓我們再試一次。
哦，這是行不通的。
為什麼它不工作？
>> 所以要記住什麼規模呢。
讓我們來看看規模了。
比例尺地圖從1到10上 到22〜600，更多或更少。
600是巨大的。
這就是為什麼我們得到這個。
>> 因此，我們要改變我們的規模 為更合理。
比方說，我們要0到60。
60大，但10地震 是令人難以置信的罕見。
事實上，他們從來沒有發生過。
>> 所以，這是什麼會做的是，它會採取 我們的大小是從1到10
並將其映射到擴展出來。
並在地圖上為0到60。
讓我們來刷新。
>> 不錯，我們有一個可視化。
這是偉大的。
這是實際的數據。
你會發現，在我的小玩具 舉例來說，最大的地震
是正確的我們之上。
但僅此而已。
我們有個約會驅動的可視化 消耗的數據
並給了我們真正的 有趣的信息。
是啊，讓我們添加一些 互動吧。
我提到這是 D3的強大力量。
>> 所以在這裡，對於每一個元素，我們 描述了一堆屬性。
但是，我們也可以描述我們想要的 發生與互動元素。
例如，我們可以描述 會發生什麼，當我們鼠標滑過。
和非常相似的是， 那將需要的功能，
非常相似的 屬性我們以前，
我們做一些事來了哪裡 元素，當我們將鼠標懸停在它。
>> 所以第一件事情，我們需要 做的是選擇元素，
找到它基本上，在瀏覽器中。
然後，我們可以設置 一個屬性給它。
所以我在做什麼在這裡，當我們徘徊 過什麼東西，我們會得到這個元素
然後將其不透明度回 1，完全不透明。
讓我們來看看是什麼樣子。
>> 看來我們有一個 在這裡多餘的分號。
因此，如果我們在這裡徘徊，它就會爆滿。
但現在，當然，它 撐滿了，因為我們
要描述發生了什麼 當我們刪除光標。
因此，讓我們做到這些的 鼠標移出，而不是將鼠標放置。
>> 我們將其重置為 我們有什麼before-- 0.5。
而現在，我們每次 懸停，我們得到一個完整的圓。
它幫助我們看到我們 我們選擇本質。
>> 現在讓我們做這真是太好了。
讓我們連接這個真實的數據。
因此，讓我們問能 有關他們的數據USGS。
因此，美國地質調查局 有關於地震的數據。
他們有一個公共的API，能夠 被消耗JSON格式。
因此，讓我們做到這一點。
>> 所以這是一個有點代碼 連接到USGS API。
還有的就可以了位處理的。
這是不相關的，但它簡​​化 到像一個簡單的數據格式
我們以前有。
所以我擺脫我們的電話來 我們假data.json的文件。
而是，我打電話 美國地質勘探局是必須的。
>> 讓我們來刷新，美觀大方。
這是實際的，現實生活中的數據 從本週的地震。
這真的很有趣。
這並不令人驚訝 對我們來說，但有
很多在地震 西海岸加利福尼亞州。
但我認為這是非常有趣 有這麼多地震
在阿拉斯加，顯然， 這裡在中西部地區。
我的意思是，有趣，我們是很好的。
這就是結論。
>> 但從根本上說，這 是D3幫助我們做的。
它可以幫助我們獲取數據，綁定 它在DOM元素，
並將這些元素改變 作為數據的功能，
具有這些屬性，所有的 元素的許多屬性，
一切是非常有用的渠道 傳達信息。
>> D3是一個令人難以置信的強大 圖書館和得非常好運行。
這是一些強大的東西。
數據可視化是一個 令人難以置信的強大的工具
輸送到人的深 ，獲取他們的核心見解
並幫助他們了解，在 這種深刻和直觀的方式，
數據如何工作以及如何 數據改變了我們的生活。