[Гуляе музыка] 

DAVID Chouinard: Я David Chouinard, і гэта D3. Сардэчна запрашаем. Мы збіраемся, каб даведацца пра D3 сёння. D3 з'яўляецца асновай JavaScript для стварэння высокай якасці інтэрактыўныя візуалізацыі для вэб-сайтаў. Такія рэчы, як тое, што мы бачачы ў задняй часткі мяне, мы збіраемся навучыцца рабіць тыя, рэчы, накшталт асновах яго. Але гэта будзе выдатна. Давайце пачнем робіць прыгожыя фатаграфіі. У нас ёсць некалькі дэма перспектыў даступныя. Давай зробім гэта. 

Акт I, DOM manipulation-- мы збіраемся пачаць прама цяпер робіць цікавыя рэчы. Перш за ўсё, на левай баку, мы маем код. Справа, у нас ёсць Вынік нашага кода. Давайце праз яго. 

Давайце зробім круг. Як гэта гучыць? svg.append circle-- Мы проста зрабілі круг. Вы мне не верыце, ці не так? Гэта не там. 

Такім чынам, што мы зрабілі тут ёсць, SVG з'яўляецца маштабуецца вектарнай графікі. Гэта, як мы кажам браўзэру, каб зрабіць вектарную графіку ў браўзэры. Тое, што мы толькі што зрабілі зараз дадаецца круг, каб прагледзець. 

Абяцанне, што кола патрабуецца трохі асноўных атрыбутаў перш чым мы зможам рэальна ўбачыць яго. Мы павінны сказаць яму, яго пазіцыю X, яго ў пасаду, радыус. Мы не сказаць яму нічога з гэтага, так што мы не бачым яго цяпер. Але давайце скажам гэта такое. 

Такім чынам, перш за ўсё, у вас ёсць каб даць наш круг імя. Так што давайце называць яго круг. Наша круг мае імя цяпер. І давай некалькі атрыбутаў. Як наконт CX б Цэнтр X, так цэнтр х становішчы. Скажам, 200 на 200 пікселяў. 

Давайце яму ў 200 пікселяў, а таксама. І г, радыус, каля 40 пікселяў. Зараз давайце паглядзім. Я не магу запісаць. 

Там вы ідзяце. У нас ёсць круг у становішчы 200 пікселяў, 200 пікселяў, радыус 40 пікселяў. Выгляд выдатна, ці не так? У нас ёсць круг. Так. 

Так што не трэба прытрымлівацца ўздоўж. Усе гэтыя прыклады, усё Код я раблю сёння будзе прадастаўлена на сайце ў канцы ў выглядзе інтэрактыўных прыкладаў з кантрольна-прапускных пунктаў на кожны акт, і гэтак далей. 

Давайце рабіць больш рэчаў. Гэты чорны круг сапраўды непрыгожа. Я прашу прабачэння за гэтую памылку Паведамленні прама там. Там мы ідзем. 

Давайце дамо яму колер. Як гэта? Мне падабаецца Steel Blue. Ну, наш круг змяніў колер. Выдатна. Давайце зробім яго напаўпразрыстым too-- напаўпразрыстымі. 

Такім чынам, гэтыя атрыбуты мы вызначаем па крузе. Першае, што мы зрабілі, мы пакласці гурток на старонцы. А потым мы вызначаем куча атрыбутаў. Некаторыя з іх з'яўляюцца абавязковымі, як CX, CY, і радыус. А іншыя не з'яўляюцца абавязковымі. 

Ёсць шмат больш атрыбутаў. Там вельмі шмат з іх. Напрыклад, мы маглі б ходу, таксама, ход чырвоным. Але давайце прыбярэм гэта. Мы вярнуліся да акружнасці, сіні круг. 

Так давайце зробім больш колаў. Як гэта? Давайце зробім яшчэ адзін круг. Гэта цікава, ці не так? 

Так бы мовіць, што я проста скапіяваць ўставілі тое, што мы ўжо. Давайце назавем гэта circle2. І давайце зробім дакладны Тое ж самае і даць яму атрыбуты, улічваючы х становішча 300. Ура, у нас ёсць дзве акружнасці цяпер. 

І, вядома, мы маглі б абнавіць гэтыя значэння. Я мог бы паставіць яго на 400, і цяпер ён рухаецца. І так як гэта раздражняе, давайце выдаляць яе, так circle2.remove. Гэта ўжо няма. 

Такім чынам, што мы робім, і гэта проста вельмі, very-- гэта вельмі падобных на тыя, маглі б зрабіць у JQuery, напрыклад. Мы проста маніпуляваць DOM, як гэта называецца. Вы, напэўна, чулі гэтае слова раней. Мы ствараем рэчы, ўстаноўка атрыбуты на рэчы, выдаляючы матэрыял. 

