[Музички] 

ДАВИД CHOUINARD: Јас сум Давид Chouinard, а тоа е Д3. Добредојдовте. Ние ќе се запознаат со Д3 денес. D3 е да го вклучите Javascript рамка за изградба на висок квалитет интерактивна визуелизација за веб. Работи како она што ние сме гледајќи во задниот дел од мене, ние ќе треба да научат да прават оние работи, вид на основите на неа. Но, тоа се случува да биде кул. Ајде да започнеме правење убави слики. Имаме повеќе демонстрации од перспектива на располагање. Ајде да го прават тоа. 

ЧИН I, ДОМ manipulation-- ние ќе за да започнете веднаш правење интересни нешта. Прво на сите, на левата страна, имаме код. На десната страна, имаме резултат на нашиот код. Ајде да одиме низ него. 

Да се ​​направи круг. Како прави тоа звук? svg.append circle-- ние само го направија еден круг. Вие не ми верувате, нели? Тоа не е таму. 

Значи она што го правевме токму тука е, SVG е скалабилни векторска графика. Ова е начинот на кој ние се каже на прелистувачот да направи вектор графика во прелистувачот. Она што го направија во моментов се додава круг да ги пребарувате. 

Ветувањето е дека кругот бара малку на основните атрибути пред ние всушност може да се види тоа. Ние треба да го кажам својот x позиција, нејзините y позиција, нејзиниот радиус. Ние не го каже некој од тоа, па ние не го гледаме сега. Но, ајде да го кажам нешто. 

Значи прво на сите, имаш да им дадеме на нашите круг име. Значи, ајде да го наречеме круг. Нашите круг има име сега. И ајде да се даде неколку атрибути. Како за CX би центар x, па центарот на x позиција. Да речеме, 200 за 200 пиксели. 

Ајде да го даде Y од 200 пиксели, како и. И r, радиус, од околу 40 пиксели. Сега да видиме. Јас не може да се опишат. 

Таму да одите. Имаме круг на позиција 200 пиксели, од 200 пиксели, радиус од 40 пиксели. Вид на кул, нели? Имаме круг. Да. 

Значи нема потреба да го следат заедно. Сите овие примери, сите кодот јас го правам денес ќе бидат обезбедени онлајн на крајот во форма на интерактивна примери со контролни пунктови на секој акт, и така натаму. 

Ајде да направиме повеќе нешта. Оваа црна круг е навистина грди. Жал ми е за таа грешка пораки во право таму. Не одиме. 

Ајде да го даде боја. Како е тоа? Ми се допаѓа да го челик сина боја. Па, нашите круг промени на бојата. Тоа е одлично. Да се ​​направи тоа полу-транспарентен too-- полу-транспарентен. 

Значи ова се атрибути ние сме дефинирање на кругот. Првото нешто што ние го сторивме е ние се стави круг на оваа страница. И тогаш ние сме дефинирање еден куп на атрибути. Некои од нив се бара, како CX, CY, и радиус. И другите се опционални. 

Постојат многу повеќе атрибути. Има многу од нив. На пример, ние би можеле да имаат мозочниот удар, мозочен удар на црвено. Но, ајде да ја отстрани. Ние сме назад во круг, син круг. 

Значи, да се направи повеќе кругови. Како е тоа? Да се ​​направи уште еден круг. Ова е возбудлив, нели? 

Така велат Јас само копи-пејст она што веќе го имале. Ајде да го наречеме circle2. И ајде да го стори токму истото и го даде атрибути, со оглед на х позицијата на 300. Yay, имаме две кружници сега. 

И, се разбира, ние би можеле да ажурирање на овие вредности. Јас може да го стави на 400, а сега таа се движи. И бидејќи тоа е досадно, ајде извадете го, па circle2.remove. Тоа е нема сега. 

Значи она што го правиш и е само многу, very-- ова е многу слично на она што можел да направи во jQuery, на пример. Ние сме само манипулирање ДОМ, се вика. Можеби сте слушнале дека пред зборот. Ние сме создавање работи, поставување атрибути на работи, отстранување нешта. 

Сега, тука е местото каде што станува интересно. Така подоцна во кодот, ние би можеле уште се однесува на оригиналната круг тука. Значи, да ги ресетирате својот атрибут на CX. Да речеме, нејзината позиција х 400. И јас одам да транзиција тоа, па тоа е очигледно. Не одиме. 

