[MUSIK SPELA] 

DAVID Chouinard: Jag är David Chouinard, och detta är D3. Välkommen. Vi kommer att lära sig om D3 idag. D3 är en JavaScript ramverk för att bygga en hög kvalitet interaktiva visualiseringar för webben. Saker som vad vi är ser i baksidan av mig, vi kommer att lära sig att göra dem saker, typ av grunderna i det. Men det kommer att vara cool. Låt oss komma igång gör vackra bilder. Vi har fler demos av utsikterna tillgängliga. Låt oss göra det. 

Akt I, DOM manipulation-- vi ska att börja direkt göra coola saker. Först av allt, på vänster sida, har vi kod. Till höger har vi resultatet av vår kod. Låt oss gå igenom det. 

Låt oss göra en cirkel. Hur låter det? svg.append circle-- Vi gjorde bara en cirkel. Du behöver inte tro mig, eller hur? Det är inte där. 

Så vad vi gjorde just här är, SVG är skalbar vektorgrafik. Detta är vårt sätt att tala om för webbläsaren att göra vektorgrafik i webbläsaren. Vad vi gjorde precis just nu läggs en cirkel för att bläddra. 

Löftet är att cirkeln kräver lite grundläggande attribut innan vi faktiskt kan se det. Vi måste tala om det dess x läge, dess y läge, dess radie. Vi talade inte om det något av det, så vi inte ser det just nu. Men låt oss säga det grejer. 

Så först av allt, har du fått att ge vår krets ett namn. Så låt oss kalla det cirkel. Vår cirkel har ett namn nu. Och låt oss ge det några attribut. Vad sägs om cx skulle centrera x, så mitten av x-position. Låt oss säga, 200 för 200 pixlar. 

Låt oss ge det ett y på 200 pixlar samt. Och en r, en radie av ca 40 pixlar. Nu ska vi se. Jag kan inte stava. 

Där du går. Vi har en cirkel vid position 200 pixlar, 200 pixlar, radie av 40 pixlar. Typ av cool, eller hur? Vi har en cirkel. Yeah. 

Så ingen anledning att följa med. Alla dessa exempel är alla av koden jag gör idag kommer att tillhandahållas på nätet i slutet i form av interaktiva exempel med kontrollpunkter på varje handling, och så vidare. 

Låt oss göra mer saker. Denna svarta cirkeln är verkligen ful. Jag är ledsen för att fel meddelanden just där. Det går vi. 

Låt oss ge det en färg. Hur är det? Jag gillar att stålblå. Tja, vår krets ändrat färg. Det är bra. Låt oss göra det halvgenomskinliga too-- halvtransparent. 

Så dessa är attribut vi definierar på cirkeln. Det första vi gjorde är vi sätta en cirkel på sidan. Och sedan är vi definiera ett gäng attribut. Vissa av dessa är obligatoriska, gillar CX, CY och Radius. Och andra är valfria. 

Det finns många fler attribut. Det finns en hel del av dem. Till exempel kan vi ha en stroke också, en stroke av rött. Men låt oss ta det. Vi är tillbaka till en cirkel, en blå cirkel. 

Så låt oss göra fler cirklar. Hur är det? Låt oss göra en annan cirkel. Detta är spännande, eller hur? 

Så säger jag bara Copy-Klistras vad vi hade redan. Låt oss kalla det circle2. Och låt oss göra det exakta samma sak och ge den attribut, givet en x-position 300. Yay, har vi två cirklar nu. 

Och naturligtvis, vi kunde uppdatera dessa värden. Jag skulle kunna sätta den på 400, och nu flyttar. Och eftersom det är irriterande, låt oss ta bort det, så circle2.remove. Det är borta nu. 

Så vad vi gör och är bara väldigt, very-- här är mycket likt det du kan göra i jQuery, till exempel. Vi har precis manipulera DOM, det kallas. Du kanske har hört det ordet förut. Vi skapar saker, inställning attribut på saker, ta bort saker. 

