[Възпроизвеждане на музика] 

DAVID Chouinard: Аз съм Дейвид Chouinard, и това е D3. Добре дошли. Ще научите за D3 днес. D3 е рамка на JavaScript за изграждане на високо качество интерактивни визуализации за интернет. Неща като това, което сме виждайки в гърба на мен, ние ще се научат да правят тези, неща, вид на основите на това. Но това ще бъде готино. Да започваме вземане на доста снимки. Имаме още демонстрации на перспективите на разположение. Да го направим. 

Act I, DOM manipulation-- отиваме да започне веднага прави готини неща. Преди всичко, в ляво, имаме код. От дясно, имаме резултат от нашия код. Нека да мине през него. 

Нека да направим едно кръгче. Как ти звучи? svg.append circle-- ние просто направи един кръг. Вие не ми вярвате, нали? Това не е там. 

Така че това, което направихме точно тук е, SVG е мащабируеми векторни графики. Това е начинът, по който каже на браузъра, за да направи векторни графики в браузъра. Това, което току-що е направил точно сега Добавя кръг, за да сърфирате. 

Обещанието е, че кръгът изисква малко основни атрибути преди да може действително да го видите. Ние трябва да го кажа на своя х позиция, неговата Y позиция, неговия радиус. Ние не го каже всеки от които, така че ние не го виждаме в момента. Но нека да го кажа неща. 

Така че на първо място, имаш да дадем кръг име. Така че нека да го наречем кръг. Нашата кръг си има име сега. И нека си го дам няколко атрибути. Какво ще кажете за CX ще центрирате х, така центъра на позицията на х. Да речем, 200 200 пиксела. 

Нека му се даде Y на 200 пиксела, както добре. И на R, радиус от около 40 пиксела. Сега нека да видим. Аз не може да пише. 

Ето. В момента има един кръг на позиция 200 пиксела, 200 пиксела, радиус от 40 пиксела. Готино, нали? В момента има един кръг. Да. 

Така че няма нужда да следват заедно. Всички тези примери, всички от кода правя днес ще се предоставят в реално време в края под формата на интерактивни примери с пунктове по всяко действие, и така нататък. 

Нека да направим повече неща. Този черен кръг е наистина грозно. Съжалявам за тази грешка съобщения точно там. Ето. 

Нека му се даде цвят. Как е това? Харесва ми да стомана синьо. Е, нашият кръг променен цвят. Това е страхотно. Нека това полупрозрачно too-- полу-прозрачна. 

Така че това са атрибути ние сме определяне на кръга. Първото нещо, което направихме, е ние поставяме кръг на страницата. И тогава ние сме дефиниране куп атрибути. Някои от тях са задължителни, като CX, CY, и Radius. И други са по избор. 

Има много повече атрибути. Има много от тях. Например, ние може да има инсулт, както и, инсулт на червено. Но нека да се премахне това. Отново сме в кръг, син кръг. 

Така че нека да се направи повече кръгове. Как е това? Нека да направим още един кръг. Това е вълнуващо, нали? 

Да предположим, че аз просто Copy и замазка това, което вече имаме. Нека го наречем circle2. И нека да направи точно едно и също нещо и да му дадете атрибути, дадена х позиция на 300. Уау, ние имаме два кръга сега. 

И разбира се, бихме могли да актуализира тези ценности. Можех да го сложи на 400, а сега тя се движи. И тъй като това е досадно, нека го махна, така circle2.remove. Няма я вече. 

Така че това, което правим и е просто много, very-- това е много подобен на това, което може да се направи в Jquery, например. Ние просто манипулиране на DOM, тя се нарича. Може би сте чували тази дума преди. Ние създаваме неща, настройка атрибути на неща, премахване неща. 

Сега, тук е мястото, където става интересно. Така че по-късно в кода, можехме още вижте оригиналния кръга тук. Така че нека да изчисти своята атрибут на CX. Да речем, неговото х позиция до 400. И аз ще съм за преход че, така че това е очевидно. Ето. 

Така че ние добавихме кръг. Ние поставяме някои атрибути. Ние с още един кръг, тя се отстранява. И тогава ние сме модифициране първоначалния кръг. 