Цяпер, вось, дзе гэта становіцца цікавым. Так пазней у кодзе, мы маглі б яшчэ ставяцца да зыходнай акружнасці тут. Такім чынам, давайце скінуць яго атрыбут сх. Скажам, яго х становішча 400. І я збіраюся перайсці што, дык гэта відавочна. Там мы ідзем. 

Таму мы дадалі ў круг. Мы ўсталёўваем некаторыя атрыбуты. Мы дадалі яшчэ адзін круг, зняў яе. А потым мы змены Арыгінальны круг. 

Але вось дзе ён атрымлівае значна цікавей. Мы не толькі можам ўсталёўваць атрыбуты як толькі значэння, мы можам казаць, эй, круг, перайсці ў становішча 200. Мы таксама можам ўсталяваць іх у якасці функцый. 

Так замест таго, 400 тут, мы можам зрабіць некаторыя разлікі на ляту тое, што мы хачу, каб атрыбут быць. Так што гэта, як вы б выказаць гэта. Мы кажам, што замест таго, каб 400, дазвольце мне даць вам функцыю замест. І тут, унутры гэтай функцыі, мы можам зрабіць любы вар'ят разлік. 

Мы маглі б марнаваць час і шукаць у нейкай іншай рэчы і дынамічна вырашаць Круг, якое значэнне мы хочам. Як наконт таго, каб проста даць гэта выпадковая х пазіцыя? Дык вось, што. 

Ну і што што кажа, для кожныя х, запусціць гэтую функцыю. І тое, што мы робім, разліку некаторыя рэчы, выпадковае раз шырыня і вяртанне гэтага. Такім чынам, кожны раз мы запусцілі, што мы атрымліваем круг, які ідзе ў выпадковым месцы. Гэта крута. Я адчуваю, што я мог глядзець на гэта для няшмат. Мы пачынаем, каб дабрацца да нешта цікавае тут. Давайце зробім гэта кіраваныя дадзенымі цяпер. Там няма ніякіх дадзеных тут. Давайце зменім гэта. 

Акт II, кіраваныя дадзенымі Documents-- Так давайце вернемся сюды. І давайце проста пазбавіцца ад circle2, таму што мы проста даданне і выдаленне гэта. Такім чынам, мы сапраўды не трэба. Мы павінны быць нашмат разумнейшыя тут. Скажам, у нас ёсць некаторыя дадзеныя якога-небудзь роду. Адзін moment-- скажам, мы мелі дадзеныя гэтай формы. У нас было мноства, проста куча лічбаў. У нас ёсць сем лічбаў тут, якімі б яны represent-- колькасць на банкаўскі кошт народа, як колькі яны важаць, бог ведае што. 

Гэта нумары, і мы хочаце выкарыстоўваць наша кола прадстаўляць гэтыя лічбы як-то. Мы хочам, каб звязаць нам кругі на гэтыя нумары. Так, што мы робім. Скажам, мы хочам круг для кожнага нумара. Мы маглі б зрабіць стары што мы былі doing-- Круг дадаваць і circle2 і circle3. Але гэта выходзіць з пад кантролю, і ёсць шмат паўтаральных логікі. 

Такім чынам, давайце больш разумны з гэтым. Замест выкарыстання VaR круг svg.append, што мы проста выкарыстоўвалі, мы збіраемся выкарыстаць гэта невялікі блок тут. Я не хачу ісці ў паглыбленае у тое, што ўсе гэтыя часткі. І гэта свайго роду складаная тэма. І я хацеў бы. 

Але ключавая рэч, каб recognize-- і вы ўбачыце вельмі часта ў D3 кода. Гэты блок тэксту Basic стварае столькі гурткоў як ёсць элементы дадзеных у гэтым масіве прама тут. Так што гэта стварае столькі колах як ёсць элементы. Гэта будзе ствараць нам сем колаў. І гэта робіць вельмі, вельмі ключавую рэч. Так што давайце працаваць гэта. Давайце здымем нашы іншыя круг. Давайце проста каментары толькі расстацца, і запусціць гэта зноў. 

Там мы ідзем. Такім чынам, наш круг тут шмат цямней, таму што мы ёсць сем колаў, адзін па-над іншым. Мы толькі што стварылі сем колаў, адзін кожны для кожнага з гэтых элементаў дадзеных. Але ёсць ключ, што здарылася з гэтага фрагмента прама тут. 

Гэта што дадзеныя звязаныя. Так кожны з гэтыя элементы дадзеных, 10, 45, 105, быў звязаны у прыватнасці акружнасці. Так яны не толькі стварылі куча колаў але звязвае гэтыя дзве рэчы разам. 