Nu är här där det blir intressant. Så senare i koden, vi kan fortfarande hänvisa till den ursprungliga cirkeln här. Så låt oss återställa dess attribut till cx. Låt oss säga, dess x-position till 400. Och jag kommer att övergå att, så det är självklart. Det går vi. 

Så vi lagt till en cirkel. Vi satt några attribut. Vi lade en annan cirkel, tog bort den. Och sedan är vi modifiera den ursprungliga cirkeln. 

Men här är där det blir mycket mer intressant. Inte bara kan vi ställa attribut som bara värden, kan vi säga, hey, cirkel, gå till position 200. Vi kan också ställa dem som funktioner. 

Så istället för att ge 400 här, vi kan göra några beräkningar i farten för vad vi vill att attributet ska vara. Så detta är hur du skulle uttrycka det. Vi säger, i stället för 400, låt mig ge dig en funktion istället. Och här, i denna funktion, vi kan göra någon galen beräkning. 

Vi kan ta tid och titta på några andra sak och dynamiskt bestämma cirkeln vilket värde vi vill. Vad sägs om att vi ger bara det en slumpmässig x-position? Så det är det. 

Så vad som säger är, för varje x, kör denna funktion. Och vad vi gör är att beräkna vissa saker, en slumpmässig gånger bredden och returnera det. Så varje gång vi kör det, vi får en cirkel som går till en slumpmässig plats. Det är ganska häftigt. Jag känner att jag skulle kunna se Detta för lite. Vi börjar komma till något intressant här. Låt oss göra detta data driven nu. Det finns ingen data här. Låt oss ändra på det. 

Act II, Data Driven Documents-- Så låt oss gå tillbaka till hit. Och låt oss bara bli av circle2, eftersom vi bara lägga till och ta bort det. Så gör vi inte verkligen behöver det. Vi måste vara mycket mer smart här. Låt oss säga, vi har vissa uppgifter av något slag. Man moment-- låt oss säga, Vi hade uppgifter i detta formulär. Vi hade en matris, precis en massa siffror. Vi har sju siffror här, oavsett dessa represent-- belopp i människors bankkonto, hur mycket de väger, Gud vet vad. 

Dessa är siffror, och vi vill använda våra cirklar att representera dessa siffror på något sätt. Vi vill knyta vår cirklar till dessa siffror. Så vad vi gör. Låt oss säga, vi vill ha en cirkel för varje nummer. Vi kunde göra den gamla sak vi doing-- cirkel append och circle2 och circle3. Men detta spårar ur, och det finns en hel del att upprepa logik. 

Så låt oss få mer smart med det. Istället för att använda var cirkeln svg.append att vi bara använde, vi kommer att använda denna lilla blocket här. Jag vill inte gå på djupet i vad alla dessa delar gör. Och det är typ av en avancerad ämne. Och jag önskar att jag kunde. 

Men det viktigaste att recognize-- och du ser mycket ofta i D3-kod. Denna textblock grundläggande skapar så många cirklar som det finns dataelement i denna array här. Så detta skapar så många cirklar som det finns element. Det kommer att skapa oss sju cirklar. Och det gör en riktigt, riktigt viktig sak. Så låt oss köra den. Låt oss ta bort vår andra cirkeln. Låt oss bara kommentera del ut och köra igen. 

Det går vi. Så vår cirkel här är en mycket mörkare, eftersom vi har sju cirklar, en ovanpå den andra. Vi skapade bara sju cirklar, en vardera för var och en av dessa dataelement. Men det finns en viktig sak som hände med denna snutt här. 

Det är att data var bunden. Så varenda en av dessa dataelement, 10, 45, 105, var bunden till en viss cirkel. Så dessa inte bara skapat ett gäng cirklar men knyter dessa två saker tillsammans. 

Och i framtiden, eftersom vi skapade dessa kretsar med denna D3 funktion, om jag ger dig en cirkel, kan du ge mig de uppgifter som är förknippade med den. Så vi kan be D3. Hej, D3, jag har denna cirkel. Vad är de data som cirkeln har? Och D3 skulle berätta 10 eller 45 eller 105. 

