[GIOCO MUSIC] 

DAVID CHOUINARD: Sono David Chouinard, e questo è D3. Benvenuto. Stiamo andando a conoscere D3 oggi. D3 è un framework JavaScript per costruire una alta qualità visualizzazioni interattive per il web. Cose come ciò che siamo vedere dietro di me, stiamo andando a imparare a fare quelle cose, tipo le basi di esso. Ma sta andando essere cool. Cominciamo fare belle immagini. Abbiamo più demo di prospettive disponibili. Facciamolo. 

Atto I, DOM manipulation-- stiamo andando per iniziare subito fare cose interessanti. Prima di tutto, a sinistra, abbiamo codice. A destra, abbiamo il risultato del nostro codice. Andiamo attraverso di essa. 

Facciamo un cerchio. Come ti sembra? svg.append circle-- abbiamo appena fatto un cerchio. Tu non mi credi, vero? Non è lì. 

Quindi quello che abbiamo fatto qui è, SVG è Scalable Vector Graphics. Questo è il nostro modo di dire al browser di rendere la grafica vettoriale del browser. Quello che abbiamo appena fatto in questo momento si aggiunge un cerchio per navigare. 

La promessa è che il cerchio richiede un po 'di attributi di base prima di poter realmente vedere. Dobbiamo dire che la sua posizione x, la posizione y, il suo raggio. Non abbiamo detto che nulla di tutto ciò, così noi non stiamo vedendo adesso. Ma andiamo dire che roba. 

Quindi prima di tutto, hai per dare il nostro cerchio un nome. Quindi chiamiamolo cerchio. Il nostro circolo ha un nome ora. E diamo un paio di attributi. Che ne dite di cx sarebbe centrare x, così il centro della posizione x. Diciamo, 200 per 200 pixel. 

Diamogli un anno di 200 pixel pure. Ed una R, un raggio di circa 40 pixel. Ora vediamo. Non posso incantesimo. 

Ci si va. Abbiamo un cerchio alla posizione 200 pixel, 200 pixel, raggio di 40 pixel. Genere di freddo, giusto? Abbiamo un cerchio. Sì. 

Quindi non c'è bisogno di seguire. Tutti questi esempi, tutte il codice che sto facendo oggi saranno fornite on line alla fine sotto forma di esempi interattivi con posti di blocco a ogni atto, e così via. 

Facciamo più cose. Questo cerchio nero è davvero brutto. Mi dispiace per quell'errore Messaggi proprio lì. Ci andiamo. 

Diamogli un colore. Come sarebbe? Mi piace blu acciaio. Beh, il nostro cerchio cambiò colore. È fantastico. Facciamo che semi-trasparente too-- semi-trasparente. 

Quindi questi sono attributi stiamo definendo sul cerchio. La prima cosa che abbiamo fatto è abbiamo messo un cerchio sulla pagina. E poi stiamo definendo un gruppo di attributi. Alcuni di questi sono necessari, come CX, CY, e Radius. E altri sono opzionali. 

Ci sono molti più attributi. C'è un sacco di loro. Ad esempio, potremmo avere un corsa così, un colpo di rosso. Ma andiamo rimuovere tale. Siamo di nuovo ad un cerchio, un cerchio blu. 

Quindi cerchiamo di fare più cerchi. Come sarebbe? Facciamo un altro cerchio. Questo è emozionante, giusto? 

Quindi dire che solo copia-incolla quello che avevamo già. Chiamiamola circle2. E facciamo l'esatto stessa cosa e dare attributi, in una posizione x di 300. Yay, abbiamo due cerchi ora. 

E, naturalmente, potremmo aggiornare questi valori. Potrei metterlo a 400, e ora si muove. E dal momento che è fastidioso, andiamo rimuoverla, così circle2.remove. E 'andato ora. 

Quindi quello che stiamo facendo e è solo molto, very-- questo è molto simile a quello che si potrebbe fare in jQuery, per esempio. Stiamo solo manipolando il DOM, si chiama. Potreste aver sentito quella parola prima. Stiamo creando roba, impostazione attributi su roba, togliendo roba. 

Ora, qui è dove si fa interessante. Quindi, più avanti nel codice, potremmo ancora fare riferimento al cerchio originale qui. Quindi cerchiamo di ripristinare l'attributo di cx. Diciamo che, per la sua posizione x 400. E ho intenzione di transizione che, quindi è ovvio. Ci andiamo. 