І ў будучыні, таму што мы стварылі гэтыя колы з дапамогай гэтай функцыі D3, калі я дам вам круг, вы можаце дайце мне дадзеныя, звязаныя з ім. Так мы можам спытаць D3. Эй, D3, у мяне ёсць гэты круг. Што дадзеныя, якія мае кола? І D3 б распавесці нам 10 або 45 або 105. 

Гэтыя рэчы звязаныя. Гэта вельмі, вельмі фундаментальнае паняцце. Давайце паглядзім на гэта. 

Так як мы б спытаць D3-- так гэта не мае значэння для гэтага, але проста паверце мне на гэта. Гэта, як мы просім D3. Эй, D3, дайце мне спачатку круг, які вы можаце знайсці. Дайце мне першы круг вы можаце знайсці. І тады мы маглі б спытаць D3, што дадзеныя аб тым, што, як гэта, 10. 

Так што мы проста просім D3, знайсці мяне Першы круг вы можаце знайсці. Што яго дадзеныя? 10, якія сапраўды наш Першы элемент дадзеных. Мы маглі б вы яго, эй, D3, знайсці нам наш трэці круг. 105. Чаму гэта вельмі важна? 

Так прама тут, я ўжо згадваў што мы можам выкарыстоўваць функцыі. І я згадваў, што быў вельмі моцная рэч. Так што не толькі можа нашы функцыі рабіць рэчы, як зрабіць некаторыя вылічэнні, напрыклад, вяртаць выпадковае лік, гэта можа таксама зрабіць што-то на аснове дадзеных. Гэта тое, што азначае, кіраваныя дадзенымі дакументы. Вось што D3 варта. 

Так што гэта х postition-- замест проста сказаць, усе колы, атрымаць пазіцыю X 200, мы можа даць яму функцыю. І тут, мы можам зрабіць некаторыя разлікі. і d тут стаіць на месцы для дадзеных. Такім чынам, кожны раз, калі мы Круг, у асноўным, D3 будзе ствараць гэтыя сем колаў. І тады для кожнага 

круг, ён збіраецца ісці, эй, circle1, што ваш X пазіцыя. Раней мы былі заўсёды адказваючы 200. Але цяпер, кожны раз, D3 пытаецца нам, што ваша х пазіцыя, гэта збіраецца даць us-- ў нас ёсць што кола, так што мы маем дадзенымі. Гэта збіраецца даць нам дадзеныя і сказаць, што вы хочаце Экспазіцыя быць, на аснове гэтых дадзеных. 

Давайце проста вярнуць фактычныя дадзеныя. Так што, калі мы запусцім гэта, гэта дае Дадзеныя кампаніі прывадам дакументаў. Гэтыя колы аснове У сувязі position-- яны падстаў, як у залежнасці ад дадзеных. 

Такім чынам, для першага круга, D3 ставіць круг. А потым D3 просіць нас, што рабіць Вы хочаце Экспазіцыя будзе. І мы проста кажам, што б дадзеныя. Зрабіце экспазіцыю 10. 

Тады ён пытаецца, што вы хочаце Экспазіцыя будзе на другі круг. І мы адказваем, 45. І мы, вядома, можа зрабіць некаторыя вылічэнні тут. Я лічу, што тыя колы з'яўляюцца свайго роду сплясканыя да. 

Так памножыць яго на 3, памножыць дадзеныя па 3. Кола нашых толькі што вырас з. Ўтрая Наша каштоўнасць. 

Круг на самай справе на краі, так што давайце, можа быць, свайго роду кампенсаваць гэта. Скажам, на 20. Ну вось. 

Гэта візуалізацыі дадзеных. Гэта вельмі асноўная, але гэта дае нам некаторы ўяўленне аб нашых дадзеных. Гэта кажа нам пра тое, што, напрыклад, мы ёсць трохі кластар элементаў. І ў нас ёсць вялікі выкід тут. Гэта дае нам некаторую інфармацыю аб размеркаванні. 

Калі мы, напрыклад, каб змяніць дадзеныя да 150 тут і абнаўлення, наша візуалізацыя змянілася. Гэты дакумент кіруецца дадзенымі. 

Таму, вядома, усе гэтыя элементы, усе гэтыя атрыбуты тут, мы можам выкарыстоўваць функцыю, ня толькі колькасці, а не толькі х і ў пазіцыі. Такім чынам, мы можам выкарыстоўваць функцыю для колеру. Такім чынам, мы будзем рабіць тое ж самае. Мы дамо яму функцыю. 

І давайце казаць, што мы маглі б ўмоўныя аператары ў нашай функцыі. Гэтая функцыя можа быць сто радкоў даўжынёй. Гэта можна зрабіць вельмі, вельмі складаныя рэчы. 

