[Speel van musiek] 

DAVID CHOUINARD: Ek is David Chouinard, en dit is D3. Welkom. Ons gaan om te leer oor D3 vandag. D3 is 'n JavaScript raamwerk vir die bou van 'n hoë gehalte interaktiewe visualisaties vir die web. Dinge soos wat ons is sien in die rug van my, ons gaan om te leer wat om te maak dinge, soort van die basiese beginsels van dit. Maar dit gaan om koel te wees. Kom ons begin maak mooi foto's. Ons het meer demos vooruitsigte beskikbaar. Kom ons doen dit. 

Wet ek, DOM manipulation-- ons gaan dadelik begin om koel dinge. Eerste van alles, aan die linkerkant, ons het kode. Aan die regterkant, ons het die gevolg van ons kode. Kom ons gaan deur dit. 

Kom ons maak 'n sirkel. Hoe klink dit vir? svg.append circle-- Ons het net 'n sirkel. Jy my nie glo nie, reg? Dit is nie daar nie. 

So wat ons gedoen het reg hier is, SVG is skaalbare vektorgrafika. Dit is die manier waarop ons vertel die leser te maak vektorgrafika in die leser. Wat ons nou net gedoen het nou bygevoeg 'n sirkel te blaai. 

Die belofte is dat die sirkel vereis 'n bietjie van die basiese eienskappe voordat ons werklik kan sien nie. Ons het dit nodig om te vertel sy x posisie, sy y posisie, sy radius. Ons het nie vertel dit enige van daardie, sodat ons nie sien nie dit nou. Maar laat ons vertel dit goed. 

So die eerste van alles, het jy ons kring te gee 'n naam. So kom ons noem dit sirkel. Ons sirkel het 'n naam nou. En laat ons gee dit 'n paar eienskappe. Hoe gaan cx sou sentrum x, so die middel van die x posisie. Kom ons sê, 200 200 pixels. 

Kom ons gee dit 'n y van 200 pixels as well. En 'n r, 'n radius van ongeveer 40 pixels. Kom ons kyk nou. Ek kan nie spel. 

Daar gaan jy. Ons het 'n sirkel by posisie 200 pixels, 200 pixels, radius van 40 pixels. Gaaf, reg? Ons het 'n sirkel. Ja. 

So nie nodig om saam te volg. Al hierdie voorbeelde, al die kode wat ek vandag is besig sal aanlyn beskikbaar wees aan die einde in die vorm van 'n interaktiewe voorbeelde met besoekpunte by elke daad, en so aan. 

Kom ons doen meer dinge. Hierdie swart sirkel is regtig lelik. Ek is jammer vir die fout boodskappe reg daar. Daar gaan ons. 

Kom ons gee dit 'n kleur. Hoe is dit? Ek hou van staal blou. Wel, ons kring van kleur verander. Dit is 'n groot. Kom ons maak dit semi-deursigtige too-- semi-deursigtige. 

So dit is eienskappe ons definieer op die sirkel. Die eerste ding wat ons gedoen het, is ons het 'n kring afgetrek het op die bladsy. En dan is ons die definisie 'n klomp van die eienskappe. Sommige van hierdie vereis word, soos CX, CY en radius. En die ander is opsioneel. 

Daar is 'n baie meer spesifieke eienskappe. Daar is 'n baie van hulle. Byvoorbeeld, kan ons 'n het beroerte sowel, 'n slag van rooi. Maar laat ons verwyder dit. Ons is terug na 'n sirkel, 'n blou sirkel. 

So laat ons meer sirkels. Hoe is dit? Kom ons maak 'n ander sirkel. Dit is opwindend, reg? 

So sê Ek net kopieer-Geplak wat ons reeds. Kom ons noem dit circle2. En laat ons doen om die presiese dieselfde ding en gee dit eienskappe, gegewe 'n x posisie van 300. Yay, het ons twee sirkels nou. 

En natuurlik, ons kon werk hierdie waardes. Ek kon dit sit op 400, en nou is dit beweeg. En aangesien dit irriterende, laat ons verwyder dit, so circle2.remove. Dit is nou weg. 

So wat ons doen en is net baie, very-- hierdie is baie soortgelyk aan wat jy kan doen in jQuery, byvoorbeeld. Ons is net te manipuleer die DOM, is dit genoem. Jy kan die woord gehoor het nie. Ons is die skep van dinge, die opstel eienskappe op dinge, die verwydering van dinge. 