Così abbiamo aggiunto un cerchio. Abbiamo impostato alcuni attributi. Abbiamo aggiunto un altro cerchio, rimosso. E poi stiamo modificando il cerchio originale. 

Ma qui è dove si arriva molto più interessante. Non solo siamo in grado di impostare gli attributi come valori solo, si può dire, hey, cerchio, andare a posizionare 200. Possiamo anche impostarli come funzioni. 

Così, invece di dare 400 qui, siamo in grado di fare qualche calcolo al volo per quello che abbiamo vuole che l'attributo di essere. Quindi questo è il modo che ci esprimete quella. Noi diciamo, invece di 400, lasciatemi dare invece una funzione. E qui, all'interno di questa funzione, possiamo fare qualsiasi calcolo impazzire. 

Potremmo prendere il tempo e guardare qualche altra cosa e decidere in modo dinamico per il cerchio che valore che vogliamo. Come circa ci limitiamo a dare una posizione x casuale? Ecco, questo è quello. 

Allora, cosa che dice è, per ogni x, eseguire questa funzione. E quello che stiamo facendo è il calcolo alcune cose, a volte casuale la larghezza e restituendo tale. Così ogni volta che si corre, si ottiene un cerchio che va ad un posto a caso. È un po 'freddo. Mi sento come se potessi guardare questo per un po '. Stiamo iniziando a raggiungere qualcosa di interessante. Facciamo questo dati guidata ora. Non c'è dati qui. Cambiamo questo. 

Documents-- Act II, data-driven Quindi cerchiamo di tornare qui. E facciamo solo sbarazzarsi di circle2, perché siamo solo aggiungere e rimuovere esso. Quindi non abbiamo veramente bisogno. Dobbiamo essere molto più intelligente qui. Diciamo, abbiamo alcuni dati di qualche tipo. Una moment-- diciamo, abbiamo avuto i dati di questo modulo. Abbiamo avuto una matrice, basta un po 'di numeri. Abbiamo sette numeri qui, qualunque ammontano represent-- in conto in banca della gente, come pesano, Dio sa cosa. 

Questi sono numeri, e vuole utilizzare nostri circoli per rappresentare quei numeri in qualche modo. Vogliamo legare il nostro cerchi a quei numeri. Quindi quello che facciamo. Diciamo, vogliamo un cerchio per ogni numero. Potremmo fare il vecchio cosa stavamo doing-- cerchio append e circle2 e Circle3. Ma questo sfugge di mano, e c'è un sacco di ripetere logica. 

Quindi cerchiamo di ottenere più intelligente con quello. Invece di utilizzare il cerchio var svg.append che stavamo usando, stiamo andando a utilizzare questo piccolo blocco qui. Non voglio andare in profondità in quello che tutte queste parti fanno. Ed è una specie di un argomento avanzato. E vorrei poterlo fare. 

Ma la cosa fondamentale da recognize-- e vedrete è molto spesso nel codice D3. Questo blocco di testo base crea come molti circoli come ci sono elementi di dati in questo array qui. Quindi, questo crea come molti cerchi come ci sono elementi. E 'intenzione di creare noi sette cerchi. E lo fa un fatto, davvero fondamentale. Così corriamo tale. Rimuoviamo il nostro altro cerchio. Diciamo solo commentare questo part out ed eseguire più. 

Ci andiamo. Così il nostro cerchio ecco un lot più scuro, perché noi hanno sette cerchi, uno sopra l'altra. Abbiamo appena creato sette cerchi, uno ciascuno per ciascuno di questi elementi di dati. Ma c'è una cosa fondamentale che è accaduto con questo frammento qui. 

E 'che i dati sono stati legati. Così ognuno di questi elementi di dati, 10, 45, 105, era legato ad una categoria particolare. Quindi questi non solo creati un mazzo di cerchi ma lega queste due cose insieme. 

E in futuro, perché abbiamo creato i cerchi con questa funzione D3, se ti do un cerchio, si può dammi i dati ad esso associati. Così possiamo chiedere D3. Ehi, D3, ho questo cerchio. Qual è il dato che il cerchio ha? E D3 ci direbbe di 10 o 45 o 105. 

