[Muziek] 

DAVID Chouinard: Ik ben David Chouinard en is D3. Welkom. We gaan om te leren over D3 vandaag. D3 is een JavaScript-raamwerk het bouwen van een hoge kwaliteit interactieve visualisaties voor het web. Dingen zoals wat we zien in de achterkant van mij, we gaan leren om deze te maken dingen, een soort van de basisprincipes van het. Maar het gaat om cool te zijn. Laten we beginnen het maken van mooie foto's. We hebben meer demo's kregen van de vooruitzichten beschikbaar. Laten we het doen. 

Act I, DOM manipulation-- we gaan om te beginnen met het maken van leuke dingen meteen. Allereerst links wij code. Aan de rechterkant, hebben we het resultaat van onze code. Laten we gaan door het. 

Laten we een cirkel. Hoe klinkt dat? svg.append circle-- we net een cirkel. Je gelooft me niet, toch? Het is er niet. 

Dus wat we deden hier is, SVG is scalable vector graphics. Dit is de manier waarop we vertellen dat de browser maken vector graphics in de browser. Wat we precies goed nu deed is een cirkel te bladeren toegevoegd. 

De belofte is dat de cirkel vereist een beetje basis attributen voordat we daadwerkelijk kunnen zien. We moeten het vertellen haar x-positie, de y-positie, de radius. We hebben niet een van die vertellen, zodat we niet zien het nu. Maar laten we zeggen dat het spul. 

Dus in de eerste plaats, je hebt om onze kring een naam te geven. Dus laten we het noemen cirkel. Onze kring heeft nu een naam. En laten we het een paar attributen. Hoe zit het cx zou x centreren, zodat het middelpunt van de X-positie. Laten we zeggen, 200 voor 200 pixels. 

Laten we het een y van 200 pixels ook. En een R, een straal van 40 pixels. Laten we nu eens zien. Ik kan niet spellen. 

Daar ga je. We hebben een cirkel op positie 200 pixels, 200 pixels, straal van 40 pixels. Wel cool, toch? We hebben een cirkel. Yeah. 

Dus geen noodzaak om mee te volgen. Al deze voorbeelden allemaal de code die ik vandaag doe zal online worden aangeboden aan het einde in de vorm van interactieve voorbeelden met checkpoints op elke handeling, enzovoort. 

Laten we doen meer spullen. Deze zwarte cirkel is echt lelijk. Het spijt me voor die fout boodschappen daar. Daar gaan we. 

Laten we het een andere kleur. Hoe is dat? Ik wil staalblauw. Nou, onze cirkel van kleur veranderd. Dat is geweldig. Laten we het semi-transparante too-- semi-transparant. 

Dus dit zijn attributen we definiëren op de cirkel. Het eerste wat we deden is zetten we een cirkel op de pagina. En dan zijn we het definiëren een bos van attributen. Sommige van deze zijn vereist, zoals CX, CY, en Radius. En anderen zijn optioneel. 

Er zijn veel meer attributen. Er is veel van hen. Zo zouden we hebben beroerte als goed, een slag van rood. Maar laten verwijderen dat. We zijn terug van een cirkel, een blauwe cirkel. 

Dus laten we meer cirkels. Hoe is dat? Laten we een andere cirkel. Dit is spannend, toch? 

Dus zeg ik gewoon Copy-geplakt wat we hadden al. Laten we het circle2. En laten we de exacte hetzelfde en geef het attributen, aangezien een x positie 300. Yay, we hebben nu twee cirkels. 

En natuurlijk, we konden actualiseert deze waarden. Ik kon het te zetten bij 400, en nu het beweegt. En omdat het is vervelend, laten we verwijderen, zodat circle2.remove. Het is nu weg. 

Dus wat we doen en is gewoon erg, very-- dit is zeer vergelijkbaar met wat je zou kunnen doen in jQuery, bijvoorbeeld. We zijn net manipuleren de DOM, het heet. Je zou dat woord eerder gehoord. Wij creëren spul, het instellen attributen op dingen, het verwijderen van spullen. 

Nu, hier is waar het interessant wordt. Dus later in de code, kunnen we nog steeds verwijzen naar de oorspronkelijke cirkel hier. Dus laten we haar attribuut teruggezet naar cx. Laten we zeggen, de x positie 400. En ik ga om de overgang dat, dus het is voor de hand liggend. Daar gaan we. 