Значи ние додаде круг. Ние го поставите на некои атрибути. Додадовме уште еден круг, ја извади. И тогаш ние сме менување оригинални круг. 

Но, тука е местото каде што станува многу поинтересна. Не само што може да се постави атрибути како само вредности, може да се каже, Еј, круг, оди во позиција 200. Ние, исто така може да ги поставите како функции. 

Така, наместо да даваат 400 овде, можеме да направиме некои пресметка во лет за она што ние сакам тоа атрибут за да биде. Значи ова е како што би го изразат тоа. Велиме, наместо 400, дозволете ми ви даде функцијата, наместо. И тука, во внатрешноста на оваа функција, ние може да направи било луд пресметка. 

Ние би можеле да се преземат на време и гледам во некои други нешто и динамично се одлучи за кругот што вредност сакаме. Како за ние само се откажат тоа случаен x позиција? Значи тоа е тоа. 

Значи она што вели дека е, за Секој Х, ја извршите оваа функција. И она што го правиш е пресметување некои работи, по случаен избор пати ширина и да се врати тоа. Значи, секој пат кога ние се кандидира тоа, ние се добие круг што оди на случаен место. Тоа е вид на кул. Се чувствувам како да може да се погледне во ова за малку. Ние сме почнуваат да се дојде до нешто интересно овде. Да се ​​направи ова на податоци управувано сега. Нема податоци овде. Ајде да го промени тоа. 

ЧИН II, податоци Управувано Documents-- Значи, да се вратиме тука. И ајде да се ослободи од circle2, бидејќи ние сме само додавање и отстранување на тоа. Значи ние навистина не е потребно. Ние треба да се биде многу умен тука. Да речеме, имаме некои податоци на некој вид. Еден moment-- да речеме, имавме податоци на оваа форма. Ние имавме низа, само еден куп на броеви. Имаме седум броеви, без оглед на овие represent-- износ во банкарска сметка на луѓето, како колку тие тежат, бог знае што. 

Овие се броеви, и ние сакате да го користите нашите кругови да ги претставуваат оние броеви некако. Ние сакаме да се врзуваат за нашите кругови на оние броеви. Значи она што го правиме. Да речеме, сакаме круг за секој број. Ние може да направи стариот нешто што се doing-- круг додавај и circle2 и circle3. Но, ова излегува од рака, и има многу на повторување логика. 

Значи, да се попаметниот со тоа. Наместо да се користи var круг svg.append дека бевме само користи, ние сме случува да се користи овој мал блок тука. Не сакам да одам во-длабочината на во она што сите овие делови се направи. И тоа е вид на напредна тема. И посакувам да можев. 

Но, клучна работа е да recognize-- и ќе видите многу често е во Д3 код. Овој блок од текст основните создава како многу кругови колку што има елементи на податоците во оваа низа, токму тука. Значи ова создава толку многу кругови постојат елементи. Тоа се случува да ни создаде седум кругови. И тоа го прави навистина, навистина клучна работа. Значи, да се кандидира тоа. Да се ​​отстранат другите наши круг. Ајде само коментираше овој скратено надвор и да ја стартувате тоа повторно. 

Не одиме. Така, нашето круг тука е многу потемна, бидејќи ние имаат седум кругови, еден на врвот на друга. Ние само се создаде седум кругови, еден секој за секоја од овие податоци елементи. Но, има една клучна работа што се случи со овој фрагмент, токму тука. 

Тоа е дека податоците биле врзани. Значи секој еден од тие податоци елементи, 10, 45, 105, е обврзан на одреден круг. Затоа, не само овие создаден еден куп на кругови но ги врзува овие две работи заедно. 

И во иднина, бидејќи ние создадовме тие кругови со оваа Д3 функција, ако јас ви даде круг, можете да ми даде податоците поврзани со неа. Значи можеме да поставиме Д3. Еј, Д3, имам овој круг. Што е податокот дека кругот? И Д3 ќе ни каже 10 или 45 или 105. 

Овие нешта се врзани. Тоа е многу, многу фундаментален концепт. Да ги погледнеме на тоа. 

Значи начинот на кој ние ќе побара D3-- така ова е ирелевантно за ова, но само ми верувате на неа. Ова е како ние бараме Д3. Еј, Д3, дај ми прв круг што може да се најдат. Дај ми првиот круг може да се најдат. И тогаш ние би можеле да побараат Д3, она што е податоците за тоа, како оваа, 10. 