Dessa saker är bundna. Det är en väldigt, väldigt grundläggande begrepp. Låt oss titta på det. 

Så hur vi skulle ställa D3-- så detta är irrelevant för detta, men bara lita på mig om det. Det är så vi ber D3. Hej, D3, ge mig den första cirkel som du kan hitta. Ge mig den första cirkeln du kan hitta. Och då kan vi be D3, vad är data på den, som den här, 10. 

Så vi bara be D3, hitta mig den första cirkeln du kan hitta. Vad är dess data? 10, är ​​det verkligen vår första dataelement. Vi kan fråga det, hey, D3, hitta oss vår tredje cirkeln. 105. Varför är detta verkligen viktigt? 

Så just här, nämnde jag att vi skulle kunna använda funktionerna. Och jag nämnde det var en mycket kraftfull sak. Så inte bara kan våra funktioner gör saker som gör vissa beräkningar, till exempel, returnera ett slumptal, det kan också göra saker som bygger på data. Detta är vad data driven dokument betyder. Det är vad D3 står för. 

Så detta x postition-- istället för att bara säga, alla cirklar, få x ställning 200, vi skulle kunna ge det en funktion. Och här kan vi göra några beräkningar. och d står här på plats för data. Så varje gång vi har en cirkel, i princip, D3 kommer att skapa dessa sju cirklar. Och sedan för varje 

cirkel, det kommer att gå, hej, circle1 vad är din x-position. Tidigare var vi alltid svara 200. Men nu, frågar varje gång D3 vad är din X-position, det kommer att ge oss-- vi har den cirkeln, så vi har data. Det kommer att ge oss uppgifter och säga, vad vill du utläggningen vara, baserat på dessa data. 

Låt oss bara tillbaka de faktiska uppgifter. Så om vi kör detta, ger detta us data driven dokument. Dessa cirklar är baserade i förhållande position-- de är baser som en funktion av data. 

Så för den första cirkeln, D3 sätter en cirkel. Och sedan D3 frågar oss, vad gör du vill att utläggningen vara. Och vi bara säga, oavsett data. Gör verkstadshandboken 10. 

Då frågar, vad vill du att utläggning att vara för den andra cirkeln. Och vi svarar, 45. Och vi, naturligtvis, kan göra några beräkningar här. Jag tycker att dessa cirklar är typ av mosade upp. 

Så multiplicera det med 3, multiplicera data genom 3. Vår cirkel fick just utökats ut. Vår värdet tredubblats. 

Cirkeln är verkligen på kanten, så låt oss kanske slags kompensera det. Låt oss säga, med 20. Här har du. 

Detta är en datavisualisering. Det är en mycket grundläggande, men det ger oss en inblick i våra data. Det säger oss att, till exempel, vi har en liten kluster av element. Och vi har en stor avvikare här. Detta ger oss en del information om fördelningen. 

Om vi ​​till exempel vill ändra data till 150 här och uppdatera, vår visualisering ändras. Detta dokument är data driven. 

Så naturligtvis, alla dessa element, alla dessa attribut här, vi kan använda en funktion, inte bara siffror, inte bara x- och y-positioner. Så vi kan använda en funktion för färgen. Så vi ska göra detsamma. Vi ska ge det en funktion. 

Och låt oss säga, vi skulle kunna ha villkors i vår funktion. Denna funktion kan vara hundra rader långa. Det kan göra mycket, mycket komplicerade saker. 

Så låt oss sätta en if-sats här. Låt oss säga, om vår data är mindre än 50, det är en del tröskel att vi är intresserade in av någon anledning. Låt oss göra det grönt. Annars, låt oss göra det rött. Hur är det? Nice. 

Så vår datavisualisering börjar att förmedla mer intressant information på många kanaler. Så nu vet vi lite om fördelningen. Och vi vet att det finns någon form av avskurna vid 50 som vi är intresserade av. Vi vet att det finns två datapunkter under denna tröskel, och de flesta av dem ovan. 