Dus hebben we een cirkel toegevoegd. We zetten een aantal attributen. We voegden een andere cirkel, verwijderd. En dan zijn we modificeren de oorspronkelijke cirkel. 

Maar hier is waar het wordt een stuk interessanter. Niet alleen kunnen we stellen attributen als gewoon waarden, kunnen we zeggen, hey, cirkel, ga naar positie 200. We kunnen ze ook als functies. 

Dus in plaats van het geven van 400 hier, kunnen we een aantal berekeningen maken op de vlieg voor wat we wil dat attribuut te zijn. Dus dit is hoe je zou uitdrukken. Wij zeggen, in plaats van 400, laat me geven u een functie in plaats daarvan. En hier, in deze functie, kunnen we elke gek berekening te maken. 

We kunnen de tijd nemen en kijken naar iets anders en dynamisch beslissen de cirkel welke waarde we willen. Zullen we gewoon opgeven het een willekeurige x-positie? Dus dat is dat. 

Dus wat dat zegt is, voor elke x, lopen deze functie. En wat we doen is het berekenen sommige dingen, een willekeurige maal de breedte en terug te keren dat. Dus elke keer als we lopen dat, krijgen we een cirkel die gaat naar een willekeurige plaats. Het is wel cool. Ik voel me alsof ik kon kijken op dit voor een beetje. We beginnen te krijgen hier iets interessant. Laten we dit nu data driven. Er is geen data hier. Laten we dat veranderen. 

Act II, Data Driven Documents-- Dus laten we terugkeren naar hier. En laten we gewoon ontdoen van circle2, want we zijn gewoon het toevoegen en verwijderen het. Zodat we niet echt nodig hebben. We moeten hier een stuk slimmer zijn. Laten we zeggen, we hebben sommige gegevens van een soort. Eén moment-- laten we zeggen, hadden we gegevens van dit formulier. We hadden een array, net een bos van nummers. We hebben zeven nummers hier, wat deze represent-- hoeveelheid bij mensen bankrekening, hoe veel weegt ze, god weet wat. 

Deze getallen zijn, en we willen onze kringen gebruiken die aantallen andere manier vertegenwoordigen. We willen binden ons cirkels die nummers. Dus wat we doen. Laten we zeggen, we willen een cirkel voor elk nummer. We konden de oude doen ding waren we doing-- cirkel append en circle2 en circle3. Maar dit uit de hand loopt, en er is veel van het herhalen van de logica. 

Dus laten we slimmer met dat. In plaats van de var cirkel svg.append dat we gewoon waren gebruikt, we gaan gebruiken deze kleine blok hier. Ik wil niet gaan diepgaande in wat al deze onderdelen doen. En het is een soort van een geavanceerd onderwerp. En ik wou dat ik het kon. 

Maar het belangrijkste om te recognize-- en zie je heel vaak in D3 code. Dit blok tekst elementaire creëert zo veel kringen aangezien er gegevenselementen in deze array hier. Dus creëert zoveel kringen als er elementen. Het gaat om ons te maken zeven cirkels. En het doet een heel, heel belangrijk ding. Dus laten we lopen dat. Laten verwijderen onze andere cirkel. Laten we gewoon dit commentaar deel uit en opnieuw uitvoeren dit. 

Daar gaan we. Dus onze kring is hier een stuk donkerder, omdat we zeven cirkels, een bovenop de andere. We hebben zojuist zeven cirkels, één elk voor elk van deze gegevenselementen. Maar er is een belangrijk ding dat gebeurd met dit fragment hier. 

Het is dat de gegevens werd gebonden. Dus ieder van deze gegevenselementen 10, 45, 105, was gebonden een bijzondere categorie. Zodat deze niet alleen gemaakt een bos van cirkels maar stropdassen die twee dingen samen. 

En in de toekomst, omdat we gecreëerd die kringen met deze D3 functie, Als ik je een cirkel, je kan geef mij de gegevens die ermee verbonden zijn. Dus we kunnen vragen D3. Hey, D3, ik heb deze cirkel. Wat is de gegevens die de cirkel heeft? En D3 zou ons vertellen 10 of 45 of 105. 

Deze dingen zijn gebonden. Dat is een zeer, zeer fundamentele concept. Laten we eens kijken naar dat. 

