[Музике може чути] 

ДАВИД Цхоуинард: Ја сам Давид Цхоуинард, а ово је Д3. Велцоме. Идемо да се упознају Д3 данас. Д3 је Јава-скрипта оквир за изградњу висок квалитет интерактивне визуелизације за веб. Ствари као што смо види иза мене, ћемо научити да оне ствари, нека врста основе њега. Али то ће бити кул. Хајде да почнемо чинећи лепе слике. Имамо још демос перспективе расположивих. Хајде да то урадимо. 

Акт И, ДОМ манипулатион-- идемо да почне одмах прављење цоол ствари. Пре свега, на левој, имамо код. Са десне стране, имамо резултат нашег кода. Идемо кроз њу. 

Хајде да направимо круг. Како то звучи? свг.аппенд цирцле-- управо смо направили круг. Не верујете ми, зар не? Није ту. 

Па шта смо урадили овде је, СВГ је Сцалабле Вецтор Грапхицс. Ово је начин на који ми реци бровсеру да да векторску графику у претраживачу. Оно што смо управо урадили сада додаје круг за прегледање. 

Обећање је да круга захтјева мало основних атрибута пре него што заправо могу да га виде. Морамо да га испричати своју позицију к, њен лет положај, њен полупречник. Нисмо га рекла било шта од тога, тако да не видим га одмах. Али хајде да то кажем ствари. 

Пре свега, имаш дајући нашег круга име. Па хајде да га зову круг. Наш круг сада има име. И хајде да му дати пар атрибуте. Како би било Цк би Центар Кс, тако центар к положаја. Рецимо, 200 за 200 пиксела. 

Хајде да му дати и од 200 пиксела, као. И Р, радијус, од око 40 пиксела. Сад да видимо. Ја не могу да изговорим. 

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

Тако да нема потребе да се заједно пратити. Сви ови примери, сви из Код радим данас ће бити обезбеђена онлајн на крају у облику интерактивних примера са контролним пунктовима на сваки чин, и тако даље. 

Хајде да урадимо више ствари. Овај црни круг је заиста ружно. Жао ми је због тог грешке Поруке управо тамо. Ево га. 

Хајде да му дати боју. Како то? Волим да челика плаве. Па, наша круг променио боју. То је супер. Нека буде полу-транспарентан најбоље урадио-- полу-транспарентан. 

Дакле, то су атрибути ми дефинисања на кругу. Прва ствар коју смо урадили је ставимо круг на страници. А онда смо дефинисања гомила атрибута. Неки од њих су обавезна, као ЦКС, ЦИ, и Радиус. И други су опциони. 

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

Па хајде да још кругове. Како то? Хајде да још један круг. Ово је узбудљиво, зар не? 

Тако да сам само цопи-пасте методом оно што смо већ имали. Назовимо то цирцле2. И хајде да урадимо тачан Иста ствар и дати га атрибути, с обзиром к положај 300. Ура, имамо два круга сада. 

И наравно, могли бисмо упдате ове вредности. Ја бих да га ставим на 400, а сада се креће. А пошто је то нервира, хајде уклоните га, тако цирцле2.ремове. Сад је нестао. 

Па шта радимо и је само веома, вери-- ово је веома слична ономе што могли да ураде у јКуери, на пример. Ми само манипулишу ДОМ, то се зове. Можда сте већ чули ту реч. Ми стварамо ствари, постављање атрибути на ствари, уклањање ствари. 

Сада, ево где постаје интересантно. Тако је касније у коду, ми и даље могли односе на оригинални круг овде. Па хајде да ресетује свој атрибут ЦКС. Рецимо, његов положај х до 400. И ја ћу да транзицију да, тако је то очигледно. Ево га. 

Тако да смо додао круг. Поставили смо неке атрибуте. Додали смо још један круг, уклоњен је. А онда смо допунама оригинални круг. 

Али ево где постаје много интересантније. Не само да смо поставили атрибуте као само вредности, можемо рећи, хеј, круг, идите на локација 200. Ми можете поставити као функција. 

Дакле, уместо да 400 овде, можемо направити неку калкулацију у лету за шта смо Желим да атрибут да буде. Дакле, ово је како би изразити да. Кажемо, уместо 400, пусти ме да вам да функцију уместо. И овде, у овој функцији, можемо направити било какву луду обрачун. 

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

Па шта да каже је, за сваких к, покрените ову функцију. А шта ми радимо је израчунавање неке ствари, а случајни пута ширина и враћање да. Тако сваки пут кад покренете да, добијамо круг који иде на случајном месту. То је кул. Осећам се као да би могло да изгледа у ово мало. Почињемо да се до нешто занимљиво овде. Хајде да ове податке возио сада. Нема података овде. Хајде да променимо. 