Но тук е мястото, където става много по-интересно. Не само може да зададете атрибути като само стойности, можем да кажем, Хей, кръг, отидете до позиция 200. Можем също така да ги зададете като функции. 

Така че вместо да даде 400 тук, можем да направим някои изчисления в движение, за което ние Искам този атрибут да бъде. Така че това е начина, по който ще изразят това. Ние казваме, вместо 400, да ме ви даде функция вместо. И тук, вътре в тази функция, ние може да направи всеки луд изчисление. 

Бихме могли да отделите време и разгледаме някои други неща и динамично да реши за кръга каква стойност искаме. Какво ще кажеш да просто да даде тя случаен х позиция? Така че това е, че. 

И какво от това, което казва е, за всеки X, стартирате тази функция. И това, което правим, е изчисляване някои неща, а случайни пъти широчината и връщане на това. Така че всеки път, когато стартирате, че ние се кръг, който отива на случаен място. Това е нещо готино. Имам чувството, че може да изглежда На този за малко. Ние започваме да се стигне до нещо интересно тук. Нека да направим тази информация задвижва сега. Няма по данни тук. Нека променим това. 

Act II, Data Driven Documents-- Така че нека да се върнем тук. И нека просто да се отървем от circle2, защото ние просто добавяне и премахване това. Така че ние наистина не се нуждаят от нея. Ние трябва да бъдем много по-умен от тук. Да речем, имаме някои данни от някакъв вид. Един moment-- да речем, имахме тази форма. Имахме масив, просто куп номера. Имаме седем числа тук, каквото те 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 за. 

Така че тази х postition-- вместо от просто казвам, всички кръгове, получите х позиция 200, ние може да му се даде функция. И тук, можем да направим някои изчисления. и г тук стои на място за данните. Така че всеки път, когато имаме кръг, в общи линии, D3 ще създаде тези седем кръга. И тогава за всеки 

окръжност, то се случва да отида, хей, circle1 какво е вашето х позиция. Преди това ние бяхме Винаги отговора 200. Но сега, всеки път, D3 пита ни какво е вашето х позиция, това ще даде us-- имаме този кръг, така че ние имаме данните. Това ще ни даде информация и да кажа, какво искаш експозицията да бъде, въз основа на тези данни. 

Нека просто да се върне на актуалните данни. Така че, ако ще свършим това, това дава САЩ данни задвижвани документи. Тези кръгове се базират във връзка position-- те са бази като функция на данните. 

Така за първи кръг, D3 поставя кръг. И тогава D3 ни пита, какво правим искате експозицията да бъде. И ние само да кажа, каквото и данните са. Направи експозицията 10. 

След това го пита, какво искаш от експозиция да бъде за втори кръг. И ние отговаряме, 45. И ние, разбира се, може направят някои изчисления тук. Намирам, че тези кръгове са вид смачка нагоре. 

Така тя се умножава по 3, умножете данни от 3. Нашата кръг просто се разширява навън. Нашата стойност се е утроил. 

Кръгът е наистина на ръба, така че нека може би един вид го компенсира. Да речем, от 20. Заповядай. 

Това е визуализация на данни. Това е един много основен едно, но това ни дава някаква представа за нашите данни. Той ни казва, че, например, ние имаме малка група от елементи. И ние имаме един голям външен човек тук. Това ни дава някаква информация за разпределението. 

Ако трябва, например, да се промени данните до 150 тук и опресняване, нашата визуализация се променя. Този документ е данни задвижване. 

Така че, разбира се, всички тези елементи, всички тези атрибути тук можем да използваме функция, а не само цифрите, а не само Х и У позиции. Така че ние можем да използвате функцията за цвят. Така че ние ще направим същото. Ние ще го дам функция. 

И нека да кажем, бихме могли да имат условностите в нашата функция. Тази функция може да бъде Сто на линии дълги. Той може да направи много, много сложни неща. 

Така че нека да се сложи ако изявление тук. Да кажем, ако данните ни е по-малко от 50, това е някакъв праг че ние сме заинтересовани в по някаква причина. Нека да го направи зелен. В противен случай, нека да го направи червено. Как е това? Ница. 