Dus de manier waarop we zouden dus vraag D3-- Dit is relevant voor, maar geloof me op. Dit is hoe wij vragen D3. Hey, D3, geef mij de eerste cirkel die je kunt vinden. Geef me de eerste cirkel die u kunt vinden. En dan kunnen we D3 vragen, wat is de gegevens op dat, als dit, 10. 

Dus we gewoon vragen D3, vinden mij de eerste cirkel die u kunt vinden. Wat is haar gegevens? 10, dat inderdaad onze eerste gegevenselement. We kunnen het vragen, hey, D3, ons vinden onze derde cirkel. 105. Waarom is dit echt belangrijk? 

Dus hier, ik noemde we functies kunnen gebruiken. En ik zei dat was een zeer krachtig ding. Dus niet alleen kan onze functies dingen te doen zoals sommige berekeningen, bijvoorbeeld, retourneren een willekeurig getal, kan Ook gebaseerd op de gegevens doen. Dit is wat data driven documenten betekenen. Dat is wat D3 voor staat. 

Dus dit x postition-- plaats van gewoon te zeggen, alle cirkels, krijgen x-positie 200, we zou het een functie te geven. En hier kunnen we enkele berekening te maken. en d staat hier op zijn plaats voor de gegevens. Dus elke keer dat we hebben een cirkel, in principe, D3 deze zeven cirkels creëren. En voor elke 

cirkel, het gaat om te gaan, he, circle1 wat is je x-positie. Voorheen waren we altijd het beantwoorden van 200. Maar nu, elke keer D3 vraagt ons wat is je x-positie, het gaat om ons-- geven we die cirkel, dus we hebben de gegevens. Het zal ons de gegevens te geven en zeggen: wat wil je de expositie te zijn, op basis van die gegevens. 

Laten we gewoon terug de feitelijke gegevens. Dus als we deze draaien, dit geeft ons data driven documenten. De cirkels zijn gebaseerd in relatie position-- ze basen als functie van de gegevens. 

Dus voor de eerste cirkel, D3 zet een cirkel. En dan D3 ons vraagt, wat doen u wilt dat de expositie te zijn. En we gewoon zeggen, ongeacht de data is. Maak de expositie 10. 

Dan vraagt ​​het, wat wil je de blootstelling aan voor de tweede cirkel. En wij beantwoorden, 45. En wij, natuurlijk, kan maken hier enig rekenwerk. Ik vind dat die kringen zijn soort gepropt up. 

Dus vermenigvuldig het met 3, gegevens te vermenigvuldigen met 3. Onze kring ben net uitgebreid uit. Onze waarde werd verdrievoudigd. 

De cirkel is echt op de rand, dus laten we misschien soort van offset het. Laten we zeggen, met 20. Alsjeblieft. 

Dit is een data visualisatie. Het is een zeer basic één, maar dit geeft ons enig inzicht in onze data. Het vertelt ons dat, bijvoorbeeld, hebben we hebben een kleine cluster van elementen. En we hebben een grote uitschieter hier. Dit geeft ons wat informatie over de verdeling. 

Als we bijvoorbeeld veranderen de gegevens tot 150 hier en vernieuwen, onze visualisatie wordt veranderd. Dit document is data driven. 

Dus natuurlijk, al deze elementen, al deze eigenschappen hier kunnen we een functie te gebruiken, niet alleen de cijfers, niet alleen de x en y posities. Zo kunnen we een functie voor de kleur. Dus we zullen hetzelfde doen. We zullen het een functie te geven. 

En laten we zeggen, we konden hebben conditionals in onze functie. Deze functie kan worden honderd van regels lang. Het kan heel, heel ingewikkelde dingen te doen. 

Dus laten we hier een if-statement. Laten we zeggen, als onze gegevens minder dan 50, dat is wat drempel dat we geïnteresseerd zijn in een of andere reden. Laten we het groen. Anders laten we het rood. Hoe is dat? Nice. 

Dus onze data visualisatie begint om meer interessante informatie over te brengen op vele kanalen. Dus nu weten we een beetje over de verdeling. En we weten dat er een soort van afgesneden op 50 dat we geïnteresseerd zijn in. We weten dat er twee gegevenspunten beneden die drempel en de meeste hierboven. 