Акт ИИ, подаци Дривен Доцументс-- Па хајде да се врати у ту. И хајде да се отарасим цирцле2, јер ми смо се само додавање и уклањање она. Дакле, ми у ствари не треба. Морамо бити много паметнији овде. Рецимо, имамо неки подаци о некој врсти. Један тренутак-- рецимо, имали смо податке о овом облику. Имали смо низ, само гомила бројева. Имамо седам бројева овде, шта год они репресент-- износ у банковни рачун људи, колико много су тешки, бог зна шта. 

То су бројеви, и ми Желим да користе наше кругове да представља те бројеве некако. Желимо да везали за кругови у тих бројева. Па шта радимо. Рецимо, желимо круг за сваки број. Можемо ми стари ствар коју су доинг-- круг Аппенд и цирцле2 и цирцле3. Али ово измакне контроли, и има доста понављања логику. 

Па хајде да паметнији са тим. Уместо коришћења вар круг свг.аппенд да смо управо су користили, идемо за коришћење овај мали блок овде. Не желим да идем у дубини у шта сви ови делови уради. И то је нека врста напредне теме. И ја бих да могу. 

Али кључна ствар да рецогнизе-- и видећете је веома често у Д3 код. Овај блок текста Басиц ствара што више кругове јер постоје елементи података у овом низу управо овде. Дакле, ово ствара чак кругови као постоје елементи. То ће нам створити седам кругова. А то чини заиста, заиста кључну ствар. Па хајде да то. Хајде да уклоните наш други круг. Хајде да коментарише ово растати се и покрените ово поново. 

Ево га. Тако је наш круг овде је Много тамније, јер смо ми има седам кругова, један на врху другог. Управо смо створили седам кругова, један свака за сваки од ових елемената података. Али постоји кључна ствар која се десила са овим фрагмент управо овде. 

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

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

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

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

Тако смо само питам Д3, финд ме Први круг можете наћи. Шта је њени подаци? 10, то је заиста ОУР Први елемент података. Могли би га питати, хеј, Д3, Пронађите нас наш трећи круг. 105. Зашто је ово стварно важно? 

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

Дакле, ово к поститион-- уместо од само кажем, све кругове, гет к 200 став, ми могао му дати функцију. И овде, можемо да направимо неки обрачун. и д овде стоји у месту за подацима. Тако да сваки пут имамо круг, у основи, Д3 ће створити ових седам кругова. А онда за сваки 

круг, то ће ићи, хеј, цирцле1 која је твоја позиција к. Раније смо били Увек одговарања 200. Али сада, сваки пут Д3 пита нам шта је твоја позиција к, то ће дати нас-- имамо да круг, тако да имамо податке. То ће нам дати податке и кажу, шта хоћеш изложба буде, на основу тих података. 

Хајде да се врате стварне податке. Дакле, ако налетимо ово, ово даје ус подаци дривен докумената. Ови кругови су засновани у релацији поситион-- они су базе као функцији података. 

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

Онда је пита, шта хоћеш изложеност бити за другом кругу. А ми одговорите, 45. А ми, наравно, може направи овде неки прорачун. Сматрам да тим круговима су некако скуисхед се. 

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

Круг је заиста на ивици, па хајде да можда некако оффсет. Рецимо, за 20. Изволи. 

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

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

Дакле наравно, сви ови елементи, сви ови атрибути овде, можемо користити функцију, не само бројеви, не само кии позиције. Тако можемо користити функцију за боју. Дакле, ми ћемо учинити исто. Ми ћемо му дати функцију. 

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

Зато, хајде да стави ако изјаву овде. Рецимо, ако наши подаци мање од 50 година, то је неки праг да смо заинтересовани у из неког разлога. Нека буде зелено. У супротном, хајде да га црвено. Како то? Лепо. 

Тако је наш визуелизације података почиње да пренесемо више интересантне информације на многим каналима. Тако да сада знамо мало о дистрибуцији. А ми знамо да постоји нека врста одсечени на 50 да смо заинтересовани за. Знамо да постоје две тачке података испод тог прага и већина њих изнад. 

Дакле, као последњи корак, ови подаци овде, то је врло ретко да се види ово тако. Па хајде да га иселе у променљивој јер је то чистији, овако. И онда користимо тај променљиву овде. То је иста ствар. То је само мало чистији. 