Så som ett sista steg, denna data här, det är mycket ovanligt att se detta viset. Så låt oss bara flytta ut den till en variabel eftersom det är renare, som den här. Och sedan använder vi den variabeln här. Det är exakt samma sak. Det är bara lite renare. 

Nästa upp, Act III, Scales-- Så ett problem rätt här är, om vi ändrar vårt data i denna 200 value-- om vi ändrar det till 400 eller något och uppdatera, då detta värde bara gick utanför skärmen. Så vår logik här hur vi gör tiderna 3 och 20, för att sprida ut det och sedan offset det lite är riktigt otymplig. 

Vad gör dessa siffror betyder? De är bara hårt kodad där. Och de är mycket bunden till uppgifterna. Vi vill ha en datadriven dokument. Vi vill ha en mycket flexibel dokument, att givna data, anpassar sig till det och representerar den. 

Vad vi i grunden behöver är, vi har denna nummerserie 10. 45, 105. Och vi vill mappa det ut på bredden, hela bredden här. Så vi har intervallet nummer som går från 0 till 100. Och vi har denna campus I går 20-700, i det här fallet. 

Vi vill slags att kart det på. Vi vill att skala upp det och då kompensera det lite. Det visar sig att D3 har dessa. Det kallas en skala. Så låt oss använda den. 

Det sätt som works-- jag ska skriver detta upp och sedan förklara det. Detta är en skala. Vad det kommer att göra är, kommer det att kartlägga värden från 1 till 200 om till 20-600. Vi kan kontrollera det. Vi kan se att här. 

Så om jag matar den 1-- ett ögonblick. Ge mig en sekund. Jag måste ha stavat fel det. Där du går. Jag är ledsen för det. 

Så vad en skala kommer att göra är, kommer det att ta ett värde och sedan omvandla det, expandera ut det, så det fyller hela skalan du frågar efter. Så i det här fallet, om vi ger det en, det kommer att kart att ut på 20. Och om vi ger det 200, är ​​det kommer att kart det på till 600. Och någonstans däremellan, om vi får 100, är ​​det kommer att vara någonstans mellan 20 och 600. 

Och naturligtvis, det är nu vad Vi måste ta bort dessa hårdkodat saker vi har rätt där. Så vad vi vill göra är att ta de data som vi är givet, att enskilda uppgifter element, och ge det att skala först. Så skala skalas upp. 

Well-- Åh, vi har en liten fel här. Vi saknade uppgifter. Där du går. Och som expanderar ut. 

Det ger oss samma Resultatet vi hade tidigare, men istället för att ha de hårdkodad begränsningar. Och om storleken på vår duk förändringar, till exempel, om vi vill ha detta över 400 pixlar och det squishes ut, Vi kan ha det over-- Vi kan utöka det, eller vi kan minska denna vänster marginal till något mindre eller mer än 20. Dessa siffror, dessa hårt kodad siffror nu vettigt för oss. 

Och vi kan göra mycket mer intressanta saker också. Så i stället för att ha en linjär skala, kanske vi vill logga en skala. Och det kommer att ge oss en logaritmisk skala. 

Så nu vår skala, i stället för bara expanderar ut det intervallet, det gör mer avancerade saker. Istället för att ha detta intervall hårt kodade, och istället för att ha det 600, vi kanske vill bara använda bredden, så från 20 till bredden minus 40, 2 gånger marginalen på den andra sidan. Och detta gör mycket mer meningsfullt att någon som kan titta på koden. 

Intressant vågen får mycket, mycket sofistikerad också. De gör en hel del intressanta saker. Så vågar inte nödvändigtvis att arbeta bara med siffror. Låt oss göra en färgskala. 

Så vårt sortiment kan be-- vår domän är 1 till 200. Det är ingångs sak. Men vi kanske vill mappa från grönt till rött, till exempel. Och nu, om vi passerar den 1, Vi kommer att få grönt. Om vi ​​ger det 200, får vi rött. Och om vi passerar det något däremellan, det kommer att bli någon blandning av det, någonstans på lutningen mellan grönt och rött. 