Dus als een laatste stap, deze gegevens hier het is zeer zeldzaam om dit te zien als dat. Dus laten we gaan het gewoon uit aan een variabele want dat is schoner, zoals deze. En dan gebruiken we die variabele hier. Het is precies hetzelfde. Het is gewoon een beetje schoner. 

Next up, Act III, Scales-- Dus een probleem rechts hier is, als we veranderen onze gegevens in dit 200 value-- als we veranderen naar 400 of iets en vernieuwen, dan is deze waarde ging gewoon offscreen. Dus onze logica hier van hoe we dat doen de tijden 3 en 20, om het uit te spreiden en dan offset het een beetje is echt onhandig. 

Wat betekenen deze cijfers betekenen? Ze zijn gewoon er hard gecodeerd. En ze zijn heel erg gebonden aan de gegevens. We willen een data-driven document. Wij willen een zeer flexibel document, dat gegeven data, past het en vertegenwoordigt het. 

Wat we eigenlijk nodig hebben is, dat we hebben deze reeks getallen 10. 45, 105. En dat willen we in kaart dat uit op de breedte, de volledige breedte in. Dus hebben we de reeks getallen gaande van 0 tot 100. En we hebben deze campus I gaat 20-700, in dit geval. 

We soort wilt toewijzen dat op. We willen schalen die op en dan gecompenseerd het een beetje. Het blijkt dat D3 heeft deze. Het heet een schaal. Dus laten we het gebruiken. 

De manier waarop works-- ik ga typt u deze op en leggen het dan. Dit is een schaal. Wat het zal doen is, zal het in kaart brengen waarden van 1 tot 200 op 20-600. Kunnen we controleren dat. We kunnen hier zien dat. 

Dus als ik voer het 1-- ene moment. Geef me een seconde. Ik moet het hebben typefout gemaakt. Daar ga je. Het spijt me dat. 

Dus wat een schaal zal doen wordt, zal het een waarde te nemen en zetten dan dat, uit te breiden dat uit, dus het vult het volledige scala je vraagt. Dus in dit geval, als we het één, het gaat om in kaart die uit op 20. En als we er 200, het is ga naar de kaart dat op tot 600. En ergens tussenin, als we 100, het is ga ergens zijn tussen 20 en 600. 

En natuurlijk, nu is dit wat we nodig hebben om die hard gecodeerd verwijderen dingen die we hebben daar. Dus wat we willen doen is neem de gegevens die we gegeven, dat individuele gegevens element, en door te geven aan de eerste schaal. Dus schaal zal het opschalen. 

Goed-- Oh, we hebben een beetje fout hier. We missen gegevens. Daar ga je. En dat breidt het uit. 

Dat geeft ons hetzelfde resultaat dat we eerder hadden, maar in plaats van de hard gecodeerd beperkingen. En als de grootte van onze canvas wijzigingen, bijvoorbeeld, als we willen dit over hebben 400 pixels en het squishes uit, we kunnen het over-- hebben kunnen we het uit te breiden, of we kan dit linkermarge te reduceren tot iets minder of meer dan 20. Deze cijfers, die hard gecodeerd getallen maken het nu zin ​​om ons. 

En konden we veel meer doen interessante dingen ook. Dus in plaats van een lineaire schaal, zouden we willen een schaal loggen. En dat zal ons een log schaal is. 

Dus nu onze schaal, in plaats van gewoon uitbreiding buiten dat bereik, het doet meer geavanceerde dingen. In plaats van deze reeks harde gecodeerd en in plaats van dat 600, wij zouden willen gewoon gebruik maken van de breedte, dus 20 de breedte minus 40, 2 keer de marge aan de andere kant. En dit maakt veel meer zin om iemand die zou kunnen kijken naar de code. 

Interessant is dat de weegschaal te krijgen zeer, zeer geavanceerde als goed. Ze doen veel interessante dingen. Dus schalen niet noodzakelijk om te werken gewoon met cijfers. Laten we een kleurenschaal. 

Dus ons assortiment kon be-- onze domein is 1 tot 200. Dat is de ingang ding. Maar we zouden willen in kaart uit groen naar rood, bijvoorbeeld. En nu, als we langs het 1, we gaan groen te krijgen. Als we geven 200, we krijgen rood. En als we langs het iets daar tussenin, het gaat om een ​​aantal mix van dat zijn, ergens op het verloop tussen groen en rood. 