Так што давайце пакласці, калі заява тут. Скажам, калі нашы дадзеныя менш чым 50, гэта некаторы парог што мы зацікаўлены у па некаторых прычынах. Давайце зробім гэта зялёны. У адваротным выпадку, давайце зробім яго чырвоным. Як гэта? Nice. 

Такім чынам, наша візуалізацыя дадзеных, пачынаючы для забеспячэння больш цікавую інфармацыю на многіх каналах. Такім чынам, зараз мы ведаем трохі аб размеркаванні. І мы ведаем, што ёсць нейкая абразаецца на 50, які нам патрэбен ст. Мы ведаем, што ёсць дзве кропкі дадзеных ніжэй гэтага парога, і большасць з іх вышэй. 

Так як апошні крок, гэтыя дадзеныя тут, гэта вельмі рэдка можна ўбачыць у гэтым родзе. Так што давайце проста перанесьці яго ў зменную таму што гэта чысцей, як гэта. І тады мы выкарыстоўваем гэтую зменную тут. Гэта дакладна такая ж рэч. Гэта проста трохі чысцей. 

Затым, Акт III, 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 пікселяў, і гэта хлюпае ў арэнду, Мы можам яе мець over-- мы можам пашырыць яго, ці мы можа паменшыць гэты левую паласу для то больш або менш 20. Гэтыя лічбы, гэта жорстка Нумары зараз сэнс для нас. 

І мы маглі б зрабіць нашмат больш, цікавыя рэчы. Такім чынам, замест таго, каб мець лінейную маштаб, мы маглі б увайсці маштаб. І гэта дасць нам лагарыфмічнай шкалы. 

Так што цяпер наша шкала, замест таго, проста пашыраць, што дыяпазон, ён робіць больш складаныя рэчы. Замест таго, каб гэты дыяпазон цяжка кадуецца, і замест таго, што 600, мы маглі б проста выкарыстоўваць шырыню, таму з 20 па шырыні мінус 40, 2 разы нацэнка на другім баку. І гэта робіць нашмат больш сэнсу для хто-то, хто мог бы зірнуць на код. 

Цікава, што вагі атрымаць вельмі, вельмі складаны, а таксама. Яны робяць шмат цікавых рэчаў. Так шалі не абавязкова працаваць толькі з лікамі. Давайце зробім каляровую гаму. 

Такім чынам, наш дыяпазон можа be-- наш дамен 1 да 200. Гэта ўваход рэч. Але мы маглі б параўнаць з зялёнага да чырвонага, напрыклад. І зараз, калі мы праходзім яго 1, мы збіраемся, каб атрымаць зялёны. Калі мы дамо яму 200, то мы атрымаем чырвоны колер. І калі мы перадаць яму што-то паміж імі, гэта будзе нейкі мікс, што, дзе-то на градыент паміж зялёным і чырвоным. 

І замест таго, Гэты выгляд нязграбных логікі мы маем тут з ўмоўнае права там, мы маглі б something-- лінейная шкала паміж іх. Такім чынам, мы б выкарыстоўваць шкалу мы проста створаны, якую мы назвалі колер. І мы далі б яна D, які гэта наша стыхія дадзеных. І там мы ідзем. У нас ёсць каляровую гаму. 

Так што гэта адлюстраванне. Так далёка засталося, гэта цалкам зялёным. Правага краю цалкам чырвоным. І ўсё паміж імі з'яўляецца функцыяй D. У нас ёсць цікавае візуалізацыі тут. Але нашы дадзеныя былі сумныя. Давайце паглядзім, што мы можам зрабіць, калі у нас было больш цікавых дадзеных. 

Акт IV, Праца з Data-- перш за ўсё мы хочам зрабіць, каб нашы візуалізацыя больш цікавым , Каб перамясціць дадзеныя ў іншым месцы. Гэта вельмі нязграбным, каб мець дадзеныя жорстка тут. І наогул, мы будзем прасіць хто-то іншы для дадзеных. Мы будзем, магчыма, просяць урад, Бюро перапісу насельніцтва, што вашыя дадзеныя а затым у змове, што ці прасіць некаторы ПА іншых твар для некаторых дадзеных а затым будынак візуалізацыя на што. 