Nou, hier is waar dit raak interessant. So later in die kode, kon ons nog verwys na die oorspronklike sirkel hier. So laat herstel sy kenmerk te cx. Kom ons sê, sy x posisie tot 400. En ek gaan om die oorgang dat, so dit is voor die hand liggend. Daar gaan ons. 

So ons het 'n sirkel. Ons stel 'n paar eienskappe. Ons het nog 'n sirkel, verwyder dit. En dan is ons die wysiging die oorspronklike sirkel. 

Maar hier is waar dit raak 'n baie meer interessant. Nie net kan ons stel eienskappe as net waardes, kan ons sê, hey, sirkel, gaan na posisioneer 200. Ons kan ook hulle as funksies. 

So in plaas van die gee van 400 hier, ons kan 'n paar berekening maak op die vlieg vir dit wat ons wil hê dat die eienskap te wees. So dit is hoe jy wil uitspreek nie. Ons sê, in plaas van 400, laat my gee jou 'n funksie in plaas. En hier, binne hierdie funksie, ons kan enige gek berekening maak. 

Ons kon die tyd neem en kyk na 'n paar ander ding en dinamiese besluit die sirkel wat die waarde wat ons wil. Hoe gaan ons net gee dit 'n ewekansige x posisie? So dit is wat. 

So wat dit sê, is vir elke x, hardloop hierdie funksie. En wat ons doen, is die berekening van 'n paar dinge, 'n ewekansige keer die breedte en terugkeer nie. So elke keer as ons hardloop dat ons 'n sirkel wat gaan na 'n ewekansige plek. Dit is soort van cool. Ek voel soos ek kan kyk op hierdie vir 'n bietjie. Ons is besig om te kry om iets interessant hier. Kom ons maak hierdie data nou gedryf. Daar is geen data hier. Kom ons verander. 

Wet II, data-gedrewe Documents-- So laat ons terugkeer na hier. En laat ons net ontslae te raak van circle2, want ons is maar net toe te voeg en die verwydering van dit. Sodat ons nie regtig nodig het nie is dit. Ons moet 'n baie meer slim hier. Kom ons sê, ons het sommige data van 'n soort. Een moment-- kom ons sê, ons het data van hierdie vorm. Ons het 'n skikking, net 'n klomp van die nommers. Ons het sewe nommers hier, wat hierdie represent-- bedrag in mense se bankrekening, hoe veel weeg, god weet wat. 

Hierdie is getalle, en ons wil ons sirkels te gebruik dié nommers te verteenwoordig een of ander manier. Ons wil om te bind ons kringe aan diegene getalle. So wat ons doen. Kom ons sê, ons wil 'n sirkel vir elke nommer. Ons kon die ou doen ding ons doing-- sirkel aanlas en circle2 en circle3. Maar dit handuit ruk, en daar is 'n baie van die logika te herhaal. 

So laat ons kry meer slim met dit. In plaas van die gebruik van die var sirkel svg.append dat ons net gebruik het, ons gaan gebruik hierdie klein blok hier. Ek wil nie te gaan in-diepte in wat al hierdie dele nie. En dit is soort van 'n gevorderde onderwerp. En ek wens ek kon. 

Maar die belangrikste ding om te recognize-- en jy sal sien is baie dikwels in D3 kode. Hierdie teks blok basiese skep as baie kringe want daar is data-elemente in hierdie reeks hier. So dit skep soveel kringe as daar is elemente. Dit gaan ons sewe sirkels te skep. En is dit nie 'n baie, baie belangrike ding. So laat loop nie. Kom ons verwyder ons ander sirkel. Laat ons net kommentaar lewer hierdie deel uit en hardloop dit weer. 

Daar gaan ons. So ons kring hier is 'n baie donkerder, want ons het sewe sirkels, een op die top van die ander. Ons het net sewe sirkels, een geskep elk vir elk van hierdie data-elemente. Maar daar is 'n belangrike ding wat gebeur het met hierdie brokkie hier. 

Dit is dat die data is gebind. So elke enkele een van diegene data-elemente, 10, 45, 105, was gebonde aan 'n spesifieke sirkel. So het hierdie nie net geskep 'n klomp van die sirkels maar bind die twee dinge saam. 

En in die toekoms, want ons geskep daardie kringe met hierdie D3 funksie, as ek vir jou 'n sirkel, kan jy gee my die data wat verband hou met dit. So ons kan vra D3. Hey, D3, ek het hierdie sirkel. Wat is die data wat die sirkel het? En D3 sal vertel ons 10 of 45 of 105. 