Така че нашата визуализация на данни започва да предадат по-интересна информация по много канали. Така че сега ние знаем малко за разпределението. И ние знаем, че има някакъв вид отрязани 50, които ние Ви интересува. Ние знаем, че има две информационни точки под този праг и повечето от тях -горе. 

Така че като краен етап, тези данни тук, това е много рядко да се види това по този начин. Така че нека просто да го изнесат на променлива защото това е по-чист, по този начин. И тогава ние използваме тази променлива тук. Това е точно същото нещо. Това е малко по-чист. 

Следващата, Закон III, Scales-- Така че един проблем полето тук е, ако можем да променим данни в тази 200 value-- ако можем да го смените с 400 или нещо и опресняване, След това тази стойност просто отиде извън екрана. Така че нашата логика точно тук за това как правим времената 3 и 20, за да го разпространява и след това тя компенсира малко е наистина несръчност. 

Какво тези цифри означават? Те просто трудно кодирани там. И те са много обвързани с данните. Искаме документ с данни задвижване. Искаме много гъвкав документ, че дадени данни, за да го адаптира и да го представлява. 

Това, което основно се нуждаем, е, ние имат тази поредица от номера 10. 45, 105. И ние искаме да картографира, че излизаше ширината, по цялата ширина тук. Така че ние имаме интервала номера ще 0-100. И ние имаме този кампус I отива 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, които За нас е елемент от данни. И там да отидем. Имаме цветова скала. 

Така че това е картографиране. Така че крайната левица е напълно зелено. -Вдясно е напълно червено. И всичко между тях е функция на г. В момента има една интересна визуализации тук. Но нашите данни е вид скучни. Нека видим какво можем да направим, ако имахме по-интересни данни. 

Закон IV, работа с Data-- първото нещо, ние ще искате да направите, за да ни визуализация по-интересно е да преместите данните някъде другаде. Това е много неудобен за да получите данните трудно кодирани тук. И като цяло, ние ще се питам някой друг за данните. Ще бъде може би иска от правителството, Бюрото за преброяване, какво е вашето данни и след това се заговор, че или иска някои трети страни лице за някои данни и след това изграждане на визуализация на това. 

Така че първото нещо, което искате да направите, е се движат, че някъде другаде. Така че аз отивам да се създаде подадете тук наречен data.json. JSON е формата на данните. Не е нужно да знам много за това. И ние отиваме, за да копирате Малко данни имаме там, го поставете там дословно, отидете обратно към нашата визуализация код тук, и да използвате тази функция, точно тук. Не е нужно да знам подробности. Но това, което ще направим, е, ще откриете, че файла, го вземе и да го върне при нас. Така че това, което прави е, тя отива и зареждане на файла data.json. И тогава всички код, който е разчленена inside-- същество, всички код имаме there-- ще тече едва когато стигнем отново данните. И след това, че ще ходи да работи, че код с данни, което имаме. Great, ние имаме визуализация, която запитва за някакъв код някъде друго, което обикновено е където заявки някои данни от някъде другаде, което обикновено е как визуализации работят. 

Но аз искам да се върна към данните. Така данните принципно в D3-- D3 консумира данни, че е списък на нещата. D3 очаква данните да бъде само един списък на нещата, масив от нещата. Няма значение какви са тези неща, са, доколкото това е масив от тях. 

Така че тук, например, бихме могли на Разбира се стойности с плаваща запетая. Ние може да има негативи. D3 не се интересува, толкова дълго като това е списък на нещата. 

По-интересните неща, които сме може да има, ние също може да Имаме списък от низове, като това. Така че това са заглавията Crimson Взех преди няколко дни. И може би можете да намерите някои интересни неща за тези на заглавията. 

Така че отново, това е списък на нещата. D3 не се интересува. Това се случи да бъде низ. Променихме нашите данни. 

Нека да се върнем към нашия визуализация. Сега, нашата визуализация очаква на входа, за да бъде номера. Така че ние ще имаме да направи няколко промени. Така например, на първо място, може би Искаме да изкараме тези кръгове заедно от дължината на заглавието, на брой знака в заглавието. 