En in plaats van het hebben van dit soort onhandig logica We hebben hier met de voorwaardelijk recht daar, we konden hebben something-- een lineaire schaal tussen die. Dus zouden we de schaal gebruiken we gewoon gecreëerd die we noemen kleur. En we zouden het eens te D, die is onze gegevenselement. En daar gaan we. We hebben een kleur schaal. 

Dus dit is mapping. Dus de uiterst links is volledig groen. Uiterst rechts is helemaal rood. En alles daar tussenin is een functie van d. We hebben een interessante visualisaties hier. Maar onze gegevens was een beetje saai. Laten we eens kijken wat we konden doen als we hadden meer interessante gegevens. 

Act IV, het werken met Data-- het eerste wat we willen doen om onze visualisatie interessanter is de data ergens anders heen. Het is erg onhandig om te hebben de gegevens die hier hard gecodeerd. En in het algemeen, zullen we vragen iemand andere voor gegevens. We zullen misschien moeten vragen van de overheid, het Census Bureau, wat is uw gegevens en dan plotten dat of vragen sommige van derden entiteit voor sommige gegevens en vervolgens bouwen van een visualisatie op dat. 

Dus het eerste wat we willen doen is verplaatst dat ergens anders. Dus ik ga een te creëren bestand hier genoemd data.json. JSON is het dataformaat. Je hoeft niet veel van weten. En we gaan het kopiëren weinig gegevens we daar hebben, plak het daar letterlijk, gaan terug naar onze visualisatie code hier, en gebruik deze functie hier. Je hoeft niet om de details te kennen. Maar wat dit zal doen is, het zal dat bestand te vinden, hem te halen, en terug te sturen naar ons. Dus wat dit doet is, het gaat en krijg de data.json bestand. En dan al de code dat is ingesprongen inside-- wezen, alle code die we hebben er-- zal draaien alleen als we de gegevens terug. En dan is het gaan lopen dat code met de gegevens die we hebben. Geweldig, we hebben een visualisatie die query voor sommige code ergens anders, die meestal waar het vraagt ​​een aantal gegevens uit ergens anders, gewoonlijk hoe visualisaties werken. 

Maar ik wil om terug te gaan naar de gegevens. Zodat de gegevens fundamenteel in D3-- D3 verbruikt data dat is een lijst van dingen. D3 verwacht dat de gegevens alleen een lijst te zijn van de dingen, een scala aan dingen. Het maakt niet uit wat die dingen zijn, zolang het een array van. 

Dus hier, bijvoorbeeld, konden we van Natuurlijk hebben floating point waarden. We konden negatieven hebben. D3 maakt het niet uit, zo lang want het is een lijst van dingen. 

Zoals interessante dingen die we zou kunnen hebben, kunnen we ook hebben een lijst van strings als dat. Dus dit zijn de Crimson headlines Ik pakte een paar dagen geleden. En misschien vindt u een aantal interessante dingen over deze een krantenkoppen. 

Dus nogmaals, dit is een lijst van dingen. D3 niet schelen. Deze toevallig een string zijn. We hebben onze data veranderd. 

Laten we terugkeren naar onze visualisatie. Nu, onze visualisatie verwacht de-input nummers. Dus we gaan te hebben om een ​​paar veranderingen aan te brengen. Dus bijvoorbeeld, allereerst, misschien we willen deze kringen samen zetten door de lengte van de kop, de aantal tekens in de kop. 

Dus wat we is-- doen elke keer onze functie wordt aangeroepen met een string, we vinden het is de lengte en overgaan dan is dat op schaal. De kleur, ik zal terugkeren dat tot staalblauw. En daar gaan we. We hebben een visualisatie van Crimson krantenkoppen. 

Onze schaalgrootte is een beetje uit. Laten we aannemen dat het langst kop is 100 karakters lang, zo overspannen dat een beetje. En we hebben een visualisatie. Dus het lijkt erop dat de meeste krantenkoppen zijn vrij dicht bij elkaar, in termen van karakter lijn. Maar men is er echt opvalt. 

We konden een aantal tools te bouwen om te ontdekken dat er meer. Maar toen ik bezig was met dit, ik was benieuwd of, in deze dataset, krantenkoppen met een dubbele punt in hen langer. Ik veronderstelt dat ze dat zou doen. 