Hierdie dinge is gebind. Dit is 'n baie, baie fundamentele konsep. Kom ons kyk na dit. 

So het die manier waarop ons wil vra D3-- so dit is irrelevant vir hierdie, maar net vertrou my op dit. Dit is hoe ons vra D3. Hey, D3, gee my die eerste sirkel wat jy kan vind. Gee my die eerste sirkel wat jy kan vind. En dan kan ons D3 vra, wat is die data op daardie, soos hierdie, 10. 

So het ons net vra D3, vind my die eerste sirkel wat jy kan vind. Wat is die data? 10, dit is inderdaad ons eerste data element. Ons kan dit vra, hey, D3, vind ons die derde sirkel. 105. Hoekom is dit regtig belangrik? 

So reg hier, ek genoem wat ons kan gebruik funksies. En ek het gesê dat was 'n baie kragtige ding. So nie net kan ons funksies doen dinge soos sommige berekening, byvoorbeeld, terugkeer om 'n ewekansige getal, kan dit doen ook dinge wat gebaseer is op die data. Dit is wat data-gedrewe dokumente beteken. Dit is wat D3 staan. 

So hierdie x postition-- plaas om net te sê, al die sirkels, kry x posisie 200, ons kon gee dit 'n funksie. En hier, kan ons 'n paar berekening maak. en d hier staan ​​in die plek van die data. So elke keer as ons ' 'n sirkel, basies, D3 sal hierdie sewe sirkels skep. En dan vir elke 

sirkel, dit gaan om te gaan, hey, circle1 wat is jou x posisie. Voorheen was ons altyd beantwoord 200. Maar nou, elke keer D3 vra ons wat is jou x posisie, dit gaan om te gee us-- ons daardie sirkel, so ons het die data. Dit gaan om ons te gee die data en sê: wat wil jy die uiteensetting te wees, gebaseer op die data. 

Laat ons net die standaard van die werklike data. So as ons hardloop dit, dit gee ons data gedrewe dokumente. Hierdie kringe is gebaseer in verhouding position-- hulle is basisse as 'n funksie van die data. 

So vir die eerste sirkel, D3 sit 'n sirkel. En dan D3 ons vra, wat doen jy wil die uiteensetting te wees. En ons net sê, ongeag die data is. Maak die uiteensetting 10. 

Dan vra dit, doen wat jy wil hê dat die uiteensetting te wees vir die tweede sirkel. En ons antwoord, 45. En ons, natuurlik, kan maak 'n paar berekening hier. Ek vind dat die sirkels is soort van squished up. 

So vermenigvuldig dit met 3, data vermenigvuldig met 3. Ons sirkel het net uitgebrei word. Ons waarde is verdriedubbel. 

Die sirkel is regtig op die rand, so laat ons miskien soort verreken nie. Kom ons sê, met 20. Hier gaan jy. 

Dit is 'n data visualisering. Dit is 'n baie basiese een, maar dit gee ons 'n insig in ons data. Dit vertel ons dat, byvoorbeeld, ons 'n bietjie cluster elemente. En ons het 'n groot uitskieter hier. Dit gee ons 'n paar inligting oor die verspreiding. 

As ons, byvoorbeeld, te verander die data te 150 hier en verfris, ons visualisering verander. Hierdie dokument is data gedrewe. 

So natuurlik, al hierdie elemente, Al hierdie eienskappe hier, ons kan 'n funksie te gebruik, nie net die getalle, nie net die x en y posisies. So kan ons 'n funksie gebruik vir die kleur. So sal ons dieselfde doen. Ons sal dit gee 'n funksie. 

En laat ons sê, ons kan hê conditionals in ons funksie. Hierdie funksie kan wees honderd lyne lang. Dit kan doen baie, baie ingewikkelde dinge. 

Kom ons stel 'n IF-stelling hier. Kom ons sê, as ons data is minder as 50, wat is 'n paar drumpel wat ons interesseer in een of ander rede. Kom ons maak dit groen. Anders, kom ons maak dit rooi. Hoe is dit? Nice. 

So ons data visualisering begin meer interessante inligting oor te dra op baie kanale. So nou weet ons 'n bietjie oor die verspreiding. En ons weet dat daar is 'n soort van afgesny teen 50 dat ons belangstel. Ons weet dat daar twee data punte hieronder wat drumpel en die meeste van hulle hierbo. 