Queste cose sono legate. Questo è un concetto molto, molto essenziale. Diamo un'occhiata a questo. 

Quindi il modo in cui avrebbe chiesto D3-- così questo è irrilevante per questo, ma semplicemente fidati di me su di esso. Questo è il modo in cui chiediamo D3. Ehi, D3, dammi la prima cerchio che si possono trovare. Dammi il primo cerchio si possono trovare. E allora potremmo chiedere D3, che cosa è i dati su questo, come questo, 10. 

Quindi noi chiediamo solo D3, trovami il primo cerchio si possono trovare. Che cosa è i suoi dati? 10, che è in effetti la nostra primo elemento di dati. Potremmo chiederlo, hey, D3, noi trovare il nostro terzo cerchio. 105. Perché questo è veramente importante? 

Così proprio qui, ho detto che potremmo usare le funzioni. E ho detto che era una cosa molto potente. Quindi non solo possono fare cose nostre funzioni come fare un po 'di calcolo, per esempio, restituire un numero casuale, essa può anche fare le cose in base ai dati. Questo è ciò che di dati guidato documenti significano. Questo è ciò che sta per D3. 

Quindi questo x postition-- invece di dire semplicemente, tutti i circoli, ottenere x posizione 200, potrebbe dare una funzione. E qui, siamo in grado di fare qualche calcolo. e d qui sta al posto per i dati. Così ogni volta che abbiamo un cerchio, sostanzialmente, D3 creerà questi sette cerchi. E allora per ogni 

cerchio, che sta per andare, hey, circle1 qual è la vostra posizione x. In precedenza, siamo stati sempre rispondendo 200. Ma ora, ogni volta D3 chiede noi qual è la vostra posizione x, sta andando a dare noi-- abbiamo quel cerchio, così abbiamo i dati. Sta andando a darci i dati e dire, cosa vuoi che l'esposizione sia, sulla base di tali dati. 

Diciamo solo tornare i dati effettivi. Quindi, se corriamo questo, questo dà dati degli Stati Uniti guidato documenti. Questi cerchi sono basate in relazione Position-- sono basi in funzione dei dati. 

Così per il primo cerchio, D3 mette un cerchio. E poi D3 ci chiede, che cosa fare si desidera l'esposizione sia. E diciamo solo, qualunque sia il dato è. Rendere l'esposizione 10. 

Poi si chiede, che cosa si desidera che il esposizione sia per il secondo cerchio. E noi rispondiamo, 45. E noi, naturalmente, può fare qualche calcolo qui. Trovo che quei circoli sono specie di schiacciata up. 

Quindi moltiplicare per 3, moltiplicare i dati del 3. Il nostro cerchio appena stato ampliato. Il nostro valore è stato triplicato. 

Il cerchio è davvero al limite, quindi cerchiamo di forse tipo di compensarla. Diciamo che, per il 20. Ecco qui. 

Questa è una visualizzazione dei dati. E 'uno molto semplice, ma questo ci dà una certa comprensione nei nostri dati. Essa ci dice che, per esempio, abbiamo avere un piccolo gruppo di elementi. E abbiamo un grande outlier qui. Questo ci dà alcune informazioni sulla distribuzione. 

Se fossimo, per esempio, per cambiare i dati a 150 qui e di aggiornamento, la nostra visualizzazione è cambiato. Questo documento è guidato dati. 

Così, naturalmente, tutti questi elementi, tutti questi attributi qui, possiamo usare una funzione, non solo i numeri, non solo le posizioni x e y. Così possiamo usare una funzione per il colore. Così faremo lo stesso. Daremo una funzione. 

E diciamo, potremmo avere condizionali nella nostra funzione. Questa funzione può essere centinaia di linee lunghe. Si può fare cose molto, molto complicato. 

Quindi cerchiamo di mettere un'istruzione if qui. Diciamo che, se i nostri dati sono meno di 50, che è una certa soglia che ci interessa in per qualche ragione. Facciamo che verde. In caso contrario, facciamo di rosso. Come sarebbe? Nizza. 

Così la nostra visualizzazione dei dati sta iniziando per trasmettere informazioni più interessanti su molti canali. Così ora sappiamo un po ' sulla distribuzione. E noi sappiamo che c'è una sorta di tagliare a 50 che ci interessa. Sappiamo che ci sono due punti di dati sotto di tale soglia e la maggior parte di essi sopra. 