Och istället för att ha denna typ av clunky logik vi har här med korad rätt där, Vi skulle kunna ha something-- en linjär skala mellan dem. Så vi skulle använda skalan vi bara skapat, som vi kallade färg. Och vi skulle ge det D, vilket är vår dataelement. Och där går vi. Vi har en färgskala. 

Så det här är kartläggning. Så längst till vänster är helt grön. Den längst till höger är helt röd. Och allt däremellan är en funktion av d. Vi har en intressant visualiseringar här. Men våra data var ganska tråkigt. Låt oss se vad vi kunde göra om vi hade mer intressanta uppgifter. 

Act IV, Arbeta med Data-- det första vi vill göra för att göra vår visualisering mer intressant är att flytta data någon annanstans. Det är väldigt otymplig att ha data hårdkodade här. Och generellt, vi kommer att fråga någon annan för data. Vi ska kanske be regeringen, Census Bureau, vad är dina data och sedan plotta det eller frågar några tredjeparts enhet för vissa uppgifter och sedan bygga en visualisering på det. 

Så det första vi vill göra är att flytta det till någon annanstans. Så jag kommer att skapa en fil här kallas data.json. JSON är dataformatet. Du behöver inte veta mycket om det. Och vi kommer att kopiera lite uppgifter vi har där, klistra in den i det ordagrant, gå tillbaka till vår visualisering kod här, och använda denna funktion här. Du behöver inte känna till detaljer. Men vad detta kommer att göra är, Det kommer att tycka att filen, hämta den och returnera den till oss. Så vad detta innebär är, det går och få data.json filen. Och sedan all kod som är indragen inside-- väsentligen, all kod vi har there-- kommer kör bara när vi får tillbaka data. Och då det kommer att köra den kod med de data vi har. Stor, vi har en visualisering som frågar för lite kod någonstans annat, som vanligtvis är där den frågar en del data från någon annanstans, som vanligtvis är hur visualiseringar fungerar. 

Men jag vill gå tillbaka till data. Så de uppgifter i grunden i D3-- D3 förbrukar data som är en lista över saker. D3 förväntar datan bara vara en lista av saker, en mängd saker. Det spelar ingen roll vad dessa saker är, så länge det är en samling av dem. 

Så här, till exempel, kan vi av Naturligtvis har flyttalsvärden. Vi skulle kunna ha negativ. D3 bryr sig inte, så länge eftersom det är en lista över saker. 

Som intressanta saker vi skulle kunna ha, vi kunde också har en lista med strängar som. Så dessa är de Crimson rubriker Jag plockade upp ett par dagar sedan. Och kanske kan du hitta några intressanta saker om dessa a rubriker. 

Så återigen, detta är en lista över saker. D3 bryr sig inte. Dessa råkar vara en sträng. Vi har ändrat våra data. 

Låt oss återvända till vår visualisering. Nu förväntar sig vår visualisering ingången att vara nummer. Så vi kommer att ha att göra några ändringar. Så till exempel, först av allt, kanske Vi vill sätta dessa cirklar längs av längden på rubriken, den antal tecken i rubriken. 

Så vad vi ska göra är-- varje gång vår funktionen anropas med ett snöre, Vi hittar det är längd och sedan vidarebefordra det till skalan. Färgen kommer jag tillbaka att till stålblå. Och där går vi. Vi har en visualisering av Crimson rubriker. 

Vår skalan är lite off. Låt oss anta att den längsta rubrik är 100 tecken lång, så spänner det ut lite. Och vi har en visualisering. Så det verkar som de flesta rubriker är ganska nära varandra, i termer av teckenraden. Men en det verkligen sticker ut. 

Vi kunde bygga några verktyg att utforska det mer. Men när jag arbetade med detta, var jag nyfiken om det i denna datauppsättning, rubriker med ett kolon i dem skulle vara längre. Jag antar att de skulle. 