Следеће, Ацт ИИИ, Сцалес-- Дакле у праву један проблем Овде је, ако не промијенимо Подаци у овом 200 валуе-- ако га променити 400 или нешто и освежи, онда ова вредност само отишао оффсцреен. Тако наша логика овде како ми радимо су времена 3 и 20, да га шири и онда оффсет томе мало је стварно незгодан. 

Како то ти бројеви значе? Они само тешко тамо кодирани. И они веома везан за подацима. Желимо документ са подацима дривен. Желимо веома флексибилан документ, да датих података, прилагођава њега и представља га. 

Оно што у основи треба је, ми има ту низ бројева 10. 45, 105. И ми желимо да карту да се на ширина, пуне ширине овде. Тако имамо низ Бројеви иду од 0 до 100. И имамо ово кампус сам иде од 20 до 700, у овом случају. 

Ми некако желите мапирање да на. Желимо да смањи да се и онда га оффсет мало. Испоставило се да има Д3 ово. То се зове скала. Па хајде да га користе. 

Начин на који воркс-- ћу укуцајте овако и онда то објаснити. Ово је скала. Оно што ће учинити је, то ће мапирати Вредности од 1 до 200 на 20 до 600. Можемо да проверимо. Видимо да овде. 

Дакле, ако сам га храним 1-- тренутак. Дај ми секунду. Мора да сам је погрешна. Ето. Жао ми је због тога. 

Па шта ће учинити скала је, да ће требати вредност а затим претворити то, проширити то из, тако да испуњава комплетан асортиман Тражиш. Дакле, у овом случају, ако га један дати, то ће карту да се на 20. И ако му дати 200, то је ће карта која на 600. И негде између, ако добијемо 100, то је Биће негде између 20 и 600. 

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

-Па О, имамо овде мало грешку. Недостаје нам података. Ето. И то је шири се. 

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

И можемо да урадимо много више интересантне ствари као. Тако уместо да линеаму скала, могли бисмо да се улогујете скалу. А то ће нам дати дневник скале. 

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

Занимљиво је да се вага Веома, веома софистициран као добро. Они раде доста занимљивих ствари. Дакле ваге немају обавезно да раде само са бројевима. Хајде да направимо скалу боја. 

Дакле наш асортиман могла бити-- наша домен је 1 до 200. То је улаз ствар. Али ми би да карта од зелене до црвене, на пример. А сада, ако га прође 1, ћемо добити зелено. Ако смо му дати 200, добићемо црвено. И ако му прође нешто између, то ће бити неки микс који, негде на градиент између зелене и црвене. 

И уместо да ова врста незгодан логике имамо овде са условна тамо, могли би да имамо нешто-- линеарна скала између оних. Тако бисмо користили скалу смо управо створено, коју смо назвали боју. А ми би дао то д, која је наша елемент података. И ево га. Имамо скалу боја. 

Дакле, ово је мапирање. Тако сада оставио је потпуно зелена. Крајње десно је потпуно црвен. И све између је функција д. Имамо занимљив визуализације овде. Али наши подаци је некако досадно. Хајде да видимо шта можемо да урадимо ако имали смо више занимљивих података. 

Закон ИВ, Рад са Дата-- прва ствар ћемо желети да уради да би наш визуелизација интересантније је да премести податке негде другде. Врло је незгодан имати подаци фиксирана овде. И генерално, бићемо пита неко други за податке. Ми ћемо се можда питате владу, Пописне, која је твоја подаци а затим цртања да или пита неки ентитет треће стране за неким подацима а затим изградњи визуелизација на то. 

Дакле, прва ствар желимо да урадимо је потез који би негде другде. Зато ћу да створи филе овде називом дата.јсон. ЈСОН је формат података. Не морате да знате много о томе. И ми ћемо да се копира мало података имамо ту, налепите је тамо дословно, иди назад на наш код визуелизације овде, а користите ову функцију овде. Не морате да знате детаље. Али шта то ће урадити је, она ће наћи тај фајл, нека га узме, и врати нам је. Па шта ово ради је, иде и добити дата.јсон датотеку. А онда све то је код увучен инсиде-- суштини, све код имамо тамо-- ће раде само када смо добили податке натраг. А онда ће то покренути да Код са подацима које ми имамо. Велики, имамо визуелизација да упита за неке код негде друго, која је обично где је упита неке податке из негде другде, која је обично како визуелизације раде. 

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

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

Као интересантне ствари ми могли имати, ми такође могли имају листу низова тако. Дакле, то су Цримсон наслови Узео сам пре неколико дана. И можда можете наћи неке занимљиве ствари о овим насловима а. 