Значи ние само побарајте Д3, најдете ме првиот круг може да се најдат. Што има своите податоци? 10, кој е навистина нашата Првиот елемент на податок. Можевме да го прашам, еј, Д3, ни се најде нашиот трет круг. 105. Зошто е ова важно? 

Значи, токму тука, јас спомнав кои би можеле да се користат функции. И јас спомнав дека беше многу моќна работа. Затоа, не само што може да функционира нашето прават работите како што прават некои пресметка, на пример, се врати на случаен број, може да исто така, се прават работите врз основа на податоците. Тоа е она што значи податоци управувано документи. Тоа е она што Д3 застапува. 

Значи ова x postition-- наместо на само велејќи, сите кругови, добие x 200 позиција, ние може да го даде во функција. И тука, можеме да направиме некои пресметка. и d тука стои во место за податоци. Така што секој пат имаме круг, во основа, Д3 ќе се создадат овие седум кругови. И тогаш за секој 

круг, тоа се случува да одам, еј, circle1 она што е вашата x позиција. Претходно, ние бевме секогаш одговарање 200. Но, сега, во секое време Д3 прашува Што има вашиот x позиција, тоа се случува да им даде us-- имаме тој круг, па ние имаме податоците. Тоа се случува да ни даде податоци и да каже, што сакаш изложбата да биде, врз основа на тие податоци. 

Ајде само да се вратат вистинските податоци. Значи, ако ние ја извршите оваа, ова му дава ни податоци управувано документи. Овие кругови се базираат во однос position-- тие се основа како функција на податоците. 

Значи за прв круг, Д3 става круг. И тогаш Д3 бара од нас, што прават сакате изложбата да биде. А ние само се каже, без разлика на податоци. Направете експозиција 10. 

Потоа го прашува, што сакаш на Изложбата ќе биде за вториот круг. И ние се одговори, 45. И ние, се разбира, може да направи некои пресметка тука. Сметам дека тие кругови се вид на squished до. 

Значи тоа се размножуваат со 3, помножи податоци од страна на 3. Нашите круг само што влегов прошири надвор. Нашите вредност е трипати. 

Кругот е навистина на работ, па ајде можеби вид на тоа офсет. Да речеме, од 20. Овде и да одите. 

Ова е визуелизација на податоците. Тоа е многу основни, но овој ни дава увид во нашите податоци. Тоа ни кажува дека, на пример, ние имаат малку кластер на елементи. И ние имаме голем поодалечена тука. Ова ни дава некои информации за дистрибуција. 

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

Па се разбира, сите овие елементи, сите овие атрибути тука, можеме да го користиме во функција, а не само со броеви, а не само на x и y позиции. Значи, можеме да го користиме функција за боја. Затоа ние ќе го стори истото. Ние ќе го даде функција. 

И да речеме, ние би можеле да имаат conditionals во нашата функција. Оваа функција може да биде стотици линии долго. Што може да направи многу, многу комплицирани работи. 

Значи, да се стави ако изјавата тука. Да речеме, ако нашите податоци е помалку од 50, тоа е некое преодно дека ние сме заинтересирани во некоја причина. Да се ​​направи тоа зелени. Инаку, ајде да се направи тоа во црвено. Како е тоа? Ница. 

Значи, нашата визуелизација на податоците почнува да пренесе повеќе интересни информации на многу канали. Така, сега знаете малку за дистрибуција. И знаеме дека има некој вид на отсечени во 50, дека ние сме заинтересирани. Знаеме дека постојат две поени под прагот, а повеќето од нив погоре. 

Значи, како последен чекор, овие податоци тука, тоа е многу ретко да се види ова како тоа. Значи, ајде да го исели на променлива затоа што тоа е почиста, вака. И потоа ние ги користиме таа променлива тука. Тоа е иста работа. Тоа е само малку почист. 

Потоа, акт III, Scales-- Значи еден проблем во право тука е, ако ги менуваме нашите Податоците во оваа 200 value-- ако го смените 400 или нешто и освежи, тогаш оваа вредност само отиде offscreen. Значи, нашата логика, токму тука за тоа како тоа го правиме на времето 3 и 20, да го шират и потоа надомести тоа малку е навистина clunky. 