Così come un passo finale, questi dati qui, è molto raro vedere questo genere. Così facciamo solo spostare fuori per una variabile perché è più pulito, come questo. E allora usiamo quella variabile qui. E 'la stessa identica cosa. E 'solo un po' più pulito. 

Next up, Atto III, Scales-- Quindi un problema di destra ecco, se cambiamo il nostro i dati in questo 200 value-- se cambiamo a 400 o qualcosa e di aggiornamento, questo valore appena andato fuori campo. Così la nostra logica qui di come facciamo le volte 3 e 20, per diffondere fuori e poi compensato un po 'è davvero goffo. 

Cosa significano questi numeri? Stanno solo duro codificati lì. E sono molto legati ai dati. Vogliamo un documento di dati guidata. Vogliamo un documento molto flessibile, che dati forniti, si adatta ad esso e rappresenta esso. 

Ciò di cui abbiamo bisogno è fondamentalmente, abbiamo avere questo intervallo di numeri 10. 45, 105. E vogliamo mappare che affacciano su la larghezza, la larghezza completa qui. Così abbiamo la gamma di numeri che vanno da 0 a 100. E noi abbiamo questo campus mi va 20-700, in questo caso. 

Noi vogliamo tipo di mappare quella su. Vogliamo scalare che e poi compensato un po '. Si scopre che la D3 ha questi. Si chiama una scala. Quindi cerchiamo di usarlo. 

Il modo in cui giochi idraulici ho intenzione di tipo questo e poi spiegarlo. Questa è una scala. Quello che farà è, sarà tracciare valori da 1 a 200 su di 20 a 600. Possiamo verificare. Possiamo vedere che qui. 

Quindi, se io nutro 1-- un momento. Dammi un secondo. Devo aver inserito correttamente. Ci si va. Mi dispiace per questo. 

Così che cosa farà una scala è, ci vorrà un valore e poi convertire tale, espandere che fuori, in modo da riempie l'intera gamma che stai chiedendo. Quindi, in questo caso, se diamo uno, sta andando a mappare che affacciano su 20. E se diamo 200, è andando a mappare che a 600. E da qualche parte nel mezzo, se otteniamo 100, è sta per essere da qualche parte tra 20 e 600. 

E, naturalmente, ora questo è ciò che abbiamo bisogno di rimuovere quelli codificati duri cose che hanno lì. Quindi quello che vogliamo fare è prendere i dati che siamo dato che i dati individuali elemento, e passarlo in scala prima. Così scala si scala fino. 

Well-- Oh, abbiamo un piccolo errore qui. Stiamo dati mancanti. Ci si va. E che si espande fuori. 

Questo ci dà la stessa risultato che avevamo prima, ma invece di avere quelli hardcoded vincoli. E se la dimensione della nostra cambiamenti di tela, ad esempio, se vogliamo avere questo corso 400 pixel ed è squishes fuori, possiamo avere over-- possiamo espandere, o facciamo può ridurre questo margine sinistra a qualcosa di meno o più di 20. Questi numeri, queste hardcoded numeri ora senso per noi. 

E potremmo fare molto di più cose interessanti pure. Così, invece di avere lineare scala, si potrebbe desiderare di accedere una scala. E che ci darà una scala logaritmica. 

Così ora la nostra scala, invece di appena espansione fuori di tale intervallo, che sta facendo le cose più sofisticate. Invece di avere questa gamma duro codificato, e invece di avere tale 600, potremmo voler utilizzare solo la larghezza, così da 20 a larghezza meno 40, 2 volte il margine sul lato opposto. E questo rende molto più senso qualcuno che potrebbe guardare il codice. 

È interessante notare che le scale diventano molto, molto sofisticato e. Fanno un sacco di cose interessanti. Quindi le scale non hanno necessariamente di operare solo con i numeri. Facciamo una scala di colori. 

Così la nostra gamma può essere-- nostro dominio è 1 a 200. Questa è la cosa di ingresso. Ma si potrebbe desiderare di mappare verde al rosso, per esempio. E ora, se passiamo 1, stiamo andando a ottenere verde. Se diamo 200, otterremo rosso. E se passiamo una via di mezzo, che sta per essere una miscela di questo, da qualche parte sul gradiente tra il verde e il rosso. 