Dus laten we uitzoeken. Laten we gebruik maken van de kleur kanaal zoals we deden voor, om wat over de vraag of te coderen er is een dubbele punt of nee. Dus zullen we weer gebruik maken van een voorwaardelijk. Je hoeft niet te weten de details van deze, maar dit is hoe we een controle op een string voor een bepaald teken in JavaScript, nogmaals, niet relevant. 

Maar als we niet vinden van een colon, we groen terug. En als we dat doen, zullen we rode terugkeren. Dus nogmaals, kopt dat hebben een dubbele punt rood. Dit is wat dit means-- leuk. 

Dus het lijkt erop dat mijn hypothese wordt gestoten. Er zijn maar twee. We hebben slechts zes datapunten en slechts twee hadden dubbele punten. Maar het lijkt een beetje meer op de onderkant, in feite. Krantenkoppen met dubbele punten lijken algemeen korter, althans in onze data set-- interessant. 

Laten we terugkeren die aan staalblauw en dan zien wat we kunnen maken met nog interessanter data. Dus nogmaals, ik dat genoemd gegevens in D3 is een lijst van dingen. We hebben aantallen verschillende types gezien. We hebben strings gezien. Maar de dingen kunnen ook objecten. 

Ze kunnen ingewikkelde dingen dat een heleboel dingen op te nemen. Om duidelijker te zeggen dat, In de meeste gevallen, we willen elk datapunt te bouwen als ingewikkelder dan alleen maar één waarde. Als je zou denken een database over studenten, er kan een student te noemen, een student-ID, en een heleboel dingen geassocieerd met een bepaald record, niet alleen een string of een nummer. Dus laten we eens kijken naar dat. 

Dit is een set die gegevens. Dit is een dataset aardbevingen. Dus alles hier op onze lijst of matrix dingen bevat veel dingen zelf. Dus elke gegevens punt een magnitude en een coördinaat. En coördineert zelf bevatten twee dingen. 

Dus elke dag is nu een stuk meer ingewikkeld en een stuk interessanter en bevat veel meer interessante informatie. Laten we eens kijken we uit die zou kunnen bouwen. Terugkerend naar hier opnieuw met onze histogram cirkel visualisatie we hebben opgebouwd, laten we eens kijken of we een kunnen bouwen visualisatie van grootte distributie in onze dataset. 

Dus hier, het is hetzelfde concept. Maar nu, d bevat meer dingen. d bevat veel data-elementen. Dus we krijgen d rug. D3 geeft ons d. En we reageren door het vinden van de omvang van d en dan doorgeven dat op schaal. 

En dan moeten we veranderen onze schaal, natuurlijk. Dus magnitudes gewoon niet gaan veel meer dan 10. Eigenlijk is er nooit geweest 10 magnitude aardbeving. Maar dat is een soort van onze bovenste Daartoe onze bovenste spectrum. 

Laten we vernieuwen. Nice, hebben we een visualisatie. Het is interessant om zo note-- Er zijn twee datapunten vrijwel exact op elkaar andere, in termen van grootte. Je ziet dit door de ondoorzichtigheid we gebruiken. 

We hebben nu geografische gegevens. We hebben lengte- en breedtegraad. Misschien kunnen we iets een doen veel interessanter met dat. Laten we eens wat meer interessante manier om te visualiseren dit ingewikkelder gegevens hebben we toegang tot. 

Act V, Mapping-- fundamenteel, willen we deze op een kaart te zetten. Ik bedoel, dit is waar dit naartoe gaat. We willen informatie over het coderen positie van deze aardbeving lezingen, alsook hun omvang, want we hebben dat nu. Wij begrijpen hoe om te consumeren ingewikkelder data. 

Het eerste wat we doen is maak een kaart, een achtergrond kaart. Ik ga om te gaan door dit zeer snel. Dit is lastig code. Het is weer een van die recepten je echt niet hebben om volledig te begrijpen voor u te gebruiken. Maar dit is de code. Deze code hier creëert een kaart. 

We zijn niet van plan om te gaan in detail. Maar oppervlakkig, wat het doet is, het op deze us.json bestand, vragen die is een gegevensbestand zoals degene die we eerder hadden. Het is ingewikkelder, natuurlijk. Maar in dit geval, alles, elk datapunt is deze toestand en heeft een lijst van lengte- en breedtegraad dat de veelhoek definiëren die vorm, die staat. 