Така че това, което ние ще направим is-- всеки път ни Функцията се нарича с връв, ние ще намерим това е дължината и След това така, че да мащаб. Цветът, че ще се върне че да стомана синьо. И там да отидем. Ние имаме визуализация на Crimson заглавия. 

Нашата мащаб е малко вероятен. Нека приемем, че най-дълго Заглавието е с дължина 100 символа, така обхващат че от малко. И ние имаме визуализация. Така изглежда, че повечето заглавия са доста близо един до друг, от гледна точка на характера на линия. Но един наистина се откроява. 

Бихме могли да изградят някои инструменти да проучи, че повече. Но когато работех по това, аз бях любопитен дали в този набор от данни, Акценти с двоеточие В тях ще бъде по-дълго. I поема искаха. 

Така че нека да разберете. Да използваме цвят канал, както направихме преди, за кодиране на някои за това дали има двоеточие или не. Така че ние ще използваме условно отново. Не е нужно да знаете детайлите на тази, но това е начина, по който да проверят по- низ за конкретен характер в JavaScript, отново, не е от значение. 

Но ако не се намери дебелото черво, ние ще се върне в зелено. И ако го направим, ще се върне в червено. Така че отново, заглавия, които са на дебелото черво ще бъдат червени. Това е, което тази means-- хубаво. 

Така че изглежда, че ми хипотеза се блъсна. Има само две. Ние имаме само шест точки от данни и само две са имали запетая. Но изглежда малко по- в долния край, в действителност. Акценти с колони изглеждат като цяло да бъде по-кратък, най-малко в нашите данни set-- интересно. 

Нека да се върне, че да стомана синьо и след това да видите какво можем да направим с още по-интересни данни. Така че отново, аз споменах, че данни в D3 е списък на нещата. Видяхме номера, от различни видове. Виждали сме струни. Но това, също могат да бъдат обекти. 

Те могат да бъдат сложни неща че да включва много неща. Да се ​​каже, че по-ясно, в повечето случаи, ние Искам да изградя всяка точка данни, по-сложно, отколкото само една стойност. Ако искате да си представя по- база данни за студенти, може да има един студент име, ID студент, и много неща, свързана с конкретен запис, Не просто низ или число. Така че нека да погледнем на това. 

Това е един такъв набор от данни. Това е набор от данни за земетресения. Така че всичко тук в нашия списък или масив на нещата съдържа сама много неща. Така че всяка точка данни има величина и координира. И самите координати съдържа две неща. 

Така че всеки ден сега е много по- сложно и много по-интересно и съдържа много повече интересна информация. Нека да видим можем да изградим от това. Връщайки се обратно към тук, отново, като се използва нашата хистограма кръг визуализация ние създадохме, нека да видим дали можем да изградим визуализиране на разпределението на големината в нашия набор от данни. 

Така че тук, това е едно и също понятие. Но сега, г съдържа повече неща. г съдържа много елементи от данни. Така че ние се По- назад. D3 ни дава г. И ние се отговори чрез намиране величината на г и след това минава, че да мащаб. 

И тогава ние трябва да се промени нашия мащаб, разбира се. Така величини просто не отидете много повече от 10. Всъщност, никога не е имало земетресение 10 магнитуд. Но това е нещо като нашата горна край, ни горна спектър. 

Нека да освежи. Nice, имаме визуализация. Интересно е да се note-- така има две точки от данни, са почти точно в началото на всяка друга, по отношение на големината. Вие виждате тази от непрозрачността ние използваме. 

Имаме географски данни сега. Имаме ширини и дължина. Може би бихме могли да направим нещо по- Много по-интересно с това. Нека да намерите някои по- Интересен начин да се визуализира това по-сложно данни ние имаме достъп до. 

Act V, Mapping-- фундаментално, Искаме да изкараме тези на картата. Искам да кажа, това е мястото, където това се случва. Ние искаме да се кодира информация за Позицията на тези земетръсни четения, както и тяхната големина, защото ние имаме, че сега. Ние разбираме, как да консумираме по-сложни данни. 