E invece di avere questo tipo di logica goffo abbiamo qui con il condizionale proprio lì, potremmo avere un something-- scala lineare tra quelli. Così avremmo usato la scala che abbiamo appena creato, che abbiamo chiamato il colore. E darei d, che è il nostro elemento di dati. E ci andiamo. Abbiamo una scala di colori. 

Quindi questa è la mappatura. Così l'estrema sinistra è completamente verde. L'estrema destra è completamente rossa. E tutto il resto è una funzione di d. Abbiamo un interessante visualizzazioni qui. Ma i nostri dati è stato un po 'noioso. Vediamo cosa potremmo fare se abbiamo avuto i dati più interessanti. 

Atto IV, con lavoro Data-- la prima cosa ci vogliamo fare per rendere il nostro visualizzazione più interessante è quello di spostare i dati altrove. E 'molto goffo avere i dati codificati duro qui. E in generale, saremo chiedendo qualcun altro per i dati. Saremo forse chiediamo al governo, il Census Bureau, qual è il tuo dati e poi tramando che o chiedere qualche entità terze parti per alcuni dati e quindi la costruzione di un visualizzazione su questo. 

Quindi la prima cosa che vogliamo fare è mossa che da qualche altra parte. Quindi ho intenzione di creare una presentare qui chiamato data.json. JSON è il formato dei dati. Non è necessario sapere molto su questo. E stiamo andando a copiare il pochi dati che abbiamo lì, incollarlo in là testualmente, andare torna al nostro codice di visualizzazione qui, e utilizzare questa funzione proprio qui. Non è necessario conoscere i dettagli. Ma cosa farà è, troverà quel file, prenderlo, e tornare a noi. Così che cosa che fa è, va e ottenere il file data.json. E poi tutto il codice che è frastagliata inside-- essenzialmente, tutto il codice abbiamo there-- sarà eseguito solo quando avremo i dati indietro. E poi sta andando a correre che codice con i dati che abbiamo. Ottimo, abbiamo un visualizzazione che interroga per qualche codice da qualche parte altro, che è di solito dove interroga alcuni dati da altrove, che è di solito come funzionano visualizzazioni. 

Ma voglio tornare ai dati. Così i dati fondamentalmente D3-- D3 consuma dati che è un elenco di cose. D3 prevede che i dati appena essere una lista di cose, una serie di cose. Non importa che cosa quelle cose sono, fintanto che è un array di loro. 

Ecco, per esempio, si potrebbe di Naturalmente hanno valori in virgola mobile. Potremmo avere negativi. D3 non importa, così a lungo come è una lista di cose. 

Come le cose interessanti noi potrebbe avere, potremmo anche avere una lista di stringhe come tale. Quindi questi sono i titoli Crimson Ho preso un paio di giorni fa. E forse si possono trovare alcuni interessanti cose su questi a titoli. 

Quindi, di nuovo, questa è una lista di cose. D3 non importa. Questi capita di essere una stringa. Abbiamo cambiato i nostri dati. 

Torniamo al nostro visualizzazione. Ora, la nostra visualizzazione aspetta l'ingresso di essere numeri. Quindi stiamo andando ad avere per fare alcuni cambiamenti. Così, per esempio, prima di tutto, forse vogliamo mettere questi cerchi lungo dalla lunghezza del titolo, la numero di caratteri che compongono la parte. 

Allora cosa faremo è-- ogni volta che il nostro funzione viene chiamata con una stringa, troveremo la sua lunghezza e poi passare che a scala. Il colore, che tornerà che al blu acciaio. E ci andiamo. Abbiamo una visualizzazione titoli di Crimson. 

La nostra scala è un po 'spento. Supponiamo che il più lungo titolo è lungo 100 caratteri, così estendersi che un po '. E abbiamo una visualizzazione. Così sembra che la maggior parte dei titoli sono abbastanza vicine tra loro, in termini di linea di carattere. Ma uno si erge davvero fuori. 

Potremmo costruire alcuni strumenti di esplorare quella più. Ma quando stavo lavorando su questo, sono stato curioso di sapere se, in questo insieme di dati, i titoli con i due punti in essi sarebbe più lungo. I assume farebbero. 