Så låt oss ta reda på. Låt oss använda färgen kanal som vi gjorde förut, att koda lite om huruvida det finns ett kolon eller ingen. Så vi kommer att använda ett villkor igen. Du behöver inte veta detaljerna i detta, men detta är hur vi kontrollerar en sträng för ett visst tecken i JavaScript, återigen, inte relevant. 

Men om vi inte hittar en kolon, kommer vi tillbaka grönt. Och om vi gör det kommer vi tillbaka rött. Så återigen, rubriker som har ett kolon blir röd. Detta är vad detta means-- trevligt. 

Så det verkar som min hypotes stötte. Det finns bara två. Vi har bara sex datapunkter och endast två hade kolon. Men det verkar lite mer på den nedre änden, i själva verket. Rubriker med kolon verkar att i allmänhet vara kortare, åtminstone i våra data set-- intressant. 

Låt oss återvända till att till stålblå och sedan se vad vi kan göra med ens mer intressanta uppgifter. Så återigen, nämnde jag att data i D3 är en lista över saker. Vi har sett antal många typer. Vi har sett strängar. Men de saker kan också vara föremål. 

De kan vara komplicerade saker som inkluderar en massa saker. Att säga att tydligare, i de flesta fall, vi vill bygga varje datapunkt som mer komplicerat än bara ett värde. Om du skulle föreställa sig en databas om studenter, det kan finnas en elev namn, en student-ID, och en hel del saker i samband med en viss post, inte bara en sträng eller ett nummer. Så låt oss titta på det. 

Detta är en sådan datauppsättningen. Detta är en datamängd om jordbävningar. Så allt här på vår lista eller matris saker innehåller många saker själv. Så varje datapunkt har en magnitud och en koordinat. Och samordnar själva innehåller två saker. 

Så varje dag är nu en mycket mer komplicerat och mycket mer intressant och innehåller mycket mer intressant information. Låt oss se att vi kunde bygga ut det. Återvända tillbaka till här, återigen, med användning av vår histogram cirkel visualisering vi har byggt, låt oss se om vi kan bygga en visualisering av distributions magnitud I vår datamängd. 

Så här är det samma koncept. Men nu, d innehåller fler saker. d innehåller många dataelement. Så vi får d tillbaka. D3 ger oss d. Och vi svarar genom att hitta storleken av d och därefter passerar det till skalan. 

Och då måste vi ändra vår skala, förstås. Så storheter gör helt enkelt inte går mycket mer än 10. Egentligen har det aldrig funnits 10 magnitud jordbävning. Men det är typ av vår övre slutet, vårt övre spektrat. 

Låt oss uppdatera. Nice, har vi en visualisering. Det är intressant att note-- så det finns två datapunkter som är nästan exakt på toppen av varje andra, i fråga om omfattning. Du ser detta genom opaciteten vi använder. 

Vi har geografisk data nu. Vi har latituder och longitud. Vi kanske kan göra något mycket mer intressant med det. Låt oss hitta lite mer intressant sätt att visualisera detta mer komplicerat uppgifter har vi tillgång till. 

Act V, Mapping-- grunden, Vi vill sätta dessa på en karta. Jag menar, det är där det kommer. Vi vill koda information om ställning av dessa jordbävnings avläsningar, liksom deras storlek, eftersom vi har det nu. Vi förstår hur att konsumera mer komplicerade uppgifter. 

Det första vi ska göra är skapa en karta, en bakgrundskarta. Jag ska gå igenom detta mycket snabbt. Detta är knepigt kod. Det är ytterligare en av dem recept du egentligen inte måste förstå fullt för dig att använda. Men detta är kod. Denna kod här skapar en karta. 

Vi kommer inte att gå i detalj. Men ytligt, vad den gör är, Det frågar detta us.json fil, vilket är en datafil som det vi hade tidigare. Det är mer komplicerat, naturligtvis. Men i detta fall, allt, Varje datapunkt är detta tillstånd och har en lista med latituder och longitud som definierar polygonen, den formen, det tillståndet. 