So as 'n finale stap, hierdie data hier, dit is baie skaars om te sien soos dit. So laat ons net beweeg dit uit na 'n veranderlike want dit is skoner, soos hierdie. En dan gebruik ons ​​dat veranderlike hier. Dit is presies dieselfde ding. Dit is net 'n bietjie skoner. 

Volgende op, Wet III, Scales-- So een probleem reg hier is, as ons verander ons data in hierdie 200 value-- as ons verander dit na 400 of iets en verfris, Dan is hierdie waarde net agter skerm het. So ons logika hier van hoe ons dit doen die keer 3 en 20, om dit te versprei en dan verreken dit 'n bietjie is regtig clunky. 

Wat beteken die getalle nie? Hulle is maar net hard gekodeer daar. En hulle is baie wat gekoppel is aan die data. Ons wil 'n data-gedrewe dokument. Ons wil 'n baie buigsame dokument, dat gegewe data, pas dit en verteenwoordig nie. 

Wat ons nodig het, is basies, ons het hierdie reeks van getalle 10. 45, 105. En ons wil dit uit te stippel op die breedte, die volle wydte hier. So het ons die reeks getalle gaan van 0 tot 100. En ons het hierdie kampus ek gaan 20-700, in hierdie geval. 

Ons soort van wil dit karteer op. Ons wil om dit te skaal en dan geneutraliseer dit 'n bietjie. Dit blyk dat die D3 het hierdie. Dit is bekend as 'n skaal. So laat ons dit gebruik. 

Die manier waarop works-- ek gaan tik en verduidelik dit dan. Dit is 'n skaal. Wat sal dit doen is nie, sal dit die kaart uit waarde van 1 tot 200 aan te 20-600. Ons kan seker maak dat. Ons kan sien dat hier. 

So as ek voer dit 1-- een oomblik. Gee my 'n sekonde. Ek moet verkeerd gespel het nie. Daar gaan jy. Ek is jammer daaroor. 

So, wat 'n skaal sal doen word, sal dit 'n waarde aanneem en dan sit dat, brei dat uit, so dit vul die volle omvang jy vra vir. So in hierdie geval, as ons dit een gee, dit gaan om dit te karteer op 20. En as ons dit gee 200, dit is gaan dit karteer op 600. En iewers tussen in, as ons kry 100, dit is iewers gaan wees tussen 20 en 600. 

En natuurlik, dit is nou wat ons moet die harde gecodeerde te verwyder dinge wat ons het net daar. So wat ons wil doen, is neem die data wat ons is gegee dat individuele data element, en gee dit aan die eerste skaal. So skaal sal skaal dit. 

Well-- O, ons het 'n bietjie fout hier. Ons ontbreek data. Daar gaan jy. En dat groei dit uit. 

Dit gee ons dieselfde resultaat wat ons gehad het voordat, maar in plaas van om die hard gekodeer beperkings. En as die grootte van ons doek veranderinge, byvoorbeeld, As ons wil dit oor te hê 400 pixels en dit squishes uit, ons kan dit over-- ons kan dit uit te brei, of ons kan hierdie linkerkantlyn verminder iets meer of minder as 20. Hierdie getalle is hierdie harde gekodeerde getalle sin maak nou vir ons. 

En ons kon 'n baie meer te doen interessante dinge so goed. So in plaas van 'n lineêre skaal, kan ons wil 'n skaal aan te meld. En dit sal vir ons 'n log-skaal. 

So nou is ons skaal, in plaas van net uit te brei uit die reeks, dit doen meer gesofistikeerde dinge. In plaas van om hierdie reeks hard gekodeerde, en in plaas van om dit 600, ons wil dalk net gebruik die breedte, so van 20 tot die breedte minus 40, 2 keer die kantlyn aan die ander kant. En dit maak 'n baie meer sin om iemand wat kan kyk na die kode. 

Interessant genoeg, die skale kry baie, baie gesofistikeerd as well. Hulle doen 'n baie interessante dinge. So skale het nie noodwendig te bedryf net met getalle. Kom ons maak 'n kleur skaal. 

So ons reeks kon be-- ons domein is 1-200. Dit is die insette ding. Maar ons wil dalk te karteer uit groen na rooi, byvoorbeeld. En nou, as ons dit 1 slaag, ons gaan groen te kry. As ons gee dit 200, sal ons kry rooi. En as ons dit slaag iets tussen, dit gaan 'n paar mengsel van te wees nie, iewers op die helling tussen groen en rooi. 