Што прават тие бројки значат? Тие се само хард кодирани таму. И тие се многу врзани за податоци. Сакаме податоци управувано документ. Ние сакаме многу флексибилен документ, дека со оглед на податоците, се прилагодува на него и тој претставува. 

Она што е потребно е во основа, ние имаат оваа спектар на броеви 10. 45, 105. И ние сакаме да го мапираат дека излез ширина, по целата ширина тука. Значи имаме на опсегот на броеви и оди од 0 до 100. И ние имаме овој кампус Јас оди 20-700, во овој случај. 

Ние вид на сакаат да планирам што натаму. Ние сакаме да скала дека и тогаш тоа се надомести малку. Излегува дека Д3 има овие. Таа се вика скала. Значи, да го користам. 

Начинот на кој 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, ние ќе добиете црвена боја. И ако можеме да го давате нешто помеѓу, тоа се случува да биде некој микс на тоа, некаде на градиент помеѓу зелена и црвена боја. 

И наместо да има овој вид на clunky логика имаме тука со условно право, таму, би можеле да имаат something-- на линеарна скала помеѓу нив. Значи, ние би го користите на скалата ние само создаден, кој се нарекува боја. А ние би го D, кој е нашите податоци елемент. И таму ќе одиме. Имаме боја скала. 

Значи ова е мапирање. Значи многу лево е сосема зелени. Екстремната десница е целосно црвено. И што ќе се памети е функција на d. Имаме интересна визуализации тука. Но нашите податоци беше вид на здодевни. Ајде да видиме што можеме да направиме ако имавме повеќе интересни податоци. 

ЧИН IV, кои работат со Data-- првото нешто ние треба да направите за да ја направиме нашата визуелизација поинтересна е да се преселат на податоци на друго место. Тоа е многу clunky да имаат податоците хард кодирани тука. И, генерално, ќе се прашуваат некој друг за податоци. Ќе се можеби бара од Владата, на Бирото за попис, што е вашите податоци а потоа заговор дека или се бара некои трети лице за некои податоци а потоа градење на визуелизација на тоа. 

Така првото нешто што сакате да направите, е тоа да се преселат на друго место. Па јас одам да се создаде поднесе тука наречен data.json. JSON е форматот на податоците. Вие не треба да се знае многу за тоа. И ние ќе треба да го копирате малку податоци имаме таму, ставете го во таму дословно, одете назад кон нашите визуелизација код тука, и ја користите оваа функција, токму тука. Вие не треба да ги знаат сите детали. Но, она што ова ќе го направите е, ќе најдете дека датотека, го земе, и вратете го на нас. Па што тоа не е, тоа оди и да добијат data.json датотека. И тогаш сите кодот што е вовлечен inside-- суштина, сите кодот што треба there-- ќе работи само кога ќе го добиете податоци назад. И тогаш тоа се случува да се кандидира дека код со податоците што ги имаме. Голема, ние имаме визуелизација дека пребарувања за некои кодот некаде друго, што е обично каде што некои податоци од пребарувања некаде на друго место, што е обично како визуализации работа. 

Но, јас сакам да се вратам на податоците. Па податоците фундаментално во D3-- Д3 троши податоци тоа е листа на работи. Д3 очекува податоци само да биде листа работи, низа на работи. Тоа не е важно она што тие нешта се, се додека тоа е низа од нив. 

Па еве, на пример, би можеле на Се разбира дека со подвижна запирка вредности. Ние би можеле да имаат негативни. Д3 не се грижи, толку долго како што е списокот на работите. 

Како интересни работи што би можеле да имаат, ние би можеле, исто така, имаат листа на жици како што. Значи овие се Кримсон наслови Јас зедов пред неколку дена. А можеби можете да најдете некои интересни работи во врска со овие наслови. 

Значи, повторно, ова е листа на нештата. Д3 не се грижи. Овие се случи да биде стринг. Ние ги промени нашите податоци. 

Да се ​​вратиме на нашите визуелизација. Сега, нашите визуелизација очекува влезот да биде броеви. Значи ние се случува да имаат да се направат неколку промени. Така на пример, прв од сите, можеби ние сакаме да се стави овие кругови заедно од должината на наслов, бројот на карактери во насловот. 