Таму першае, што мы хочам зрабіць, гэта крок, які дзе-то ў іншым месцы. Так што я збіраюся стварыць падаць тут пад назвай data.json. JSON з'яўляецца фармат дадзеных. Вы не павінны шмат ведаць пра гэта. І мы збіраемся, каб скапіяваць мала дадзеных у нас там, устаўце яго ў там даслоўна, перайдзіце Вярнуцца да нашага коду візуалізацыі тут, і выкарыстоўваць гэтую функцыю прама тут. Вы не павінны ведаць дэталі. Але тое, што гэта будзе зрабіць, гэта, ён знойдзе гэты файл, спампаваць яго і вярнуць яго да нас. Дык што ж гэта робіць, ён ідзе і атрымаць файл data.json. А потым усё код, які водступ inside-- па сутнасці, усе код, які мы павінны there-- будзе працаваць толькі, калі мы атрымліваем дадзеныя назад. І тады гэта будзе працаваць, што код з дадзенымі, якія мы маем. Выдатна, у нас ёсць візуалізацыі, запытаў па нейкай код дзе тое, што, як правіла, дзе ён запытвае некаторыя дадзеныя з дзе-то яшчэ, што, як правіла, ў якасці візуалізацыі працаваць. 

Але я хачу вярнуцца да дадзеных. Так што дадзеныя прынцыпова ў D3-- D3 спажывае дадзеныя, якія знаходзяцца спіс рэчаў. D3 чакае, што дадзеныя проста спіс рэчаў, набор рэчаў. Гэта не мае значэння, што тыя рэчы, з'яўляюцца, пры ўмове, што гэта масіў з іх. 

Дык вось, да прыкладу, мы маглі б з курс, значэння з якая плавае кропкай. Мы маглі б негатывы. D3 не хвалюе, так доўга як гэта спіс рэчаў. 

Як цікавыя рэчы, якія мы можа мець, мы маглі б таксама ёсць спіс радкоў, як гэта. Такім чынам, гэтыя загалоўкі Барвовыя Я ўзяў некалькі дзён таму. А можа быць, вы можаце знайсці некаторыя цікавыя усе аб гэтых Праз загалоўкі. 

Такім чынам, яшчэ раз, гэта спіс рэчаў. D3 не хвалюе. Гэта здараецца, радок. Мы змянілі нашы дадзеныя. 

Давайце вернемся да нашай візуалізацыі. Зараз, наша візуалізацыя чакае уваходнага сігналу для нумары. Такім чынам, мы будзем мець зрабіць некалькі змен. Так, напрыклад, у першую чаргу, можа быць, мы хочам пакласці гэтыя кругі па на даўжыню загалоўка, Колькасць знакаў у загалоўку. 

Так што мы будзем рабіць is-- кожны раз, калі нашы Функцыя выклікаецца з радкі, мы знойдзем гэта даўжыня і затым перадаць, што ў маштабе. Колер, я вярнуся што сталёвы сіні. І там мы ідзем. У нас ёсць візуалізацыя малінавых загалоўкі. 

Наша маштаб адкусіў. Давайце выкажам здагадку, што доўгая загаловак даўжынёй 100 сімвалаў, так чысціні Гэта няшмат. І ў нас ёсць візуалізацыі. Так што, падобна, што большасць газет даволі блізка адзін да аднаго, з пункту гледжання характару лініі. Але там сапраўды вылучаецца. 

Мы маглі б пабудаваць некалькі інструментаў даследаваць, што больш. Але, калі я працаваў над гэтым, я быў Цікава ці ёсць у гэтым наборы дадзеных, загалоўкі з тоўстай кішкі у іх будзе больш. Я мяркуе, што яны б. 

Такім чынам, давайце высвятлім. Давайце выкарыстоўваць колер канал, як мы рабілі раней, для кадавання некаторых аб тым, няма тоўстай ці не. Такім чынам, мы будзем выкарыстоўваць ўмоўнае зноў. Вы не павінны ведаць, Дэталі гэтага, але гэта, як мы правяраем Радок для канкрэтнага характару У JavaScript, зноў жа, не мае значэння. 

Але калі мы не знойдзем тоўстай кішкі, мы вернемся зялёны. І калі мы гэта зробім, мы вернемся ў чырвоны колер. Такім чынам, яшчэ раз, загалоўкі, што якія тоўстай кішкі будзе чырвоным. Гэта тое, што гэта азначае: добра. 

Так што, падобна, што мой гіпотэза ўдары. Там толькі два. У нас ёсць толькі шэсць кропак дадзеных і толькі двое двукроп'е. Але, здаецца, трохі больш на ніжнім канцы, на самай справе. Апошнія навіны з двукроп'я, здаецца, у агульным быць карацей, па меншай меры, у нашых дадзеных set-- цікава. 

Давайце вернемся, што сталёвы сіні, а затым убачыць што мы можам зрабіць з яшчэ больш цікавыя дадзеныя. Такім чынам, яшчэ раз, я згадаў, што Дадзеныя ў D3 з'яўляецца спіс рэчаў. Мы бачылі колькасць многіх відаў. Мы бачылі радкоў. Але тое, што таксама могуць быць аб'ектамі. 