Първото нещо, което ще направите, е създадете карта, на фона на картата. Отивам да мине през това много бързо. Това е сложен код. Това е още един от тези, рецепти наистина не Трябва да се разбере напълно за да можете да използвате. Но това е код. Този код точно тук създава карта. 

Ние няма да отида в подробности. Но повърхностно, това, което той прави, е, го запитва този us.json файл, който е файл с данни, като този, който е имал преди. Това е по-сложен, разбира се. Но в този случай, всичко, всяка точка от данните е това състояние и разполага със списък на ширини и дължина които се определят на полигона, тази форма, това състояние. 

И така, какво ще правим D3 е подобно до това, което направихме преди. Той ще поиска и че се свързва към елемент. А има и функция, която ще очертае, че елемент от, въз основа на географски ширини и дължина. Можете да прочетете повече за това. И аз го препоръчвам. 

Има връзки в край на този код е публикувал. И кодът се коментира. В има линкове за допълнително по този въпрос. Препоръчвам ви да го гледам. Но това, което ни интересува, е Тази прогноза функция. Искам да мине през това. 

На първо място, нека да покажем ви, че, да, ние имаме една карта. Maps са готини. Така че нека да погледнем на това производствена функция. 

Projection е много като скала, везни отново. И така, какво производство за Тази прогноза функция прави, е, бихме могли да го давате дължина и latitudes-- в този случай, тези стойности тук са LAT-копнее на сградата седим в полето now-- да проекция. И проекция ще конвертирате че в х и у стойностите на пикселите. 

Така че това, което прави проекция е много подобен на нашия мащаб. То е като нашите географски ширини и дължина, че представлява цялото земно кълбо и свиване и оразмеряване, че до площада, който искаме, че ние сме го дал. В този случай, ние сме преминаване на тези ценности. И това ни дава, добре, че на екрана означава 640 пиксела. Целият този екран е 700 пиксела широк, така че ни прави за тук, и 154 пиксела надолу, което бих цената е почти тук. 

Така че, като тези лат-копнее, които представляват нещо по целия свят и стиска и движещи се, че около да ни х и у пикселни стойности даде, това е първото нещо, което е направено в тази картографиране код. И след това останалата част от Код консумира данните и след това преобразува тези лат-копнее върху нещо, на вашия екран. 

Но ние ще използваме тази проекция функции, защото се оказва, имаме лат-копнее копнее, както добре. Поглеждайки назад към нашите данни, ние имаме ширини и координати за всяко наблюдение. Така че нека да използваме проекция. 

Така че гледа нашата експозиция, Ние искаме нашите exposition-- имаме ширина и дължина. Но ние искаме пикселни стойности. И се оказва, имаме точно това, което ние want-- проекция. Много като бяхме използване на скала, точно тук, Сега ще се използва проекция и да премине тя координира. Така че първото нещо, ние сме doing-- така че сме получаване г, който е индивидуален данни елемент на отделен земетресение четене. Първото нещо, което правим е да получите координатите. Добре, имаме координатите. 

Второто нещо, което правим, е така, че, за да проекция. Projection конвертира тези координати в стойностите на пикселите, х и у. И след последното нещо, което ние искате да направите, е просто да се качите на X, която този случай е първият. Това е първата от двете неща които се връщат чрез прожектиране. 

Ние ще направим същото и за у. Но вместо това, ние ще се върне вторият елемент, на база. Пригответе се да се обнови. Ооо, допълнително характер here-- хубаво, имаме на данни задвижване документ, че е прикриване тази JSON файл на обекти, вземане на картата, както и промяна на атрибут по отношение на данните да го проектира върху карта. Това е наистина интересно. Това е готино. 

Нека си го вземе с една степен. Искам да кажа, ние имаме две парчета информация с всяка точка от данните. Искам да кажа, три. В момента има координатите, който е х и у. И ние имаме величината. 

Ние трябва да се кодират магнитуд някак. Ние имаме много канали. Ние можем да използваме цвят. Ние можем да използваме радиус. Можем да използваме непрозрачност. Можем да използваме много неща в кода. Всяко едно от тези качества и много по-, които не са изброени там, защото те са по желание, бихме могли да се използва за кодиране на тези данни, ходът и всички тези неща, които споменах. 