En in plaas van om hierdie soort van clunky logika ons het hier met die voorwaardelike reg daar, Ons kon something-- n lineêre skaal tussen diegene. So ons wil die skaal gebruik ons ​​net geskep, wat ons geroep kleur. En ons wil dit gee D, wat is ons data element. En daar gaan ons. Ons het 'n kleur skaal. 

So, dit is kartering. So het die ver links is heeltemal groen. Die heel regs is heeltemal rooi. En alles tussen in is 'n funksie van d. Ons het 'n interessante visualisaties hier. Maar ons data was soort van vervelig. Kom ons kyk wat ons kan doen as ons het meer interessant data. 

Wet IV, in samewerking met Data-- die eerste ding ons sal wil doen om ons visualisering meer interessant is om die data te iewers anders te beweeg. Dit is baie clunky te hê die data hard hier gekodeer. En in die algemeen, sal ons wees vra iemand anders vir die data. Ons sal miskien vra die regering, die Census Bureau, wat is jou data en dan die plot wat of vra sommige derde party entiteit vir sommige data en dan die bou van 'n visualisering op daardie. 

So die eerste ding wat ons wil doen, is beweeg dat iewers anders. So ek gaan 'n te skep lêer hier genoem data.json. Into is die data-formaat. Jy het nie veel oor wat om te weet. En ons gaan die te kopieer min data wat ons het daar, plak dit in daar woordeliks, gaan terug na ons visualisering kode hier, en gebruik hierdie funksie reg hier. Jy het nie die besonderhede te ken. Maar wat dit sal doen, is, dit sal vind dat lêer, haal dit, en stuur dit aan ons. So, wat dit beteken is, gaan dit en kry die data.json lêer. En dan sal al die kode wat ingekeep inside-- wese, al die kode wat ons het there-- sal hardloop net wanneer ons die data terug. En dan gaan dit wat om te hardloop kode met die data wat ons het. Groot, ons het 'n visualisering dat navrae vir 'n paar kode iewers anders, wat gewoonlik waar dit bevraagteken sommige data van iewers anders, wat gewoonlik hoe visualisaties werk. 

Maar ek wil om terug te gaan na die data. So die data fundamenteel in D3-- D3 verbruik data dit is 'n lys van die dinge. D3 verwag dat die data net 'n lys van dinge, 'n verskeidenheid van dinge. Dit maak nie saak wat die dinge is, so lank as wat dit is 'n verskeidenheid van hulle. 

So hier, byvoorbeeld, kon ons van Natuurlik het drywende punt waardes. Ons kon negatiewe. D3 nie sorg nie, so lank as dit is 'n lys van dinge. 

As interessante dinge wat ons kan hê, kan ons ook 'n lys van stringe soos dit. So dit is die Crimson nuus Ek opgetel het 'n paar dae gelede. En miskien kan jy 'n paar interessante vind dinge oor hierdie 'n nuus. 

So weer, dit is 'n lys van die dinge. D3 nie omgee nie. Hierdie toevallig 'n string te wees. Ons het ons data verander. 

Kom ons keer terug na ons visualisering. Nou, ons visualisering verwag die insette getalle te wees. So ons gaan te hê 'n paar veranderinge aan te bring. So byvoorbeeld, die eerste van alles, miskien ons wil hierdie sirkels om saam te sit deur die lengte van die kop, die aantal karakters in die kop. 

So, wat ons sal doen is-- elke keer ons funksie geroep met 'n string, ons sal vind dit is die lengte en dan slaag om te skaal. Die kleur is, sal ek terug wat aan staal blou. En daar gaan ons. Ons het 'n visualisering van Crimson nuus. 

Ons skaal is 'n bietjie af. Kom ons veronderstel dat die langste kop is 100 karakters lank, so span wat uit 'n bietjie. En ons het 'n visualisering. Dus blyk dit dat die meeste nuus is redelik naby aan mekaar, in terme van karakter lyn. Maar 'n mens daar staan ​​regtig uit. 

Ons kon bou sommige gereedskap te verken dat meer. Maar toe ek besig was op hierdie, ek was nuuskierig of, in hierdie datastel, nuus met 'n kolon in hulle sal langer wees. Ek aanvaar hulle wou hê. 