Яны могуць быць складаныя рэчы якія ўключаюць у сябе шмат рэчаў. Сказаць, што больш выразна, У большасці выпадкаў мы хочуць пабудаваць кожную кропку дадзеных у якасці складаней, чым толькі адно значэнне. Калі вы хочаце прадставіць базы дадзеных пра студэнтаў, там можа быць студэнт імя, студэнцкі білет, і многае звязана з канкрэтнай запісу, не толькі радок альбо лічбу. Такім чынам, давайце паглядзім на гэта. 

Гэта адна з такіх набору дадзеных. Гэта ўстаноўлена аб землятрусах дадзеных. Так што ўсё тут, на нашым спісе ці масіва рэчаў змяшчае шмат рэчаў самастойна. Такім чынам, кожны кропка дадзеных мае Велічыня і каардынатаў. І каардынуе сябе ўтрымліваюць дзве рэчы. 

Такім чынам, кожны дзень цяпер нашмат больш складанай і значна цікавей, і змяшчае значна больш Цікавая інфармацыя. Давайце паглядзім, мы маглі б пабудаваць з гэтага. Вяртаючыся сюды, зноў жа, з дапамогай наша візуалізацыя гістаграма круг мы пабудавалі, давайце паглядзім, калі мы можам пабудаваць візуалізацыя размеркавання велічыні у нашым наборы дадзеных. 

Дык вось, гэта тое ж самае паняцце. Але цяпер, d ўтрымлівае больш рэчаў. d ўтрымлівае мноства элементаў дадзеных. Такім чынам, мы атрымліваем D таму. D3 дае нам D. І мы адказваем адшукання велічыні Д а затым адначасна, што ў маштабе. 

І тады мы павінны змяніць наш маштаб, вядома. Так велічыні проста не пайсці значна больш, чым 10. На самай справе, там ніколі не было 10 Землятрус магнітудай. Але гэта свайго роду наша верхняя канец, наша верхні спектр. 

Давайце асвяжыць. Nice, у нас ёсць візуалізацыі. Гэта цікава note-- так Ёсць дзве кропкі дадзеных, якія амаль дакладна адно над іншыя, з пункту гледжання велічыні. Вы бачыце гэта непразрыстасцю мы выкарыстоўваем. 

У нас ёсць геаграфічныя дадзеныя цяпер. У нас ёсць шыраты і даўгаты. Можа быць, мы маглі б зрабіць што-то значна цікавей з гэтым. Давайце знайсці яшчэ некалькі Цікавы спосаб візуалізаваць гэта складаней, Дадзеныя, якія мы маем доступ. 

Акт V, Mapping-- прынцыпова, мы хочам, каб пакласці іх на карце. Я маю на ўвазе, гэта, дзе гэта адбываецца. Мы хочам, каб кадзіраваць інфармацыю аб Становішча гэтых паказанняў землятрусу, а таксама іх велічыня, таму што ў нас гэта цяпер. Мы разумеем, як выкарыстоўваць больш складаныя дадзеныя. 

Першае, што мы зробім, гэта стварыць карту, фонавую карту. Я збіраюся прайсці праз гэта вельмі хутка. Гэта складана код. Гэта яшчэ адзін з тых, рэцэпты вы сапраўды не павінны цалкам зразумець, для вас выкарыстаць. Але гэта код. Гэты код прама тут стварае карту. 

Мы не збіраемся ісці ў дэталях. Але вонкава, што яна робіць, гэта, ён запытвае гэты файл us.json, які гэта файл дадзеных, як адзін, што было раней. Гэта больш складанае, вядома. Але ў гэтым выпадку, усё, кожная кропка дадзеных гэты стан і мае спіс шыраты і даўгаты якія вызначаюць шматкутнік, што форма, што дзяржавай. 

Так што D3 будзе зрабіць, гэта падобна да таго, што мы рабілі раней. Ён будзе прасіць, каб і звязаць, што да элемента. І ёсць функцыя, якая будзе адлюстроўваць гэты элемент з, на аснове шыраты і даўгаты. Вы можаце даведацца больш аб тым, што. І я рэкамендую яго. 

Ёсць спасылкі на канец гэтага кода ў курсе. І код прокомментірован. У ёсць спасылкі для далейшага на гэта. Я рэкамендую вам паглядзець яго. Але тое, што мы клапоцімся пра тое, Гэтая праекцыя функцыя. Я хачу, каб прайсці праз гэта. 

Перш за ўсё, дазвольце мне паказаць ты што, так, у нас ёсць карта. Карты халаднавата. Такім чынам, давайце паглядзім на гэта Вытворчая функцыя. 

Праекцыя вельмі як у маштабе, шалі зноў. Так што вытворчасць для Гэтая праекцыя функцыя робіць гэта, мы маглі б перадаць яму даўгаты і latitudes-- ў гэтым выпадку, Гэтыя значэння тут LAT-сумуе будынка мы сядзім у праве now-- для праекцыі. І праекцыя пераўтворыць што ў х і ў значэнняў пікселяў. 