Så vad D3 kommer att göra är likartad vad vi gjorde innan. Det kommer att begära det och binda den till ett element. Och det finns en funktion som kommer att kart det elementet ut, baserat på latituder och longitud. Du kan läsa mer om det. Och jag rekommenderar den. 

Det finns länkar på slutet av denna kod postat. Och koden kommen. I det finns länkar för vidare på detta. Jag rekommenderar att du slå upp det. Men vad vi bryr oss om är denna prognos funktion. Jag vill gå igenom det. 

Först av allt, låt mig visa du att, ja, vi har en karta. Kartor är coolt. Så låt oss titta på det här produktionsfunktion. 

Projektion är mycket som en skala, skalor igen. Så vad produktion för denna prognos funktion gör är, kunde vi passera den longitud och latitudes-- i detta fall, dessa värden här är den lats longs av byggnaden vi sitter i höger now-- till projektion. Och projektion kommer att konvertera att i x och y pixelvärden. 

Så vad projektion gör är mycket lik vår skala. Det tar våra breddgrader och longitud som representerar en hel jordglob och krympande och dimensionering att ner till torget som vi vill, att vi har gett det. I det här fallet är vi passerar dessa värden. Och det ger oss, ja, att på skärmen innebär 640 pixlar. Hela den här skärmen är 700 pixlar bred, så det gör vi om här, och 154 pixlar ner, som jag vill uppskattning är ganska mycket här. 

Så ta de lat-längtar, vilket representerar något på hela jordklotet och mosa och röra att omkring att ge oss x och y pixelvärden, Detta är det första som är görs i denna kartläggning koden. Och sedan resten av kod förbrukar data och sedan kartor dessa lat-längtar på något på skärmen. 

Men vi kommer att använda denna projektion funktioner, eftersom det visar sig Vi har lat-längtar längtar också. Ser tillbaka på våra data, vi har latituder och longitud för varje observation. Så låt oss använda projektion. 

Så titta på vår framställning, Vi vill att vår exposition-- vi har en latitud och en longitud. Men vi vill pixelvärden. Och det visar sig, vi har exakt vad vi want-- projektion. Väldigt mycket som vi var använder skalan just här, vi nu kommer att använda projektion och passera den koordinater. Så det första vi doing-- så vi är få d, som är en individuell data element i en enskild jordbävning läsning. Det första vi gör är få koordinaterna. Okej, vi har koordinaterna. 

Den andra saken som vi gör är passera att till projektion. Projektion omvandlar dessa koordinater in pixelvärden, x och y. Och sedan det sista vi vill göra är att bara få x, vilket detta fall är den första. Det är den första av de två saker som returneras genom projektion. 

Vi ska göra samma sak för y. Men i stället, kommer vi tillbaka den andra delen, y. Gör dig redo att uppdatera. Ooh, extra karaktär här-- trevligt, vi har en datadriven dokument som är dölja denna JSON fil av föremål, göra en karta, och ändra skriva i förhållande till data att projicera den på en karta. Detta är verkligen intressant. Detta är coolt. 

Låt oss ta upp ett snäpp. Jag menar, vi har två stycken information med varje datapunkt. Jag menar, tre. Vi har koordinaterna, vilket är ett x och y. Och vi har storleken. 

Vi måste koda magnitud på något sätt. Vi har en massa kanaler. Vi kan använda färg. Vi kan använda radie. Vi skulle kunna använda opacitet. Vi skulle kunna använda många saker i kod. Någon av dessa attribut och många fler som inte är upptagna där, eftersom de är valfritt, vi kunde använder för att koda dessa data, slaget och alla dessa saker som jag har nämnt. 

Låt oss göra radie. Jag tror radie är den mest intuitiva. Så återigen, vi ersätta det hårdkodad 40 och göra några beräkningar. Vi använder vår favorit skala igen. Och vi är förbi d. Men inte d eftersom vi vill storleken av d. d är bara datapunkten. Vi kommer klara storleken att skala. 