Dus wat D3 zal doen, is vergelijkbaar aan wat we deden voor. Het zal verzoeken en binden die een element. En er is een functie die zal in kaart dat element uit, op basis van de lengte- en breedtegraad. U kunt meer op die te lezen. En ik raad het. 

Er zijn links aan de einde van deze code geplaatst. En de code wordt gereageerd. In zijn er links voor meer over dit. Ik raad je het op te zoeken. Maar wat we de zorg over is deze projectie functie. Ik wil om te gaan door dat. 

Allereerst, laat me zien je dat, ja, we hebben een kaart. Kaarten zijn cool. Dus laten we eens kijken naar deze productiefunctie. 

Projectie is heel erg zoals een schaal, schalen opnieuw. Dus wat de productie voor deze projectie functie doet is, konden we het passeren lengte en latitudes-- in dit geval, deze waarden hier zijn de lat-longs van het gebouw we zitten in de juiste now-- tot projectie. En projectie zal omzetten dat in x en y pixelwaarden. 

Dus wat projectie doet is zeer vergelijkbaar met onze schaal. Het neemt onze contreien en lengtegraad dat er een hele wereld vertegenwoordigt en krimpen en dimensionering dat neer op het plein die we willen, dat we het hebben gegeven. In dit geval zijn we het passeren van deze waarden. En het geeft ons, nou, dat op uw scherm betekent 640 pixels. Dit hele scherm is 700 pixels breed, dus dat maakt ons over hier, en 154 pixels naar beneden, wat ik zou doen schatting is vrij veel hier. 

Dus het nemen van die lat-longs, die iets op de hele aardbol te vertegenwoordigen en squishing en bewegen die rond ons x en y pixel waarden geven dit is het eerste ding dat is gedaan in deze mapping code. En dan de rest van de code verbruikt de gegevens en dan kaarten die lat-longs op iets op uw scherm. 

Maar we gaan deze projectie gebruiken functies, omdat het blijkt we hebben lat-longs longs ook. Terugkijkend op onze data, hebben we lengte- en breedtegraden voor elke waarneming. Dus laten we gebruik projectie. 

Dus kijken naar onze expositie, we willen dat onze exposition-- hebben we een breedtegraad en een lengtegraad. Maar we willen pixelwaarden. En het blijkt, hebben we precies wat we want-- projectie. Heel erg als we waren met behulp van schaal hier, we gaan nu projectie gebruiken en doorgeven coördineert. Dus het eerste wat we doing-- dus we zijn krijgen d, die een individuele gegevens element van een individuele aardbeving lezing. Het eerste wat we doen is krijgen de coördinaten. Oké, we hebben de coördinaten. 

Het tweede wat we doen is doorgeven aan projectie. Projectie zet die coördinaten in pixelwaarden, x en y. En dan is het laatste wat we wilt doen is gewoon de x, welk dit geval is de eerste. Het is de eerste van de twee dingen die worden geretourneerd door projectie. 

We zullen hetzelfde doen voor y. Maar in plaats daarvan, zullen we terugkeren het tweede element, de y. Maak je klaar om te vernieuwen. Ooh, extra karakter hier-- leuk, we hebben een data-driven document dat is verbergen van deze JSON bestand van objecten, maken van een kaart, en wijzigen attribuut met betrekking tot de gegevens te projecteren op een kaart. Dit is echt interessant. Dit is cool. 

Laten we het op een inkeping. Ik bedoel, we hebben twee stukken informatie bij elk meetpunt. Ik bedoel, drie. We hebben de coördinaten, die een x en y. En we hebben de omvang. 

We moeten de omvang of andere manier te coderen. We hebben veel kanalen. We kunnen kleur te gebruiken. We kunnen gebruiken radius. We konden ondoorzichtigheid gebruiken. We kunnen veel dingen gebruiken in de code. Elk van deze eigenschappen en vele meer die er niet zijn vermeld, omdat ze optioneel, konden we gebruiken om deze gegevens te coderen, de slag en al deze dingen die ik heb genoemd. 

Laten we het doen straal. Ik denk straal is de meest intuïtieve. Dus nogmaals, zullen we vervangen dat hard-coded 40 en maken een aantal berekeningen. We zullen onze favoriete schaal opnieuw gebruiken. En we zijn verleden d. Maar niet d, omdat we willen dat de magnitude van d. d is gewoon de gegevens punt. We zullen passeren de magnitude op schaal. 