Quindi cerchiamo di scoprirlo. Usiamo il colore canale come abbiamo fatto prima, codificare alcuni sul fatto c'è un colon o no. Così useremo di nuovo un condizionale. Non dovete sapere i dettagli di questo, ma questo è il modo in cui controlliamo un stringa per un carattere particolare in JavaScript, ancora una volta, non è rilevante. 

Ma se non troviamo un colon, torneremo verde. E se lo facciamo, torneremo rosso. Così ancora una volta, i titoli che hanno due punti sarà rosso. Questo è ciò che questo means-- bello. 

Così sembra che il mio ipotesi è urtato. Ci sono solo due. Abbiamo solo sei punti di dati e solo due avevano due punti. Ma sembra un po 'di più sull'estremità inferiore, infatti. Notizie con due punti sembrano essere generalmente più brevi, almeno nei nostri dati set-- interessante. 

Torniamo che a blu acciaio e poi vedere quello che possiamo fare con ancora dati più interessanti. Quindi, di nuovo, ho detto che dati D3 è un elenco di cose. Abbiamo visto i numeri di molti tipi. Abbiamo visto le stringhe. Ma le cose possono anche essere oggetti. 

Possono essere cose complicate che comprendono un sacco di cose. Dire che più chiaramente, nella maggior parte dei casi, vuole costruire ogni punto dati più complicato di un solo valore. Se ci si immagina un banca dati sugli studenti, ci potrebbe essere uno studente nome, un ID studente, e un sacco di cose associato con un record particolare, non solo una stringa o un numero. Quindi diamo un'occhiata a questo. 

Questo è uno di questi set di dati. Si tratta di un set di dati sui terremoti. Quindi, tutto ciò che qui sulla nostra lista o un array di cose contiene molte cose si. Così ogni punto di dati ha una ampiezza e una coordinata. E si coordina contengono due cose. 

Così ogni giorno è oggi molto più complicato e molto più interessante e contiene molto di più informazioni interessanti. Vediamo potremmo costruire fuori di questo. Tornando indietro a qui, ancora una volta, utilizzando la nostra visualizzazione istogramma cerchio abbiamo costruito, vediamo se siamo in grado di costruire un visualizzazione della distribuzione grandezza nel nostro insieme di dati. 

Così qui, è lo stesso concetto. Ma ora, d contiene più cose. d contiene molti elementi di dati. Così otteniamo d indietro. D3 ci dà d. E noi rispondiamo trovando la grandezza di d e poi inciso che in scala. 

E poi abbiamo bisogno di cambiare nostra scala, ovviamente. Quindi grandezze semplicemente non lo fanno andare molto più di 10. In realtà, non c'è mai stato un terremoto di magnitudo 10. Ma questo è il nostro tipo di superiore fine, la nostra gamma superiore. 

Facciamo aggiornamento. Nizza, abbiamo una visualizzazione. E 'interessante note-- così vi sono due punti di dati che sono quasi esattamente sopra l' altro, in termini di grandezza. Si vede questo l'opacità che stiamo usando. 

Abbiamo dati geografici ora. Abbiamo latitudini e longitudine. Magari potremmo fare qualcosa di un molto più interessante con questo. Troviamo ancora un po ' modo interessante per visualizzare questo complica dati che abbiamo accesso. 

Atto V, Mapping-- fondamentalmente, vogliamo mettere questi su una mappa. Voglio dire, questo è dove questo sta andando. Vogliamo codificare informazioni sulla posizione di queste letture terremoto, come pure la loro grandezza, perché abbiamo adesso. Capiamo come consumare dati più complicati. 

La prima cosa che faremo è creare una mappa, una mappa di sfondo. Ho intenzione di passare attraverso questo molto rapidamente. Questo è il codice ingannevole. E 'un altro di quelli ricette non lo fai davvero devono comprendere appieno per l'uso. Ma questo è codice. Questo codice qui crea una mappa. 

Non abbiamo intenzione di andare nei dettagli. Ma superficialmente, ciò che fa è, interroga il file us.json, che è un file di dati come quello che avevamo prima. E 'più complesso, ovviamente. Ma in questo caso, tutto, ogni punto dati è questo stato ed ha una lista di latitudini e longitudine che definiscono il poligono, quella forma, quello stato. 