Дакле опет, ово је списак ствари. Д3 не мари. То се деси да буде ниска. Променили смо наше податке. 

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

Па шта ћемо урадити је-- сваки пут наше Функција се назива низом, наћи ћемо је дужина И онда прође да би скали. Боја, ја ћу се вратити да да челика плаве. И ево га. Имамо визуализацију од Цримсон наслови. 

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

Могли бисмо да изградимо неке алате да истражи да више. Али, када сам радио на овоме, био сам радознала да ли, у овом скупу података, наслови са дебелом цреву у њима би бити дужа. Ја претпоставља да би. 

Па хајде да сазнамо. Хајде да користити боју Канал као што смо раније радили, за кодирање неки о томе да ли постоји дебелог црева или не. Тако ћемо користити поново условно. Не морате да знате Детаљи овог, али тако смо провјерити стринг за одређену карактера у ЈаваСцрипт, опет, није битно. 

Али ако не нађемо дебелог црева, ми ћемо вратити зелено. А ако ми радимо, ми ћемо вратити црвено. Дакле опет, наслове који су дебело црево ће бити црвено. То је оно што ова меанс-- лепо. 

Тако се чини да мој хипотеза је налетео. Само два Има. Ми само имамо шест бодова података и само два имала двотачке. Али то је за нијансу на доњем крају, у ствари. Наслови са колонама изгледати да генерално бити краћи, барем у нашим подацима договорен-- занимљиво. 

Вратимо који се челик плаво и онда видјети шта можемо учинити са још више интересантних података. Дакле опет, ја поменуо да Подаци у Д3 је списак ствари. Видели смо бројеве многих типова. Видели смо конце. Али ствари могу бити и објекти. 

Они могу бити компликоване ствари да укључују много ствари. Рећи да јасније, у већини случајева, ми Желим да изгради сваку тачку података као компликованије него само једним вредности. Ако би замислите база података о ученицима, можда постоји студент наме, студентска картица, и многе ствари у вези са посебним записник, не само низ или број. Па хајде да погледамо то. 

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

Дакле сваки дан је сада много више компликован и много интересантније и садржи много више занимљив податак. Да видимо можемо да градимо од тога. Врацам се на овде, опет, користећи наш хистограм круг визуализација направили смо, хајде да видимо да ли можемо да изградимо визуелизација магнитуде дистрибуције у нашем скупу података. 

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

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

Хајде да освежите. Лепо, имамо визуелизацију. Занимљиво је тако ноте-- постоје две тачке података које готово су на врху сваке други, у смислу величине. Видиш ово је нетранспарентност смо користите. 

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

Закон В, Маппинг-- основи, желимо да стави ово на карти. Мислим, ово је место где ово води. Желимо да кодира информације о положај ових очитавања земљотреса, као и њихова магнитуда, јер имамо то сада. Ми разумемо како да конзумирају компликованије подаци. 

Прва ствар коју ћемо урадити је направити мапу, позадинску карту. Идем да прође кроз ово врло брзо. Ово је лукав код. То је још један од оних рецепти немаш баш морају у потпуности разумеју за вас да користите. Али ово је код. Овај код овде ствара мапу. 

Нећемо да идемо у детаље. Али површно, оно што ради је, она упита ову ус.јсон фајл који је фајл података као један смо раније имали. То је сложенији, наравно. Али у овом случају, све, свака тачка података је ова држава и има списак географским ширинама и географске дужине који дефинишу полигон, да форма, та држава. 

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

Постоје везе на крај овог кода постед. И код прокоментарисао. У постоје линкови за даљи на ово. Препоручујем вам да погледам. Али оно што ми је стало је Ова пројекција функција. Желим да идем кроз то. 

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

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

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

Тако узимајући оне ЛАТ-жуди, што представљају нешто на целој планети и скуисхинг и креће да око да нам Кс и И вредности пикел дају, ово је прва ствар која је учињено у овом коду мапирања. А онда остатак Код троши податке а затим мапс те ЛАТ-жуди на нешто на екрану. 

Али ми ћемо користити ову пројекцију функције, јер да се испоставља имамо ЛАТ-чезне жуди као добро. Осврћући се на нашим подацима, имамо географске ширине и дужине за сваки посматрања. Па хајде да користимо пројекцију. 

Тако гледајући наше излагање, желимо нашу екпоситион-- имамо географску ширину и дужину а. Али ми желимо вредности пиксела. И испоставило се, ми имамо тачно оно што глупане-- пројекцију. Веома налик смо били користећи скалу овде, Сада ћемо користити пројекцију и прође га координате. Дакле, прва ствар смо тако доинг-- смо добијање д, што је појединачни податак елемент индивидуалног земљотреса читање. Прва ствар коју радимо је добити координате. У реду, имамо координате. 