Так што праекцыя робіць вельмі падобны на нашай шкале. Гэта займае нашых шыротах і даўгата, што ўяўляе сабой увесь зямны шар і скарачэнне і каліброўкі, што да плошчы, якую мы хочам, што мы далі яго. У гэтым выпадку, мы перадачы гэтых значэнняў. І гэта дае нам, добра, што на экране азначае 640 пікселяў. Увесь гэты экран 700 пікселяў шырокі, так што робіць нас пра тут, і 154 пікселяў ўніз, які я б адзнака ў значнай ступені тут. 

Так што, тыя LAT-Лонга, якія ўяўляюць нешта на ўсім зямным шары і цяжкі і перасоўванне, што каля каб даць нам X і Y. пікселяў, гэта першае, што гэта зроблена ў гэтым адлюстравання кода. І тады астатнія Код спажывае дадзеныя а затым адлюстроўвае гэтыя LAT-лонг на што-то на экране. 

Але мы збіраемся выкарыстоўваць гэтую праекцыю функцыі, таму што аказваецца у нас ёсць LAT-Лонга Лонг, а таксама. Азіраючыся назад на нашы дадзеныя, мы маем шыраты і даўгаты для кожнага назірання. Такім чынам, давайце выкарыстоўваць праекцыю. 

Так, гледзячы на ​​нашай экспазіцыі, мы хочам, каб наш exposition-- мы маем шырыню і даўгату. Але мы хочам, значэння пікселяў. І аказваецца, у нас ёсць дакладна тое, што мы want-- праекцыі. Вельмі, як мы былі па шкале прама тут, Цяпер мы збіраемся выкарыстоўваць праекцыю і перадаць яго каардынаты. Таму першае, што мы doing-- таму мы атрыманне д, якая з'яўляецца індывідуальнай дадзеныя элемент асобнага землятрусу чытанне. Першае, што мы робім гэта атрымаць каардынаты. Добра, у нас ёсць каардынаты. 

Другая рэч, якую мы робім, перадаць гэта праекцыі. Праекцыя пераўтворыць гэтыя каардынаты у значэнняў кропак, х і у. І тады апошняя рэч, якую мы хачу зрабіць, гэта проста атрымаць х, які ў гэтым выпадку з'яўляецца першы. Гэта першы з двух рэчаў што вяртаюцца праекцыі. 

Мы зробім тое ж самае для у. Але замест гэтага, мы вернемся другі элемент, у. Будзьце гатовыя, каб абнавіць. Ох, лішні сімвал here-- добра, у нас ёсць кіруецца дадзенымі дакумента, гэта хаваючы гэты файл JSON аб'ектаў, зрабіць карту, а таксама змены атрыбутаў ў дачыненні да дадзеных праецыраваць на мапе. Гэта сапраўды цікава. Гэта выдатна. 

Давайце яго на прыступку вышэй. Я маю на ўвазе, у нас ёсць дзве часткі Інфармацыя з кожнай кропкай дадзеных. Я маю на ўвазе, тры. У нас ёсць каардынаты, які х і у. І ў нас ёсць велічыню. 

Мы павінны кадзіраваць велічыню як-то. У нас ёсць шмат каналаў. Мы можам выкарыстоўваць колер. Мы можам выкарыстоўваць радыус. Мы маглі б выкарыстоўваць непразрыстасць. Мы маглі б выкарыстоўваць многія рэчы ў кодзе. Любы з гэтых атрыбутаў, і многія іншыя, якія не ў спісе, таму што яны па жаданні, мы маглі б выкарыстоўваць, каб кадзіраваць гэтыя дадзеныя, інсульту і ўсе гэтыя рэчы, якія я ўжо згадваў. 

Давайце радыус рабіць. Я думаю, што радыус найбольш інтуітыўна зразумелы. Такім чынам, яшчэ раз, мы заменім, што жорстка 40 і зрабіць некаторыя разлікі. Мы будзем выкарыстоўваць наш любімы маштаб зноў. І мы міма D. Але не D, таму што мы хочам велічыню з D. d проста кропка дадзеных. Мы праедзем велічыня ў маштабе. 

Давайце паспрабуем гэта зноў. Ох, гэта не працуе. Чаму яна не працуе? 

Так што памятаеце, што маштаб робіць. Давайце паглядзім на шкале зноў. Маштаб карты ад 1 да 10 на з 22 да 600, больш-менш. 600 велізарны. Вось чаму мы атрымліваем гэта. 