Quindi cosa D3 farà è simile per quello che abbiamo fatto prima. Si chiederà che e legarsi che ad un elemento. E c'è una funzione che mapperà quell'elemento fuori, sulla base delle latitudini e longitudine. Potete leggere di più su questo. E mi raccomando. 

Ci sono collegamenti a fine di questo codice postato. E il codice è commentato. In ci sono link di approfondimento su questo. Vi consiglio di guardare in su. Ma ciò che ci preoccupa è questa funzione di proiezione. Voglio passare attraverso questo. 

Prima di tutto, mi permetta di mostrare che, sì, abbiamo una mappa. Le mappe sono cool. Quindi diamo un'occhiata a questo funzione di produzione. 

La proiezione è molto come una scala, scale di nuovo. Così che cosa produzione questa funzione di proiezione fa è, potremmo passare longitudine e latitudes-- in questo caso, questi valori qui sono il lat-long dell'edificio siamo seduti a destra now-- alla proiezione. E la proiezione convertirà che in X e Y valori dei pixel. 

Allora, cosa sta facendo di proiezione è molto simile alla nostra scala. Sta prendendo nostre latitudini e longitudine che rappresenta un intero globo e si riduce e dimensionamento che fino alla piazza che vogliamo, che abbiamo dato. In questo caso, siamo passando questi valori. E ci sta dando, beh, che sullo schermo significa 640 pixel. L'intero schermo è di 700 pixel ampio, in modo che ci fa qui su, e 154 pixel in verticale, che vorrei stima è praticamente qui. 

Quindi prendere quelle lat-long, che rappresentare qualcosa su tutto il globo e squishing e commovente che circa a darci valori xey pixel, questa è la prima cosa che è fatto in questo codice di mappatura. E poi il resto Codice consuma i dati e poi quelle mappe lat-long a qualcosa sullo schermo. 

Ma stiamo andando ad utilizzare questa proiezione funzioni, perché si scopre abbiamo lat-long long pure. Guardando ai nostri dati, abbiamo latitudini e longitudine per ogni osservazione. Quindi cerchiamo di usare la proiezione. 

Così guardando la nostra esposizione, vogliamo che la nostra exposition-- abbiamo una latitudine e longitudine. Ma noi vogliamo i valori dei pixel. E si scopre, abbiamo esattamente quello che want-- proiezione. Molto come eravamo utilizzando la scala proprio qui, ora stiamo andando a utilizzare la proiezione e passare coordina. Quindi la prima cosa stiamo doing-- così siamo ottenendo d, che è un dato individuo Elemento di un individuo terremoto lettura. La prima cosa che facciamo è ottenere le coordinate. Va bene, abbiamo le coordinate. 

La seconda cosa che facciamo è passare che a proiezione. Proiezione converte quelle coordinate in valori di pixel, x ed y. E poi l'ultima cosa che voglia di fare è solo ottenere il x, che questo caso è il primo. E 'la prima delle due cose restituiti da proiezione. 

Faremo lo stesso per y. Ma invece, torneremo il secondo elemento, y. Preparatevi per aggiornare. Ooh, carattere aggiuntivo qui-- bello, abbiamo un documento guidato dati che è celando questo file JSON di oggetti, fare una mappa, e cambiando il attribuire in relazione ai dati proiettare su una mappa. Questo è davvero interessante. Questo è cool. 

Diamo una tacca. Voglio dire, abbiamo due pezzi di informazioni con ogni punto di dati. Voglio dire, a tre. Abbiamo le coordinate, che è un xe y. E abbiamo la grandezza. 

Abbiamo bisogno di codificare grandezza in qualche modo. Abbiamo un sacco di canali. Possiamo usare il colore. Possiamo usare raggio. Potremmo usare l'opacità. Potremmo usare molte cose nel codice. Ognuno di questi attributi e molti più che non sono elencati qui, perché sono opzionali, potremmo utilizzare per codificare questi dati, la corsa e tutte queste cose che ho menzionato. 

Facciamo raggio. Credo raggio è il più intuitivo. Quindi, di nuovo, ci sostituiremo che hard-coded 40 e fare alcuni calcoli. Useremo ancora la nostra scala preferita. E siamo passati d. Ma non d perché vogliamo la grandezza di d. d è solo il punto di dati. Passeremo la grandezza di scala. 