So laat ons uit te vind. Kom ons gebruik die kleur kanaal soos ons gedoen het voor, sommige oor of te enkodeer daar is 'n kolon of geen. So sal ons 'n voorwaardelike gebruik weer. Jy hoef nie te weet die besonderhede van hierdie, maar dit is hoe ons dit gaan 'n string vir 'n spesifieke karakter in JavaScript, weer, nie relevant. 

Maar as ons nie vind nie 'n kolon, sal ons terugkeer groen. En as ons dit doen, sal ons terugkeer rooi. So weer, hoofde wat het 'n kolon sal rooi wees. Dit is wat hierdie means-- nice. 

Dus blyk dit dat my hipotese word gestamp. Daar is slegs twee. Ons het net ses datapunte en slegs twee dubbelpunte het. Maar dit lyk 'n bietjie meer op die onderste end, in werklikheid. Nuus met dubbelpunte lyk om oor die algemeen korter, ten minste in ons data set-- interessant. 

Kom ons keer terug wat aan staal blou en dan sien wat ons kan maak met selfs meer interessant data. So weer, ek het genoem dat data in D3 is 'n lys van die dinge. Ons het gesien hoe getalle van baie tipes. Ons het gesien hoe snare. Maar die dinge kan ook voorwerpe. 

Hulle kan ingewikkeld dinge wat insluit 'n baie van die dinge. Om te sê dat meer duidelik, in die meeste gevalle, ons wil elke data punt te bou as meer ingewikkeld as net een waarde. As jy dink 'n databasis oor studente, daar dalk 'n student noem, 'n student ID, en 'n baie van die dinge wat verband hou met 'n bepaalde rekord, nie net 'n tou of 'n nommer. So laat ons kyk na dit. 

Dit is een so 'n stel data. Dit is 'n stel data oor aardbewings. So alles hier op ons lys of skikking van die dinge wat bevat baie dinge self. So elke data punt het 'n grootte en 'n koördineer. En koördineer hulself bevat twee dinge. 

So elke dag is nou 'n baie meer ingewikkeld en 'n baie meer interessant en bevat baie meer interessante inligting. Kom ons kyk wat ons kan bou uit daardie. Terugkeer om hier, weer, met behulp van ons histogram sirkel visualisering ons gebou het, laat ons kyk of ons kan bou 'n visualisering van grootte verspreiding in ons datastel. 

So hier, dit is dieselfde konsep. Maar nou, d bevat meer dinge. d bevat baie data-elemente. So kry ons terug d. D3 gee ons d. En ons reageer deur die vind van die grootte van d en dan verby dat skaal. 

En dan het ons nodig het om te verander ons skaal, natuurlik. So groottes doen eenvoudig nie gaan baie meer as 10. Eintlik is daar nog nooit 'n 10 aardbewing. Maar dit is soort van ons bo- einde, ons bo spektrum. 

Kom ons verfris. Nice, ons het 'n visualisering. Dit is interessant om dit te note-- is daar twee data punte wat is byna presies op die top van elke ander, in terme van grootte. Jy sien dit deur die ondeursigtigheid ons gebruik. 

Ons het geografiese data nou. Ons het breedtegrade en lengtegrade. Miskien kan ons iets wat 'n doen baie meer interessant met dit. Kom ons 'n paar meer vind interessante manier om te visualiseer dit meer ingewikkeld data wat ons het toegang tot. 

Wet V, Mapping-- fundamenteel, ons wil om dit te sit op 'n kaart. Ek bedoel, dit is waar dit gaan. Ons wil inligting oor die te enkodeer posisie van hierdie aardbewing lesings, sowel hul omvang, want ons het dit nou. Ons verstaan ​​hoe om te verteer meer ingewikkeld data. 

Die eerste ding wat ons sal doen, is om skep 'n kaart, 'n agtergrond kaart. Ek gaan om te gaan deur hierdie baie vinnig. Dit is moeilik kode. Dit is 'n ander een van daardie resepte wat jy nie regtig moet ten volle begryp vir jou om te gebruik. Maar dit is die kode. Hierdie kode hier skep 'n kaart. 

Ons gaan nie om te gaan in detail. Maar oppervlakkig, wat dit doen, is, dit bevraagteken hierdie us.json lêer, wat is 'n data lêer soos die een wat ons voorheen gehad het. Dit is meer kompleks, natuurlik. Maar in hierdie geval, alles, elke data punt is hierdie toestand en het 'n lys van breedtegrade en lengtegrade wat definieer die veelhoek, daardie vorm, dat die staat. 