Значи она што ние ќе направиме is-- секој пат кога нашите функција се нарекува со еден конец, ние ќе најдете тоа е должина и потоа го положат дека на скалата. Бојата, јас ќе се врати дека за челик сина боја. И таму ќе одиме. Имаме визуелизација на Crimson наслови. 

Нашите скала е малку надвор. Ајде да се претпостави дека најдолгиот Насловот е долг 100 карактери, така span дека од малку. И ние имаме визуелизација. Така, се чини дека повеќето наслови се прилично блиску, во однос на ликот на линија. Но, еден навистина се издвојува. 

Ние би можеле да се изгради некои алатки за да истражуваат што повеќе. Но, кога се работи за тоа, јас бев интересира дали, во оваа група на податоци, наслови со дебелото црево во нив ќе биде подолг. Се претпоставува дека би. 

Па ајде да дознаете. Ајде да го користите боја канал како што правевме досега, да се кодираат некои за тоа дали има дебелото црево или не. Значи ние ќе користат условна повторно. Вие не треба да знаете деталите на ова, Но, ова е како да се провери стринг за одреден карактер во JavaScript, повторно, не е важно. 

Но, ако ние не се најде дебелото црево, ние ќе се врати зелена. И ако тоа го правиме, ние ќе се врати во црвено. Значи, повторно, наслови кои имаат дебелото црево ќе биде црвено. Тоа е она што ова means-- убаво. 

Така ми се чини дека мојот хипотеза се bumped. Има само две. Имаме само шест поени на податоци а само две имаа две точки. Но, се чини малку повеќе на долниот крај, всушност. Определување со запирки изгледа генерално да биде пократок, барем во нашите податоци set-- интересно. 

Да се ​​вратиме тоа да челик сина и потоа да видиме она што може да се направи дури и со повеќе интересни податоци. Значи, повторно, јас спомнав дека податоци во Д3 е листа на работи. Видовме број на многу видови. Видовме жици. Но, она што, исто така, можат да бидат предмет. 

Тие можат да бидат комплицирани работи кои вклучуваат многу работи. Да се ​​каже дека повеќе од јасно, во повеќето случаи, сакате да се изгради секоја точка со податоци како покомплициран отколку само една вредност. Ако сакате да се замисли база на податоци за учениците, може да има еден студент име, студентски проект, и многу работи поврзани со посебен рекорд, не само низа или број. Значи, ајде да ги разгледаме во тоа. 

Ова е една од тие податоци. Ова е група на податоци за земјотресите. Значи се што тука на нашата листа или низа на работите содржи многу нешта себе. Така што секој податок има големината и координација. И се координира содржи две работи. 

Така што секој ден е сега многу повеќе комплициран и многу поинтересна и содржи многу повеќе интересни информации. Ајде да видиме што може да се изгради од тоа. Враќање кон овде, повторно, со користење нашите хистограм круг визуелизација ние сме изградени, ајде да видиме дали можеме да се изгради визуелизација на дистрибуција големина во нашата група на податоци. 

Па еве, тоа е истиот концепт. Но сега, г содржи повеќе работи. г содржи многу елементи на податоците. Значи ние се г назад. Д3 ни дава г. И ние ќе одговориме со наоѓање на големината на г а потоа поминува тоа да скала. 

И тогаш ние треба да се промени нашата скала, се разбира. Значи величини едноставно не одат многу повеќе од 10. Всушност, таму никогаш не било земјотрес од 10 степени. Но, тоа е вид на нашите горниот крајот, нашата горниот спектар. 

Ајде да се одмориме. Ница, имаме визуелизација. Интересно е да се note-- така постојат два поени на податоци кои се речиси точно на врвот на секоја други, во смисла на големина. Гледаш ова од страна на непроѕирноста ние сме со користење. 

Имаме географски податоци сега. Имаме ширини и должина. Можеби би можеле да се направи нешто многу поинтересна со тоа. Ајде да се најдат некои повеќе Интересен начин да се визуелизира ова покомплицирано Податоците што ги имаме пристап до. 

Акт V, Mapping-- основа, ние сакаме да се стават овие на мапа. Мислам, ова е местото каде што тоа се случува. Ние сакаме да се кодираат информации за позицијата на овие земјотрес читања, како и нивната големина, бидејќи имаме тоа сега. Се разбере како да се консумираат покомплицирано податоци. 