Proviamo di nuovo. Ooh, non funziona. Perché non funziona? 

Quindi ricorda che cosa scala fa. Diamo un'occhiata a scala di nuovo. Mappe in scala da 1 a 10 su a 22 a 600, più o meno. 600 è enorme. Questo è il motivo per cui stiamo ottenendo questo. 

Così vogliamo cambiare la nostra scala a qualcosa di più ragionevole. Diciamo, che vogliamo da 0 a 60. 60 è grande, ma 10 terremoti sono incredibilmente raro. In realtà, non hanno mai accaduto. 

Che cosa questo farà si, ci vorrà la grandezza che va da 1 a 10 e la mappa su per espandere fuori. E la mappa su di 0 a 60. Facciamo aggiornamento. 

Nizza, abbiamo una visualizzazione. Questo è grande. Si tratta di dati reali. Noterete, nel mio piccolo giocattolo ad esempio, la più grande terremoto è proprio sopra di noi. Ma questo è tutto. Abbiamo una visualizzazione data guidata che consuma i dati e ci dà davvero informazioni interessanti. Sì, aggiungiamo alcuni interattività ad esso. Ho detto che era la forte forza di D3. 

Ecco, per ogni elemento, siamo che descrive una serie di attributi. Ma possiamo anche descrivere quello che vogliamo accadere con elementi di interattività. Ad esempio, potremmo definire cosa succede quando il mouse sopra. E molto simile che, che prendo una funzione, molto simile al attributi che avevamo prima, dove facciamo qualcosa al elemento al passaggio del mouse su di esso. 

Quindi, prima cosa che dobbiamo fare è selezionare l'elemento, trovare fondamentalmente, nel browser. e allora potremmo impostare un attributo ad essa. Quindi quello che sto facendo qui è, al passaggio del mouse su qualcosa, ci arriveremo quell'elemento e quindi impostare l'opacità indietro 1, completamente opaca. Vediamo cosa che sembra. 

Sembra che abbiamo un virgola in più qui. Quindi, se passaggio del mouse sopra qui, si riempie. Ma ora, naturalmente, rimane pieno, perché noi devono descrivere ciò che accade quando rimuovere il nostro cursore. Allora, facciamo esattamente questo su mouseout, al contrario di mouseover. 

E noi reimpostarlo quello che avevamo before-- 0.5. E adesso, ogni volta che hover, otteniamo un cerchio completo. Essa ci aiuta a vedere quello che abbiamo stiamo selezionando essenzialmente. 

E adesso facciamo questa davvero grande. Facciamo collegare questo a dati reali. Quindi cerchiamo di chiedere potrebbe USGS sui loro dati. Così la US Geological Survey ha dati sui terremoti. Hanno una API pubblica che è in grado per essere consumato in formato JSON. Allora, facciamo così. 

Quindi questo è un po 'di codice che collega all'API USGS. E c'è un po 'di trattamento su di esso. Questo non è rilevante, ma semplifica ad un semplice formato di dati come quello che avevamo prima. Così mi libero della nostra chiamata a il nostro data.json falso in archivio. E invece, sto chiamando l'USGS essenzialmente. 

Facciamo rinfrescare, piacevole. Questo è, dati effettivi reali questa settimana per i terremoti. Questo è davvero interessante. Ciò non è sorprendente per noi, ma ci sono un sacco di terremoti sulla West Coast in California. Ma ho pensato che fosse molto interessante che ci fossero così tanti terremoti in Alaska, e apparentemente, qui nel Midwest. Voglio dire, interessante, e siamo a posto. Questa è la conclusione. 

Ma fondamentalmente, questo è ciò che ci aiuta a fare D3. Ci aiuta a prendere dati, bind per elementi del DOM, e hanno questi elementi cambiano in funzione dei dati, avere quegli attributi, tutte le molti attributi degli elementi, tutti essere utile per canali per trasmettere informazioni. 

D3 è un incredibilmente potente biblioteca e incredibilmente ben gestito. Questo è certo roba potente. La visualizzazione dei dati è un strumento incredibilmente potente per il trasporto di persone profonde intuizioni che ottiene al loro core e li aiuta a capire, in in questo modo profondo e intuitivo, come i dati e come funziona dati cambia la nostra vita.