Друга ствар коју радимо је пасс да на пројекцији. Пројекција претвара ове координате у вредности пикел, Кс и И. А онда последња ствар која нам Желим да урадите је да добије к, која је овај случај први. То је први од две ствари да се враћају по пројекцији. 

Ми ћемо учинити исто за и. Али уместо тога, ми ћемо се вратити други елемент, и. Спремите се да освежите. Оох, екстра лик овдје-- лепо, имамо Подаци дривен документ који је прикривање ове ЈСОН фајл објеката, прављење мапе, и мења атрибут у односу на податке да га пројектује на карти. Ово је заиста занимљиво. Ово је кул. 

Хајде да заузимају зарез. Мислим, имамо два комада Подаци са сваке тачке података. Мислим, три. Имамо координате, која је Кс и И. И ми имамо велицину. 

Ми треба да кодира величину некако. Имамо доста канала. Можемо користити боју. Можемо користити радијус. Добро би нам провидност. Добро би нам многе ствари у коду. Било који од ових атрибута и многи још које нису тамо наведене, јер су опциони, можемо користе за кодирање ове податке, ход и све те ствари сам споменуо. 

Хајде да урадимо радијус. Мислим да је радијус Најинтуитивнији. Дакле опет, ми ћемо заменити тако тешко кодирани 40 и направити неке прорачуне. Ми ћемо поново користити наш омиљени скалу. И ми смо прошли д. Али не зато што желимо д величину оф д. д је само тачка података. Ми ћемо проћи магнитуда у размери. 

Хајде да покушам поново. Оох, не ради. Зашто се то не ради? 

Па сети шта скала ради. Погледајмо скали поново. Сцале мапе од 1 до 10 на до 22 до 600, више или мање. 600 је огромна. Због тога добијамо ово. 

Зато желимо да променимо скалу на нешто више разумне. Рецимо, желимо 0 до 60. 60 је велика, али 10 земљотреса су невероватно ретки. У ствари, они никада десило. 

Па шта ће урадити је, требаће наш магнитуда која иде од 1 до 10 и мап га да га проширите. И мап га на 0 до 60. Хајде да освежите. 

Лепо, имамо визуелизацију. Ово је сјајно. Ово је стварни подаци. Приметићете, у мојој малој играчка Пример, највећи земљотрес је право на нас. Али то је то. Имамо датум дривен визуализацију да троши податке и даје нам стварно занимљив податак. Да, додајмо мало интерактивност на то. Споменуо сам да је јака сила Д3. 

Дакле овде, за сваки елемент, ми смо описујући гомилу атрибута. Али ми такође можемо описати шта хоћемо да се деси са интерактивности елементима. На пример, могли бисмо описати шта се дешава када мишем преко. И то веома сличан, да ћу узети неку функцију, веома сличан атрибути смо раније имали, где радимо нешто да елемент док лебде над њим. 

Дакле прва ствар коју морамо да урадите је да изаберете онај елемент, да га пронађу у основи, у претраживачу. а онда бисмо могли поставити атрибут на то. Па шта ја радим овде је, када смо ховер преко нечега, добићемо тај елемент а затим поставите свој опацити назад 1, потпуно непрозиран. Да видимо како то изгледа. 

Изгледа да имамо екстра зарез овде. Дакле, ако смо ховер овде, постаје пуна. Али сада, наравно, то остаје пуна, јер смо ми морају да опише шта се дешава када уклоните нашу курсор. Па хајде да управо то на МоусеОут, за разлику од миша на. 

И ми ћемо их вратили на оно што смо имали пре-- 0,5. И сада, сваки пут ми ховер, добијамо пун круг. Она нам помаже да видимо шта смо ми избора у суштини. 

А сада нека ово стварно супер. Хајде да се повезали ово са стварним подацима. Па хајде да питам могао УСГС о њиховим подацима. Дакле УС Геологицал Сурвеи има податке о земљотресима. Они имају јавну АПИ који је у стању да се конзумира у ЈСОН формату. Па хајде да урадимо то. 

Дакле, ово је део кода који повезује са УСГС АПИ. А ту је мало прераде на њему. Ово није релевантно, али поједностављује га на једноставном формату података, попут оног смо раније имали. Тако сам се ослободимо наше позива на наш лажни дата.јсон у досијеу. И уместо, зовем УСГС суштини. 

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

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

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