Laten we dat nog eens proberen. Ooh, het werkt niet. Waarom werkt het niet? 

Dus niet vergeten welke schaal doet. Laten we eens kijken naar schaal weer. Schaalkaarten van 1 tot 10 op tot 22-600, meer of minder. 600 is enorm. Dit is de reden waarom we krijgen dit. 

Dus willen we onze schaal te veranderen om iets meer redelijk. Laten we zeggen, we willen 0-60. 60 is groot, maar 10 aardbevingen zijn ongelooflijk zeldzaam. In feite, hebben ze nog nooit gebeurd. 

Dus wat dit zal doen is, neem het onze omvang die gaat van 1 tot 10 en de kaart te zetten op om het uit te breiden. En de kaart te zetten naar 0-60. Laten we vernieuwen. 

Nice, hebben we een visualisatie. Dit is geweldig. Dit is feitelijke gegevens. U zult merken, in mijn kleine speelgoed Bijvoorbeeld, de grootste aardbeving is recht op de top van ons. Maar dat is het. We hebben een datum gedreven visualisatie dat de data verbruikt en geeft ons echt interessante informatie. Ja, laten we nog wat interactiviteit aan. Ik heb gezegd dat was de sterke kracht van de D3. 

Dus hier, voor elk element, we zijn het beschrijven van een bos van attributen. Maar we kunnen ook beschrijven wat we willen te gebeuren met interactiviteit elementen. Zo kunnen we beschrijven wat gebeurt er als we de muis over. En zeer vergelijkbaar dat, dat zal een functie te nemen, vergelijkbaar met de attributen we eerder hadden, waar we iets doen om de element wanneer we zweven over het. 

Dus eerste wat we moeten doen is kiezen dat element, het principe, in het browser. en dan kunnen we stellen een attribuut aan. Dus wat ik hier aan het doen is, wanneer we zweven over iets, zullen we dat element te krijgen en stel vervolgens de dekking terug 1, volledig ondoorzichtig. Laten we eens kijken hoe dat eruit ziet. 

Het lijkt erop dat we hebben een extra puntkomma hier. Dus als we hier zweven, het wordt vol. Maar nu natuurlijk, blijft vol, omdat we hebben om te beschrijven wat er gebeurt wanneer verwijder onze cursor. Dus laten we precies doen dat op mouseout, in tegenstelling tot mouseover. 

En we zullen het te resetten wat we hadden before-- 0.5. En nu, elke keer als we hover, krijgen we een volledige cirkel. Het helpt ons zien wat we we wezen selecteren. 

En nu laten we maken dit echt geweldig. Laten we dit verbinden met echte data. Dus laten we vragen konden USGS over hun gegevens. Dus de US Geological Survey heeft gegevens over aardbevingen. Ze hebben een publieke API die in staat is worden geconsumeerd JSON formaat. Dus laten we dat doen. 

Dus dit is een stukje code dat verbinding meetstations API. En er is een beetje van de verwerking op. Dit is niet relevant, maar vereenvoudigt het een eenvoudig dataformaat als degene we hadden eerder. Dus ik te ontdoen van onze oproep om onze nep data.json in ons bestand. En in plaats daarvan, ik bel de USGS wezen. 

Laten we vernieuwen, nice. Dit is de werkelijke, real-life data vanaf deze week voor aardbevingen. Dit is echt interessant. Dit is niet verwonderlijk voor ons, maar er zijn veel aardbevingen op de West Coast in Californië. Maar ik dacht dat het was erg interessant dat er zo veel aardbevingen in Alaska, en blijkbaar, hier in de Midwest. Ik bedoel, interessant, en we zijn goed. Dat is de conclusie. 

Maar fundamenteel, dit is wat D3 helpt ons doen. Het helpt ons de gegevens te nemen, te binden aan elementen in de DOM, en hebben die elementen veranderen als functie van de gegevens, hebben deze attributen, alle vele eigenschappen van de elementen, alle nuttig voor kanalen om informatie over te brengen. 

D3 is een ongelooflijk krachtige bibliotheek en verbazingwekkend goed uit te voeren. Dit is een krachtig spul. Data visualisatie is een ongelooflijk krachtige tool voor het transport van mensen diep inzichten die krijgt om hun core en helpt hen te begrijpen, in deze diepgaande en intuïtieve manier, hoe gegevens werkt en hoe data verandert ons leven.