Нека да направим радиус. Мисля, че радиусът е най-интуитивен. Така че отново, ние ще замени, че е кодиран 40 и да направи някои изчисления. Ние ще използваме нашата любима мащаб отново. И ние сме минали г. Но не По- защото искаме величината от г. г е само точка от данни. Ще мине величината на мащаба. 

Нека се опитаме това отново. Ооо, тя не работи. Защо тя не работи? 

Така че не забравяйте какъв мащаб прави. Нека да разгледаме скалата отново. Scale карти от 1 до 10 на до 22-600, повече или по-малко. 600 е огромна. Ето защо ние получаваме това. 

Така че ние искаме да променим нашия мащаб към нещо по-разумно. Да кажем, ние искаме 0-60. 60 е голям, но 10 земетресения са невероятно редки. В действителност, те никога не съм се случи. 

И така, какво ще направим, е, че ще отнеме нашата величина, която отива от 1 до 10 и то на карта, за да го разширят навън. И карта за да 0 до 60. Нека да освежи. 

Nice, имаме визуализация. Това е страхотно. Това е фактически данни. Ще забележите, в моята малка играчка Например, най-голямото земетресение е точно на върха на нас. Но това е всичко. Имаме дата задвижва визуализация който консумира данните и ни дава наистина интересна информация. Да, нека добавим някои интерактивност към него. Споменах, че е голямата сила на D3. 

Така че тук, за всеки елемент, ние сме описващ куп атрибути. Но ние също така може да се опише това, което искаме да се случи с интерактивност елементи. Например, ние може да се опише това, което се случва, когато мишката върху. И много подобна, че, че ще вземе функция, много подобен на атрибути имахме преди, когато правим нещо на елемент, когато мишката върху него. 

Така че първото нещо, което трябва да направите, е да изберете този елемент, да го намерите в общи линии, в браузъра. и след това да подредим атрибут към него. Така че това, което правя тук е, когато задържите курсора на мишката над нещо, ние ще се заемем този елемент и след това да настроите своята непрозрачност назад 1, напълно непрозрачен. Нека видим какво прилича това. 

Изглежда имаме допълнително запетая тук. Така че, ако ние мишката върху тук, той получава пълна. Но сега, разбира се, тя остава пълна, защото ние Трябва да се опише това, което се случва когато се премахне нашата курсора. Така че нека да направим точно това върху mouseout, за разлика от Щракнете с мишката. 

И ние ще го възстановите това, което имахме before-- 0.5. И сега, всеки път, когато Hover, получаваме пълен кръг. Тя ни помага да видим какво можем ни е да изберем по същество. 

А сега нека да направим този наистина страхотно. Нека да го свържете към реални данни. Така че нека да попитам може USGS около техните данни. Така че за геоложки проучвания на САЩ има данни за земетресения. Те имат публичен API, който е в състояние да се консумира в JSON формат. Така че нека да го направя. 

Така че това е малко на код, който се свързва с API USGS. И там е малко на обработка върху него. Това не е от значение, но той опростява да прост формат като този имахме преди. Така че аз се отървете от нашия призив да нашата фалшива data.json на файл. А вместо това, аз се обаждам на USGS същество. 

Нека да освежите, хубаво. Това е действително, данни от реалния живот от тази седмица за земетресения. Това е наистина интересно. Това не е изненадващо за нас, но има много земетресения върху West Coast в Калифорния. Но аз мислех, че е много интересно че е имало толкова много земетресения в Аляска, и както изглежда, тук в Средния Запад. Искам да кажа, интересно, и ние сме добре. Това е заключението. 

Но в основата си, това е това, което ни помага да направим D3. Тя ни помага да вземат данни, се свързват тя да елементи в DOM, и да има тези елементи се променят като функция на данните, имат тези качества, всички много атрибути на елементите, всички да бъдат полезни за канали да предадат информация. 

D3 е невероятно мощна библиотека и удивително добре управлявана. Това е някакъв мощен материал. Визуализация на данните е невероятно мощен инструмент за транспортиране на хора, дълбоки прозрения, че стига до сърцевината им и им помага да разберат, в тази дълбока и интуитивен начин, как данните работи и как данни променя живота ни.