Првото нешто што ние ќе го направиме е направи мапа, во позадина на сајтот. Одам да поминат низ тоа многу брзо. Ова е незгодно код. Тоа е уште едно од оние рецепти навистина не Мора да се разбере целосно за вас да го користите. Но, ова е кодот. Овој код токму тука создава мапа. 

Ние нема да одиме во детали. Но, површно, она што го прави тоа е, тоа пребарувања овој us.json датотека, која е датотека на податоци како оној што го имале од порано. Тоа е посложена, се разбира. Но, во овој случај, сè, секој податок е оваа држава и има листа на ширини и должина кои го дефинираат полигон, таа форма, таа држава. 

Значи она што Д3 ќе го направите е слична на она што беше порано. Тоа ќе побара и кои се врзуваат на елемент. И таму е функција која ќе сајтот елементот надвор, врз основа на географска ширина и должина. Можете да прочитате повеќе за тоа. И јас го препорачувам. 

Постојат линкови на крајот на овој код испратени. И кодот е коментираше. Во постојат врски за понатамошна за ова. Јас Ви препорачуваме да го погледнете. Но, она што се грижат за се оваа проекција функција. Сакам да одам преку тоа. 

Прво на сите, дозволете ми да покаже што дека, да, ние имаме карта. Мапите се излади. Значи, да се погледне на овој производство функција. 

Проекција е многу како скала, Вага повторно. Значи она што се производство за оваа проекција функција не е, ние би можеле да го помине Лонгитуда latitudes-- и во овој случај, овие вредности тука се лат-копнее на објектот Седиме во право now-- проекцијата. И проекција ќе се претвори дека во x и y пиксел вредности. 

Значи она што го прави проекција е многу слична на нашата скала. Тоа е преземање нашите географски широчини и должина, што претставува целиот свет и намалување на големината и дека одредување на плоштадот што го сакаме, дека ние сме ја дал. Во овој случај, ние сме донесување на овие вредности. И тоа е давање на нас, и тоа на вашиот екран значи 640 пиксели. Целиот овој екран е 700 пиксели широк, така што нè прави за тука, и 154 пиксели надолу, што би проценка е доста тука. 

Па земајќи оние лат-копнее, која претставува нешто за целиот свет и squishing и подвижни дека околу за нас x и y пиксели вредности даде, ова е првото нешто што е направи во оваа мапирање код. И тогаш остатокот на кодот троши на податоци а потоа мапи оние лат-копнее кон нешто на вашиот екран. 

Но, ние ќе го користат оваа проекција функции, затоа што се покажува имаме лат-копнее копнее, како и. Гледајќи назад на нашите податоци, имаме ширини и должина за секој набљудување. Значи, ајде да го користат проекција. 

Значи гледа во нашите експозиција, ние сакаме нашите exposition-- имаме географска ширина и должина. Но, ние сакаме пиксел вредности. И излегува, имаме точно она што want-- проекција. Многу како бевме користејќи скала токму тука, ние сме сега ќе се користи проекција и да го координира. Така првото нешто ние сме doing-- па ние сме добивање d, кој е индивидуално податоци елемент на индивидуален земјотрес читање. Првото нешто што го правиме е да се добие координатите. Добро, имаме координати. 

Втората работа што ја правиме е мине на проекцијата. Проекција конвертира овие координати во pixel вредности, x и y. И тогаш последното нешто што ние сакате да направите е само да се добие x, што овој случај е првиот. Тоа е првата од двете нешта кои се вратија од проекција. 

Ние ќе го стори истото за y. Но, наместо тоа, ќе се врати вториот елемент, на y. Подгответе се да се одмориме. Ooh, екстра карактер here-- убаво, имаме податоци управувано документ кој е прикривањето на тоа JSON датотека на предмети, правење на мапа, и менување на атрибут во однос на податоци да го проектираат на мапа. Ова е навистина интересно. Тоа е кул. 

Ајде да се земе до еден степен. Мислам, имаме две парчиња информации со секој податок. Мислам, три. Имаме координати, кој е x и y. И ние имаме големина. 

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

Да направиме радиус. Мислам дека радиус е најстариот интуитивен. Значи, повторно, ние ќе го замени тоа хард-кодирани 40 и да прават пресметки. Ние ќе ги користат нашите омилени скала повторно. И ние сме минатото г. Но, не D, бидејќи ние сакаме големината на d. d е само на податоците точка. Ќе помине на големината на скалата. 

