[音樂播放] 

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是一個令人難以置信的強大 圖書館和得非常好運行。 這是一些強大的東西。 數據可視化是一個 令人難以置信的強大的工具 輸送到人的深 ，獲取他們的核心見解 並幫助他們了解，在 這種深刻和直觀的方式， 數據如何工作以及如何 數據改變了我們的生活。