So, wat D3 sal doen, is soortgelyk wat ons gedoen het voor. Dit sal vra dat en bind dit om 'n element. En daar is 'n funksie wat sal die kaart daardie element uit, gebaseer op die breedtegrade en lengtegrade. Jy kan meer oor dit lees. En ek beveel dit. 

Daar is skakels na die einde van hierdie kode gepos. En die kode is kommentaar. Daar is skakels vir verdere op hierdie punt. Ek beveel aan jy kyk dit. Maar wat ons omgee is hierdie projeksie funksie. Ek wil om te gaan deur dit. 

Eerste van alles, laat ek jou wys jy dat, ja, ons het 'n kaart. Kaarte is cool. So laat ons kyk na hierdie produksie funksie. 

Projeksie is baie soos 'n skaal, skale weer. So, wat produksie vir hierdie projeksie funksie beteken is, kan ons dit Longitude slaag en latitudes-- in hierdie geval, hierdie waardes hier is die lat-verlang van die gebou ons in die regte sit now-- te projeksie. En projeksie sal omskep wat in x en y pixel waardes. 

So, wat projeksie doen is baie soortgelyk aan ons skaal. Dit is om ons breedtegrade en lengtelyn wat 'n hele wêreld verteenwoordig en krimpende en sizing dat af na die vierkant wat ons wil hê, dat ons gegee het nie. In hierdie geval, ons is verby hierdie waardes. En dit is wat ons, wel, wat op jou skerm beteken 640 pixels. Hierdie hele skerm is 700 pixels breed, so wat maak dat ons oor hier, en 154 pixels af, wat ek nie wil raming is pretty much hier. 

So neem die lat-verlang, wat iets op die hele wêreld verteenwoordig en squishing en beweeg dat sowat ons x en y pixel waardes te gee, dit is die eerste ding wat gedoen in hierdie kartering kode. En dan is die res van die kode verorber die data en dan kaarte diegene lat-verlang op iets op jou skerm. 

Maar ons gaan hierdie projeksie te gebruik funksies, want dit blyk ons het lat-verlang verlang as well. Terugblik op ons data, het ons breedtegrade en lengtegrade koördinate vir elke waarneming. So laat se gebruik projeksie. 

So kyk na ons uiteensetting, ons wil ons exposition-- ons het 'n lengte-en 'n lengtegraad. Maar ons wil pixel waardes. En dit blyk, ons het presies wat ons want-- projeksie. Baie soos ons was gebruik van skaal reg hier, ons nou gaan projeksie te gebruik en dit slaag koördineer. So die eerste ding ons so doing-- ons om d, wat 'n individuele data element van 'n individu aardbewing lees. Die eerste ding wat ons doen is jy die koördinate. Alle reg, ons het die koördinate. 

Die tweede ding wat ons doen, is gebeur dat op projeksie. Projeksie vat die koördinate in pixel waardes, x en y. En dan is die laaste ding wat ons wil doen, is net die x, wat hierdie geval is die eerste een. Dit is die eerste van die twee dinge wat deur projeksie teruggekeer word. 

Ons sal dieselfde doen vir y. Maar in plaas daarvan, sal ons terugkeer die tweede element, die y. Maak gereed om te verfris. Ooh, 'n ekstra karakter here-- mooi, ons het 'n data-gedrewe dokument wat verdoesel hierdie into lêer van voorwerpe, 'n kaart, en die verandering van die skryf in verband met die data om dit te projekteer op 'n kaart. Dit is baie interessant. Dit is cool. 

Kom ons neem dit op 'n kerf. Ek bedoel, ons het twee stukke inligting met elke data punt. Ek bedoel, drie. Ons het die koördinate, wat is 'n x en y. En ons het die grootte. 

Ons moet die omvang een of ander manier enkodeer. Ons het 'n baie kanale. Ons kan gebruik om kleur. Ons kan gebruik radius. Ons kan gebruik ondeursigtigheid. Ons kan baie dinge gebruik in die kode. Enige van hierdie eienskappe en vele meer wat nie daar gelys is, want hulle is opsioneel, ons kon gebruik om hierdie data te enkodeer, die beroerte en al hierdie dinge wat ek genoem het. 

Kom ons doen radius. Ek dink radius is die mees intuïtief. So weer, sal ons vervang wat hard-gekodeerde 40 en maak 'n paar berekeninge. Ons sal ons gunsteling skaal weer te gebruik. En ons is verlede d. Maar nie d, want ons wil die grootte van d. d is net die data punt. Ons sal slaag om die grootte te skaal. 