Ајде да се обидеме тоа повторно. Ooh, тоа не функционира. Зошто не функционира тоа? 

Значи се сеќавам она што скала го прави тоа. Да ги погледнеме на скала повторно. Скалата карти од 1 до 10 на до 22 до 600, повеќе или помалку. 600 е огромна. Ова е причината зошто ние сме добивање ова. 

Значи, сакаме да ги промениме нашите скала до нешто повеќе разумни. Да речеме, ние сакаме 0 до 60. 60 е голема, но 10 земјотреси се неверојатно ретки. Всушност, тие никогаш не сум се случило. 

Па што ова ќе направите, е, тоа ќе потрае нашите степени кој оди од 1 до 10 и го сајтот за да ја прошири надвор. И го сајтот на 0 за 60 години. Ајде да се одмориме. 

Ница, имаме визуелизација. Ова е одлично. Ова е вистински податоци. Ќе забележите, во мојата мала играчка На пример, најголемиот земјотрес е правото на врвот на нас. Но, тоа е тоа. Имаме датум управувано визуелизација кој троши на податоци и ни дава навистина интересни информации. Да, да додадете некои интерактивност за тоа. Јас спомнав дека беше силна сила на Д3. 

Па еве, за секој елемент, ние сме опишувајќи еден куп на атрибути. Но, ние, исто така, може да се опише она што сакаме да се случи со интерактивноста елементи. На пример, ние може да се опише Што се случува кога глушецот над. И многу сличен тоа, дека ќе преземе функција, многу сличен на атрибути имавме порано, каде што можеме да се направи нешто на елемент кога ќе лебдат над неа. 

Значи, прво нешто што треба да направите е да изберете кој елемент, за да го најдете во основа, во прелистувачот. и потоа ќе можеме да ги атрибут на него. Значи она што го правам тука е, кога лебдиш за нешто, ние ќе добиете тој елемент а потоа во собата својата непроѕирност назад на 1, за да се матна. Ајде да видиме што изгледа тоа. 

Се чини дека имаме дополнителни запирка тука. Значи, ако ние лебдат над тука, таа добива целосна. Но, сега, се разбира, останува целосно, затоа што ние треба да се опише она што се случува кога се отстрани нашите курсорот. Значи, да го прават токму тоа на mouseout, за разлика од Посочете. 

И ние ќе го ресетираат она што го имавме before-- 0.5. И сега, секој пат кога ние лебдиш, да добиеме полн круг. Тоа ни помага да видиме што можеме ние сме изборот суштина. 

И сега ајде да се направи ова е навистина голема. Ајде да се поврзете на оваа реални податоци. Значи, да побара можев USGS за нивните податоци. Значи САД за геолошко истражување има податоци за земјотресите. Тие имаат јавни API, што е во можност да се конзумира во JSON формат. Значи, да го направите тоа. 

Значи ова е малку на код кој се поврзува со USGS API. И таму е малку на обработка на неа. Тоа не е важно, но тоа се поедноставува со едноставен формат на податоци, како онаа имавме порано. Па јас се ослободи од нашиот повик да нашите лажни data.json на датотеката. И наместо тоа, јас го повикувам на USGS суштина. 

Ајде да се освежи, ис убаво. Ова е вистински, реални податоци од оваа недела за земјотреси. Ова е навистина интересно. Ова не е изненадувачки за нас, но има многу земјотреси на Западниот брег, во Калифорнија. Но, јас мислев дека тоа е многу интересно дека имало толку многу земјотреси во Аљаска, и очигледно, тука во Среден Запад. Мислам, интересни, но и ние сме добри. Тоа е заклучокот. 

Но, во основа, овој Д3 е она што ни помага да се направи. Тоа ни помага да ги преземат податоците, услови да елементи во ДОМ, и имаат оние елементи промени како функција на податоци, имаат оние атрибути, сите многу атрибути на елементите, сите биде корисно за канали да пренесе информации. 

Д3 е неверојатно моќна библиотека и неверојатно добро работи. Ова е дел моќно. Визуелизација на податоци е неверојатно моќна алатка за пренесување на луѓето длабоко увиди дека добива на нивните основни и им помага да се разбере, во Оваа длабока и интуитивен начин, како на податоци работи и како податоци промени нашиот живот.