Такім чынам, мы хочам змяніць нашу шкалу што-то больш падыходнае. Скажам, мы хочам ад 0 да 60. 60 вялікі, але 10 землятрусаў неверагодна рэдка. На самай справе, яны ніколі не адбылося. 

Дык што ж гэта будзе зрабіць, гэта, гэта зойме наша велічыня, якая ідзе ад 1 да 10 і адлюстраваць яго на пашырэнне яго. І адлюстраваць яго на 0 да 60 гадоў. Давайце асвяжыць. 

Nice, у нас ёсць візуалізацыі. Гэта выдатна. Гэта фактычныя дадзеныя. Вы заўважыце, у маёй маленькай цацкі Напрыклад, самы вялікі землятрус знаходзіцца прама на верхняй часткі нас. Але гэта так. У нас ёсць дата прывадам візуалізацыі які спажывае дадзеныя і дае нам сапраўды Цікавая інфармацыя. Так, давайце дадамо некаторыя інтэрактыўнасць да яго. Я згадаў, што быў моцны сіла D3. 

Дык вось, для кожнага элемента, мы апісання кучу атрыбутаў. Але мы таксама можам апісаць тое, што мы хочам каб гэта адбылося з інтэрактыўнасцю элементаў. Напрыклад, мы маглі б апісаць што адбываецца, калі мы мышы над. І вельмі падобна, што, што вазьму функцыю, вельмі падобны на атрыбуты, што было раней, дзе мы робім нешта элемент, калі курсор мышы над ім. 

Такім чынам, спачатку, што нам трэба зрабіць, гэта выбраць гэты элемент, каб знайсці яго ў асноўным, у браўзэры. і тады мы маглі б ўсталяваць Атрыбут з ім. Так, што я раблю тут, калі мы навядзенні над чым-то, то мы атрымаем, што элемент і затым ўсталюйце яго непразрыстасць таму 1, каб цалкам непразрыстым. Давайце паглядзім, як гэта выглядае. 

Падобна на тое, у нас ёсць дадатковая кропка з коскі тут. Так што, калі мы навядзенні тут, ён атрымлівае поўны. Але цяпер, вядома, гэта застаецца поўным аб'ёме, таму што мы павінны апісаць, што адбываецца калі прыбіраем курсор. Так што давайце рабіць тое, што MouseOut, у адрозненне ад навядзенні курсора мышы. 

І мы скінем яго што мы мелі before-- 0,5. І цяпер, кожны раз, калі мы навядзіце, мы атрымліваем поўны круг. Гэта дапамагае нам убачыць, што мы мы выбары сутнасці. 

А цяпер давайце зробім гэта сапраўды выдатна. Давайце злучым гэта з рэальнымі дадзенымі. Так давайце спытаем мог Геалагічная служба ЗША аб сваіх дадзеных. Так Геалагічнай службы ЗША ёсць дадзеныя аб землятрусах. Яны маюць грамадскае API, што здольны для спажывання ў фармаце JSON. Так давайце зробім гэта. 

Так што гэта крыху кода, які падключаецца да API USGS. І ёсць трохі апрацоўкі на ім. Гэта не мае значэння, але спрашчае яго ў простым фармаце дадзеных, як адзін у нас было раней. Так што я пазбавіцца ад нашага выкліку Нашы падробленыя data.json ў файле. І замест гэтага, я тэлефаную USGS па сутнасці. 

Давайце асвяжыць, прыемна. Гэта актуальна, у рэальным жыцці дадзеныя з гэтага тыдня землятрусаў. Гэта сапраўды цікава. Гэта не дзіўна, для нас, але ёсць шмат землятрусаў на Заходняе ўзбярэжжа ў Каліфорніі. Але я думаў, што гэта было вельмі цікава што там было так шмат землятрусаў на Алясцы, і мяркуючы па ўсім, тут на Сярэднім Захадзе. Я маю на ўвазе, цікава, і мы добра. Гэта зняволенне. 

Але галоўнае, што гэтая гэта тое, што D3 дапамагае нам. Гэта дапамагае нам атрымліваць дадзеныя, прывязаць гэта элементаў у DOM, і маюць змене гэтых элементаў у залежнасці ад дадзеных, ёсць тыя атрыбуты, усе многія атрыбуты элементаў, Усе быць карысна каналаў для перадачы інфармацыі. 

D3 з'яўляецца неверагодна магутным бібліятэка і дзіўна добра працаваць. Гэта некаторыя магутная штука. Візуалізацыя дадзеных з'яўляецца неверагодна магутны інструмент для транспарціроўкі людзей глыбокіх ідэі, якія атрымлівае іх аснове і дапамагае ім зразумець, у Гэта глыбокае і інтуітыўна зразумелы спосаб, як дадзеныя працы, і як Дадзеныя змяняе наша жыццё.