Kom ons probeer dit weer. Ooh, dit nie werk nie. Hoekom is dit nie werk nie? 

So onthou wat skaal nie. Kom ons kyk na skaal weer. Skaal kaarte 1-10 op te 22-600, min of meer. 600 is groot. Dit is die rede waarom ons kry nie. 

So wil ons ons skaal te verander na iets meer redelik is. Kom ons sê, ons wil 0-60. 60 is 'n groot, maar 10 aardbewings is ongelooflik skaars. In werklikheid, hulle het nooit gebeur nie. 

So, wat dit sal doen is, sal dit neem ons omvang wat gaan 1-10 en kaart dit op dit uit te brei uit. En kaart dit op te 0-60. Kom ons verfris. 

Nice, ons het 'n visualisering. Dit is 'n groot. Dit is werklike data. Jy sal sien, in my klein speelgoed Byvoorbeeld, die grootste aardbewing reg op die top van ons. Maar dit is dit. Ons het 'n datum gedryf visualisering wat verbruik die data en gee ons regtig interessante inligting. Ja, laat ons voeg 'n paar interaktiwiteit om dit te. Ek het genoem dat was die sterk krag van D3. 

So hier, vir elke element, ons is beskrywing van 'n klomp van die eienskappe. Maar ons kan ook beskryf wat ons wil gebeur met interaktiwiteit elemente. Byvoorbeeld, kan ons beskryf wat gebeur wanneer ons die muis oor. En baie soortgelyk dat, wat sal 'n funksie neem, baie soortgelyk aan die eienskappe wat ons gehad het voordat, waar ons iets aan die element wanneer ons hover oor dit. 

So die eerste ding wat ons nodig het om te doen is kies daardie element, dit basies vind, in die leser. en dan kan ons ' 'n kenmerk om dit te. So wat ek hier doen, is, wanneer ons hover oor iets, sal ons daardie element kry en dan stel sy opacity terug 1, heeltemal ondeursigtig. Kom ons kyk wat dit lyk. 

Dit blyk ons ​​het 'n ekstra kommapunt hier. So as ons hover hier, dit raak vol. Maar nou, natuurlik, is dit bly vol, want ons te beskryf wat gebeur wanneer verwyder ons wyser. So laat ons doen presies wat op mouseout, in teenstelling met mouse over. 

En ons sal dit herstel na wat ons gehad het before-- 0.5. En nou, elke keer as ons hover, kry ons 'n volle sirkel. Dit help ons om te sien wat ons ons is in wese kies. 

En nou, laat ons maak dit regtig groot. Kom ons maak dit om werklike data. So laat ons vra kon USGS oor hul data. So het die Amerikaanse Geologiese Opname het data oor aardbewings. Hulle het 'n openbare API wat in staat is om in into formaat te verteer word. So laat ons dit doen. 

So, dit is 'n bietjie van die kode wat verbind tot die USGS API. En daar is 'n bietjie van prosessering op dit. Dit is nie relevant, maar dit vereenvoudig 'n eenvoudige data-formaat, soos die een ons het tevore. So ek ontslae raak van ons oproep om ons valse data.json op lêer. En in plaas daarvan, ek roep die USGS wese. 

Kom ons verfris, mooi. Dit is 'n werklike, werklike data Van hierdie week vir aardbewings. Dit is baie interessant. Dit is nie verbasend vir ons, maar daar is 'n baie aardbewings op die West Coast in Kalifornië. Maar ek het gedink dit was baie interessant dat daar so baie aardbewings in Alaska, en glo, hier in die Weste. Ek bedoel, interessant, en ons is goed. Dit is die gevolgtrekking. 

Maar fundamenteel, hierdie is wat D3 help ons doen. Dit help ons om data neem, bind om dit te elemente in die DOM, en het daardie elemente verander as 'n funksie van die data, het daardie eienskappe, al die baie eienskappe van die elemente, al nuttig vir kanale wees inligting oor te dra. 

D3 is 'n ongelooflike kragtige biblioteek en ongelooflik goed hardloop. Dit is 'n paar kragtige dinge. Data visualisering is 'n ongelooflike kragtige instrument vir die vervoer van mense diep insigte wat kry om hul kern en help hulle om te verstaan, in hierdie diepgaande en intuïtiewe manier, hoe data werk en hoe data verander ons lewe.