Låt oss försöka det igen. Ooh, fungerar det inte. Varför fungerar det inte? 

Så kom ihåg vad skalan gör. Låt oss titta på skalan igen. Skala kartor 1-10 på till 22-600, mer eller mindre. 600 är enorm. Det är därför vi får detta. 

Så vi vill förändra vår skala till något mer rimligt. Låt oss säga, vi vill 0-60. 60 är stora, men 10 jordbävningar är oerhört sällsynt. I själva verket har de aldrig hänt. 

Så vad detta kommer att göra är, kommer det att ta vår storleksordning som går från 1 till 10 och kartlägga den på att expandera det. Och map den till 0-60. Låt oss uppdatera. 

Nice, har vi en visualisering. Det här är bra. Detta är faktiska data. Du kommer att märka, i min lilla leksak exempel, den största jordbävningen är rätt ovanpå oss. Men det är det. Vi har ett datum driven visualisering som förbrukar data och ger oss verkligen intressant information. Ja, låt oss lägga till några interaktivitet till det. Jag nämnde att var den starka kraft D3. 

Så här, för varje element, vi är beskriver ett gäng attribut. Men vi kan också beskriva vad vi vill att hända med interelement. Till exempel kan vi beskriva vad som händer när vi musen över. Och mycket likt det, som tar en funktion, mycket lik den attribut vi hade tidigare, där vi gör något till elementet när vi svävar över det. 

Så första måste vi göra är att välja det elementet, att hitta det i princip, i webbläsaren. och sedan kunde vi ställa ett attribut till den. Så vad jag gör här är, när vi svävar över något, vi får det elementet och sedan ställa sin opacitet tillbaka till 1, till helt ogenomskinlig. Låt oss se vad som ser ut som. 

Det verkar vi har en extra semikolon här. Så om vi svävar över här, det blir fullt. Men nu, naturligtvis, det förblir fullt, eftersom vi måste beskriva vad som händer när tar bort vår markör. Så låt oss göra just det på mouseOut, i motsats till mouseover. 

Och vi kommer att återställa den till vad vi hade before-- 0,5. Och nu, varje gång vi hover, vi får en full cirkel. Det hjälper oss att se vad vi vi väljer väsentligen. 

Och nu ska vi göra det här riktigt bra. Låt oss koppla detta till verkliga data. Så låt oss be kunde USGS om deras uppgifter. Så US Geological Survey har uppgifter om jordbävningar. De har en offentlig API som är i stånd att konsumeras i JSON-format. Så låt oss göra det. 

Så detta är lite av kod som ansluter till USGS API. Och det är lite av bearbetningen på den. Detta är inte relevant, men förenklar det till en enkel dataformat som en vi hade tidigare. Så jag bli av med vår uppmaning till vår falska data.json på fil. Och istället, jag ringer USGS huvudsak. 

Låt oss uppdatera, trevligt. Detta är verkliga, data verkliga från denna vecka för jordbävningar. Detta är verkligen intressant. Detta är inte förvånande för oss, men det finns en massa jordbävningar på West Coast i Kalifornien. Men jag tyckte det var mycket intressant att det fanns så många jordbävningar i Alaska, och uppenbarligen, här i mellanvästern. Jag menar, intressant, och vi är bra. Det är slutsatsen. 

Men i grunden, detta är vad D3 hjälper oss att göra. Det hjälper oss att ta data, bind det till element i DOM, och har dessa delar förändras som en funktion av uppgifter, har dessa attribut, alla de många attribut av elementen, alla vara användbara för kanaler att förmedla information. 

D3 är en otroligt kraftfull bibliotek och förvånansvärt väl köra. Detta är några kraftfulla saker. Data visualisering är en otroligt kraftfullt verktyg för att transportera människor djupa insikter som kommer till sin kärn och hjälper dem att förstå, i denna djupgående och intuitivt sätt, hur data fungerar och hur uppgifter förändrar våra liv.